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'}],
<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.
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);
// 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: 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 Tipo di reso: nessuno
|
getAction(actionID) |
Restituisce l'oggetto azione descrizione comando con l'oggetto Tipo restituito: oggetto
|
getBoundingBox(id) |
Restituisce un oggetto contenente i valori sinistra, superiore, larghezza e altezza dell'elemento del grafico
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):
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:
Viene chiamato dopo che il grafico è stato disegnato. Tipo restituito: oggetto
|
getHAxisValue(xPosition, optional_axis_index) |
Restituisce il valore orizzontale dei dati in Esempio: 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.
Tipo restituito: array di elementi di selezione
|
getVAxisValue(yPosition, optional_axis_index) |
Restituisce il valore dei dati verticali in Esempio: Viene chiamato dopo che il grafico è stato disegnato. Tipo di reso:number
|
getXLocation(dataValue, optional_axis_index) |
Restituisce la coordinata x dei pixel di Esempio: Viene chiamato dopo che il grafico è stato disegnato. Tipo di reso:number
|
getYLocation(dataValue, optional_axis_index) |
Restituisce la coordinata y dei pixel di Esempio: Viene chiamato dopo che il grafico è stato disegnato. Tipo di reso:number
|
removeAction(actionID) |
Rimuove l'azione della descrizione comando con l'oggetto 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
Qualsiasi azione della descrizione comando deve essere impostata prima di chiamare il metodo 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.
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 Proprietà:nessuna
|
select |
Attivato quando l'utente fa clic su un'entità visiva. Per sapere quali elementi sono stati selezionati, chiama
Proprietà:nessuna
|
Norme sui dati
Tutto il codice e i dati vengono elaborati e visualizzati nel browser. Nessun dato viene inviato a nessun server.