Questa pagina è stata tradotta dall'API Cloud Translation.

Grafico Vega

Panoramica
Esempio semplice
Caricamento in corso…
Formato dei dati
Opzioni di configurazione
Metodi
Eventi
Norme sui dati

Panoramica

VegaChart è una delle tante possibili visualizzazioni che possono essere create utilizzando la Gramma di visualizzazione Vega, un linguaggio dichiarativo per creare, salvare e condividere progetti di visualizzazioni interattive. Con Vega puoi descrivere l'aspetto visivo e il comportamento interattivo di una visualizzazione in formato JSON e generare viste basate sul web utilizzando Canvas o SVG.

Quando disegni un grafico VegaChart, devi includere all'interno delle opzioni una specifica su come creare il grafico nella grammatica di visualizzazione di Vega. Di seguito sono riportati alcuni esempi di queste specifiche, mentre nella pagina Esempi di VegaChart sono disponibili molti altri esempi.

Nota: anche se VegaChart di Google esegue i grafici di qualsiasi grafico Vega specificato con una specifica JSON Vega (compreso tutto ciò che si trova nella Galleria di esempio), non sono ancora disponibili funzionalità aggiuntive che richiedono chiamate all' API Vega.

Un semplice esempio: il grafico a barre

Ecco un semplice esempio di VegaChart che disegna un grafico a barre. (vedi l'esempio originale, un tutorial dettagliato e il grafico a barre nell'editor dei grafici Vega).

Anche se questo rappresenta un altro modo per creare un grafico a barre in Google Graph, prevediamo di integrare tutte le funzionalità degli altri grafici a barre e a colonne in una nuova implementazione basata su questo grafico VegaChart.

In questo esempio, tieni presente che l'opzione "data" è sostituita dalla seguente, che utilizza "datatable" fornite dalla chiamata di disegno come "origine" per un altro oggetto dati chiamato "table" e "table" è usato nel resto della specifica Vega.

  'data': [{'name': 'table', 'source': 'datatable'}],

google.charts.load('upcoming', {'packages': ['vegachart']}).then(drawChart);

function drawChart() {
        const dataTable = new google.visualization.DataTable();
        dataTable.addColumn({type: 'string', 'id': 'category'});
        dataTable.addColumn({type: 'number', 'id': 'amount'});
        dataTable.addRows([
          ['A', 28],
          ['B', 55],
          ['C', 43],
          ['D', 91],
          ['E', 81],
          ['F', 53],
          ['G', 19],
          ['H', 87],
        ]);

const options = {
          "vega": {
            "$schema": "https://vega.github.io/schema/vega/v4.json",
            "width": 500,
            "height": 200,
            "padding": 5,

'data': [{'name': 'table', 'source': 'datatable'}],

"signals": [
              {
                "name": "tooltip",
                "value": {},
                "on": [
                  {"events": "rect:mouseover", "update": "datum"},
                  {"events": "rect:mouseout",  "update": "{}"}
                ]
              }
            ],

"scales": [
              {
                "name": "xscale",
                "type": "band",
                "domain": {"data": "table", "field": "category"},
                "range": "width",
                "padding": 0.05,
                "round": true
              },
              {
                "name": "yscale",
                "domain": {"data": "table", "field": "amount"},
                "nice": true,
                "range": "height"
              }
            ],

"axes": [
              { "orient": "bottom", "scale": "xscale" },
              { "orient": "left", "scale": "yscale" }
            ],

"marks": [
              {
                "type": "rect",
                "from": {"data":"table"},
                "encode": {
                  "enter": {
                    "x": {"scale": "xscale", "field": "category"},
                    "width": {"scale": "xscale", "band": 1},
                    "y": {"scale": "yscale", "field": "amount"},
                    "y2": {"scale": "yscale", "value": 0}
                  },
                  "update": {
                    "fill": {"value": "steelblue"}
                  },
                  "hover": {
                    "fill": {"value": "red"}
                  }
                }
              },
              {
                "type": "text",
                "encode": {
                  "enter": {
                    "align": {"value": "center"},
                    "baseline": {"value": "bottom"},
                    "fill": {"value": "#333"}
                  },
                  "update": {
                    "x": {"scale": "xscale", "signal": "tooltip.category", "band": 0.5},
                    "y": {"scale": "yscale", "signal": "tooltip.amount", "offset": -2},
                    "text": {"signal": "tooltip.amount"},
                    "fillOpacity": [
                      {"test": "datum === tooltip", "value": 0},
                      {"value": 1}
                    ]
                  }
                }
              }
            ]
          }
        };

const chart = new google.visualization.VegaChart(document.getElementById('chart-div'));
        chart.draw(dataTable, options);
      }

<html>
  <head>
    <script src='https://www.gstatic.com/charts/loader.js'></script>
    <script>
      google.charts.load('upcoming', {'packages': ['vegachart']}).then(drawChart);

      function drawChart() {
        const dataTable = new google.visualization.DataTable();
        dataTable.addColumn({type: 'string', 'id': 'category'});
        dataTable.addColumn({type: 'number', 'id': 'amount'});
        dataTable.addRows([
          ['A', 28],
          ['B', 55],
          ['C', 43],
          ['D', 91],
          ['E', 81],
          ['F', 53],
          ['G', 19],
          ['H', 87],
        ]);

        const options = {
          "vega": {
            "$schema": "https://vega.github.io/schema/vega/v4.json",
            "width": 500,
            "height": 200,
            "padding": 5,

            'data': [{'name': 'table', 'source': 'datatable'}],

            "signals": [
              {
                "name": "tooltip",
                "value": {},
                "on": [
                  {"events": "rect:mouseover", "update": "datum"},
                  {"events": "rect:mouseout",  "update": "{}"}
                ]
              }
            ],

            "scales": [
              {
                "name": "xscale",
                "type": "band",
                "domain": {"data": "table", "field": "category"},
                "range": "width",
                "padding": 0.05,
                "round": true
              },
              {
                "name": "yscale",
                "domain": {"data": "table", "field": "amount"},
                "nice": true,
                "range": "height"
              }
            ],

            "axes": [
              { "orient": "bottom", "scale": "xscale" },
              { "orient": "left", "scale": "yscale" }
            ],

            "marks": [
              {
                "type": "rect",
                "from": {"data":"table"},
                "encode": {
                  "enter": {
                    "x": {"scale": "xscale", "field": "category"},
                    "width": {"scale": "xscale", "band": 1},
                    "y": {"scale": "yscale", "field": "amount"},
                    "y2": {"scale": "yscale", "value": 0}
                  },
                  "update": {
                    "fill": {"value": "steelblue"}
                  },
                  "hover": {
                    "fill": {"value": "red"}
                  }
                }
              },
              {
                "type": "text",
                "encode": {
                  "enter": {
                    "align": {"value": "center"},
                    "baseline": {"value": "bottom"},
                    "fill": {"value": "#333"}
                  },
                  "update": {
                    "x": {"scale": "xscale", "signal": "tooltip.category", "band": 0.5},
                    "y": {"scale": "yscale", "signal": "tooltip.amount", "offset": -2},
                    "text": {"signal": "tooltip.amount"},
                    "fillOpacity": [
                      {"test": "datum === tooltip", "value": 0},
                      {"value": 1}
                    ]
                  }
                }
              }
            ]
          }
        };

        const chart = new google.visualization.VegaChart(document.getElementById('chart-div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>

  <body>
    <div id="chart-div" style="width: 700px; height: 250px;"></div>
  </body>

</html>

Caricamento in corso...

Il nome del pacchetto google.charts.load è "vegachart".

google.charts.load("current", {packages: ["vegachart"]});

Il nome della classe della visualizzazione è google.visualization.VegaChart.

var visualization = new google.visualization.VegaChart(container);

Formato dei dati

I dati possono essere passati a un VegaChart in modo molto simile a come per altri grafici Google, utilizzando una tabella DataTable (o DataView). La differenza principale è che, invece di basarsi sull'ordine delle colonne per determinare il modo in cui vengono utilizzate, VegaChart fa affidamento sul fatto che l'ID di ogni colonna sia uguale a quello previsto per la specifica visualizzazione Vega che hai specificato. Ad esempio, la seguente tabella di dati viene creata con colonne che hanno ID per 'category' e 'amount' e gli stessi ID vengono utilizzati all'interno dell'opzione "vega" per fare riferimento a queste colonne.

Con DataTable

        const dataTable = new google.visualization.DataTable();
        dataTable.addColumn({type: 'string', 'id': 'category'});
        dataTable.addColumn({type: 'number', 'id': 'amount'});
        dataTable.addRows([
          ['A', 28],
          ['B', 55],
          ['C', 43],
        ]);

        const options = {
          'vega': {
            ...
            // Here we create the Vega data object named 'datatable',
            // which will be passed in via the draw() call with a DataTable.
            'data': {'name': 'datatable'},

            'scales': [
              {
                'name': 'yscale',
                // Here is an example of how to use the 'amount' field from 'datatable'.
                'domain': {'data': 'datatable', 'field': 'amount'},
              }
            ]
          }
        };

        const chart = new google.visualization.VegaChart(
          document.getElementById('chart-div'));
        chart.draw(dataTable, options);

Con dati incorporati Vega

        // A DataTable is required, but it may be empty.
        const dataTable = new google.visualization.DataTable();
        const options = {
          'vega': {
            // Here the data is specified inline in the Vega specification.
            "data": [
              {
               "name": "table",
                "values": [
                  {"category": "A", "amount": 28},
                  {"category": "B", "amount": 55},
                  {"category": "C", "amount": 43},
                ]
              }
            ],

            'scales': [
              {
                'name': 'yscale',
                // Here is how Vega normally uses the 'amount' field from 'table'.
                "domain": {"data": "table", "field": "category"},
              }
            ]
          }
        };

        const chart = new google.visualization.VegaChart(
          document.getElementById('chart-div'));
        chart.draw(dataTable, options);

Tuttavia, solo una tabella di dati di questo tipo può essere trasferita in questo modo a VegaChart in questo modo, mentre alcuni grafici Vega richiedono più di una tabella di dati. Affronteremo questa limitazione in una versione futura di Google Classifiche.

Nel frattempo, puoi specificare eventuali dati aggiuntivi da utilizzare nell'opzione 'vega' 'data', incorporandoli o caricandoli da un URL. Di seguito sono riportati alcuni esempi.

Opzioni di configurazione

Nome
chartArea	Un oggetto con membri per configurare il posizionamento e le dimensioni dell'area del grafico (dove viene disegnato il grafico stesso, esclusi assi e legende). Sono supportati due formati: un numero o un numero seguito da %. Un numero semplice è un valore in pixel, mentre un numero seguito da % è una percentuale. Esempio: `chartArea:{left:20,top:0,width:'50%',height:'75%'}` Tipo:oggetto Predefinito:null
chartArea.bottom	Quanto è distante il grafico dal bordo inferiore. Tipo:numero o stringa. Predefinita: automatica
chartArea.left	Quanto è distante il grafico dal bordo sinistro. Tipo:numero o stringa. Predefinita: automatica
chartArea.right	Quanto è distante il grafico dal bordo destro. Tipo:numero o stringa. Predefinita: automatica
chartArea.top	Quanto è distante il grafico dal bordo superiore. Tipo:numero o stringa. Predefinita: automatica
chartArea.width	Larghezza dell'area del grafico. Tipo:numero o stringa. Predefinita: automatica
chartArea.height	Altezza dell'area del grafico. Tipo:numero o stringa. Predefinita: automatica
altezza	Altezza del grafico, in pixel. Tipo:numero Predefinita: altezza dell'elemento contenitore
larghezza	Larghezza del grafico, in pixel. Tipo:numero Predefinita: larghezza dell'elemento contenitore

Metodi

Metodo
`draw(data, options)`	Disegna il grafico. Il grafico accetta ulteriori chiamate di metodo solo dopo che è stato attivato l'evento `ready`. `Extended description`. Tipo di reso: nessuno
`getAction(actionID)`	Restituisce l'oggetto azione descrizione comando con l'oggetto `actionID` richiesto. Tipo restituito: oggetto
`getBoundingBox(id)`	Restituisce un oggetto contenente i valori sinistra, superiore, larghezza e altezza dell'elemento del grafico `id`. Il formato per `id` non è ancora documentato (sono i valori restituiti dei gestori di eventi), ma ecco alcuni esempi: `var cli = chart.getChartLayoutInterface();` Altezza dell'area del grafico `cli.getBoundingBox('chartarea').height` Larghezza della terza barra nella prima serie di un grafico a barre o a colonne `cli.getBoundingBox('bar#0#2').width` Riquadro di delimitazione del quinto segmento di un grafico a torta `cli.getBoundingBox('slice#4')` Riquadro di delimitazione dei dati di un grafico verticale (ad es. a colonne): `cli.getBoundingBox('vAxis#0#gridline')` Riquadro di delimitazione dei dati di un grafico orizzontale (ad es. a barre): `cli.getBoundingBox('hAxis#0#gridline')` I valori sono relativi al contenitore del grafico. Viene chiamato dopo che il grafico è stato disegnato. Tipo restituito: oggetto
`getChartAreaBoundingBox()`	Restituisce un oggetto contenente i valori sinistra, superiore, larghezza e altezza dei contenuti del grafico (ovvero, escludendo etichette e legenda): `var cli = chart.getChartLayoutInterface();` `cli.getChartAreaBoundingBox().left` `cli.getChartAreaBoundingBox().top` `cli.getChartAreaBoundingBox().height` `cli.getChartAreaBoundingBox().width` I valori sono relativi al contenitore del grafico. Viene chiamato dopo che il grafico è stato disegnato. Tipo restituito: oggetto
`getChartLayoutInterface()`	Restituisce un oggetto contenente informazioni sul posizionamento del grafico e dei suoi elementi sullo schermo. I seguenti metodi possono essere chiamati sull'oggetto restituito: `getBoundingBox` `getChartAreaBoundingBox` `getHAxisValue` `getVAxisValue` `getXLocation` `getYLocation` Viene chiamato dopo che il grafico è stato disegnato. Tipo restituito: oggetto
`getHAxisValue(xPosition, optional_axis_index)`	Restituisce il valore orizzontale dei dati in `xPosition`, ovvero un offset di pixel dal bordo sinistro del contenitore del grafico. Può essere negativo. Esempio: `chart.getChartLayoutInterface().getHAxisValue(400)`. Viene chiamato dopo che il grafico è stato disegnato. Tipo di reso:number
`getImageURI()`	Restituisce il grafico serializzato come URI immagine. Viene chiamato dopo che il grafico è stato disegnato. Consulta la sezione Stampa di grafici PNG. Tipo di ritorno:stringa
`getSelection()`	Restituisce un array delle entità del grafico selezionate. Per questo grafico, è possibile selezionare una sola entità alla volta. `Extended description` Tipo restituito: array di elementi di selezione
`getVAxisValue(yPosition, optional_axis_index)`	Restituisce il valore dei dati verticali in `yPosition`, ovvero un offset di pixel verso il basso dal bordo superiore del contenitore del grafico. Può essere negativo. Esempio: `chart.getChartLayoutInterface().getVAxisValue(300)`. Viene chiamato dopo che il grafico è stato disegnato. Tipo di reso:number
`getXLocation(dataValue, optional_axis_index)`	Restituisce la coordinata x dei pixel di `dataValue` rispetto al bordo sinistro del contenitore del grafico. Esempio: `chart.getChartLayoutInterface().getXLocation(400)`. Viene chiamato dopo che il grafico è stato disegnato. Tipo di reso:number
`getYLocation(dataValue, optional_axis_index)`	Restituisce la coordinata y dei pixel di `dataValue` rispetto al bordo superiore del contenitore del grafico. Esempio: `chart.getChartLayoutInterface().getYLocation(300)`. Viene chiamato dopo che il grafico è stato disegnato. Tipo di reso:number
`removeAction(actionID)`	Rimuove l'azione della descrizione comando con l'oggetto `actionID` richiesto dal grafico. Tipo di reso: `none`
`setAction(action)`	Imposta un'azione della descrizione comando da eseguire quando l'utente fa clic sul testo dell'azione. Il metodo `setAction` prende un oggetto come parametro di azione. Questo oggetto deve specificare tre proprietà: `id`: l'ID dell'azione da impostare, `text`, il testo da visualizzare nella descrizione comando dell'azione, e `action`, la funzione da eseguire quando un utente fa clic sul testo dell'azione. Qualsiasi azione della descrizione comando deve essere impostata prima di chiamare il metodo `draw()` del grafico. Descrizione estesa. Tipo di reso: `none`
`setSelection()`	Seleziona le entità del grafico specificate. Annulla la selezione precedente. Per questo grafico è possibile selezionare una sola entità alla volta. `Extended description` Tipo di reso: nessuno
`clearChart()`	Cancella il grafico e rilascia tutte le risorse allocate. Tipo di reso: nessuno

Eventi

Per maggiori informazioni su come utilizzare questi eventi, consulta Interattività di base, Gestione degli eventi e Attivazione degli eventi.

Nome
`animationfinish`	Attivato al termine dell'animazione della transizione. Proprietà:nessuna
`click`	Attivato quando l'utente fa clic all'interno del grafico. Può essere utilizzato per identificare quando viene fatto clic su titolo, elementi di dati, voci della legenda, assi, linee della griglia o etichette. Proprietà:targetID
`error`	Attivato quando si verifica un errore durante il tentativo di rendering del grafico. Proprietà: id, messaggio
`legendpagination`	Attivato quando l'utente fa clic sulle frecce di impaginazione della legenda. Restituisce l'indice di pagina in base zero della legenda attuale e il numero totale di pagine. Proprietà: currentPageIndex, totalPages
`onmouseover`	Attivato quando l'utente passa il mouse sopra un'entità visiva. Restituisce gli indici di righe e colonne dell'elemento della tabella di dati corrispondente. Proprietà:riga, colonna
`onmouseout`	Attivato quando l'utente allontana il mouse dall'entità visiva. Restituisce gli indici di righe e colonne dell'elemento della tabella di dati corrispondente. Proprietà:riga, colonna
`ready`	Il grafico è pronto per le chiamate di metodi esterne. Se vuoi interagire con il grafico e richiamare i metodi dopo averlo tracciato, devi impostare un listener per questo evento prima di chiamare il metodo `draw` e richiamarli solo dopo l'attivazione dell'evento. Proprietà:nessuna
`select`	Attivato quando l'utente fa clic su un'entità visiva. Per sapere quali elementi sono stati selezionati, chiama `getSelection()`. Proprietà:nessuna

Norme sui dati

Tutto il codice e i dati vengono elaborati e visualizzati nel browser. Nessun dato viene inviato a nessun server.