Questa pagina illustra la rappresentazione interna dei dati utilizzata dai grafici, le classi DataTable e DataView utilizzate per passare dati in un grafico e i vari modi per creare un'istanza e compilare un DataTable.
Contenuti
- Come sono rappresentati i dati in un grafico
- Quale schema di tabella utilizza il mio grafico?
- DataTables e DataView
- Creazione e compilazione di una tabella di dati
- dataTableToCsv()
- Ulteriori informazioni
Come sono rappresentati i dati in un grafico
Tutti i grafici memorizzano i dati in una tabella. Di seguito è riportata una rappresentazione semplificata di una tabella di dati a due colonne compilata:
indice: 0 |
indice: 1 tipo: numero label: 'Ore al giorno' |
|---|---|
| 'Lavoro' | 11 |
| "Mangiare" | 2 |
| "Tragitto giornaliero" | 2 |
| Guarda la TV | 2 |
| Sonno | 7 |
I dati vengono archiviati in celle indicate come (riga, colonna), dove riga è un indice di riga in base zero e colonna è un indice di colonna in base zero o un ID univoco che puoi specificare.
Di seguito è riportato un elenco più completo degli elementi e delle proprietà della tabella supportati. Per ulteriori dettagli, consulta la sezione Formato del parametro letterale JavaScript del costruttore:
- Tabella: un array di colonne e righe, oltre a una mappa facoltativa di coppie arbitrarie nome/valore che puoi assegnare. Al momento, le proprietà a livello di tabella non sono utilizzate dai grafici.
- Colonne: ogni colonna supporta un tipo di dati obbligatorio, oltre a un'etichetta di stringa facoltativa, un ID, un pattern e una mappa di proprietà nome/valore arbitrarie. L'etichetta è una stringa facile da usare che può essere visualizzata nel grafico; l'ID è un identificatore facoltativo che può essere utilizzato al posto dell'indice di una colonna. Una colonna può essere indicata nel codice tramite un indice in base zero o l'ID facoltativo. Consulta l'
DataTable.addColumn()per un elenco dei tipi di dati supportati. - Righe: una riga è un array di celle, oltre a una mappa facoltativa di coppie arbitrarie nome/valore che puoi assegnare.
- Celle: ogni cella è un oggetto contenente un valore effettivo del tipo di colonna, più una versione facoltativa con formattazione in formato stringa del valore specificato. Ad esempio, a una colonna numerica potrebbe essere assegnato il valore 7 e il valore formattato "sette".
Quale schema di tabella utilizza il mio grafico?
Grafici diversi utilizzano tabelle di formati diversi: ad esempio, un grafico a torta prevede una tabella a due colonne con una colonna di tipo stringa e una colonna numerica, in cui ogni riga descrive una fetta, mentre la prima colonna corrisponde all'etichetta della fetta e la seconda colonna al valore della fetta. Un grafico a dispersione, tuttavia, prevede una tabella composta da due colonne numeriche, in cui ogni riga rappresenta un punto e le due colonne corrispondono ai valori X e Y del punto. Leggi la documentazione del grafico per scoprire quale formato di dati richiede.
DataTables e DataView
Una tabella di dati del grafico è rappresentata in JavaScript da un oggetto DataTable
o da un oggetto DataView. In alcuni casi, potresti vedere utilizzata una versione letterale JavaScript o JSON di una tabella di dati, ad esempio quando i dati vengono inviati su internet da un'origine dati di strumenti grafici o come possibile valore di input per una ChartWrapper.
Un DataTable viene utilizzato
per creare la tabella di dati originale. Una DataView è una pratica classe che fornisce una visualizzazione di sola lettura di un DataTable, con metodi per nascondere o riordinare righe o colonne rapidamente senza modificare i dati originali collegati. Ecco un breve confronto tra le due classi:
| DataTable | DataView |
|---|---|
| Lettura/scrittura | Solo lettura |
| Può essere creato vuoto e poi compilato | È un riferimento a un DataTable esistente. Non può essere compilato da zero; deve essere creata un'istanza con un riferimento a un elemento DataTable esistente. |
| I dati occupano spazio di archiviazione. | I dati sono un riferimento a un DataTable esistente e non occupano spazio. |
| Può aggiungere/modificare/eliminare righe, colonne e dati; inoltre, tutte le modifiche sono permanenti. | Può ordinare o filtrare le righe senza modificare i dati sottostanti. Le righe e le colonne possono essere nascoste e visualizzate ripetutamente. |
| Possono essere clonati | Può restituire una versione DataTable della vista |
| Sono dati di origine; non contengono riferimenti | Un riferimento in tempo reale a un DataTable; qualsiasi modifica apportata ai dati di DataTable viene applicata immediatamente nella vista. |
| Possono essere trasmesse in un grafico come origine dati. | Possono essere trasmesse in un grafico come origine dati. |
| Non supporta le colonne calcolate | Supporta colonne calcolate, ovvero colonne con un valore calcolato all'istante combinando o manipolando altre colonne. |
| Le righe o le colonne non vengono nascoste | Può nascondere o mostrare le colonne selezionate |
Creazione e compilazione di una tabella di dati
Esistono diversi modi per creare e compilare una tabella di dati:
- Crea una nuova tabella di dati, quindi chiama addColumn()/addRows()/addRow()/setCell()
- arrayToDataTable()
- Inizializzatore letterale JavaScript
- Inviare una query sull'origine dati
Tabella dati vuota + addColumn()/addRows()/addRow()/setCell()
Passi:
- Crea un'istanza per una nuova
DataTable - Aggiungi colonne
- Aggiungi una o più righe, facoltativamente completate con dati. Puoi aggiungere righe vuote e compilarle in un secondo momento. Puoi anche aggiungere o rimuovere altre righe o modificare singolarmente i valori delle celle.
Vantaggi:
- Puoi specificare il tipo di dati e l'etichetta di ogni colonna.
- Ideale per generare la tabella nel browser e meno soggetta a errori di battitura rispetto al metodo letterale JSON.
Svantaggi:
- Non è utile come creare una stringa letterale JSON da passare a un costruttore DataTable quando si genera la pagina in modo programmatico su un server web.
- Dipende dalla velocità del browser e può essere più lento rispetto alle stringhe letterali JSON con tabelle più grandi (più di 1000 celle).
Esempi:
Ecco alcuni esempi di creazione della stessa tabella di dati utilizzando diverse varianti di questa tecnica:
// ------- Version 1------------
// Add rows + data at the same time
// -----------------------------
var data = new google.visualization.DataTable();
// Declare columns
data.addColumn('string', 'Employee Name');
data.addColumn('datetime', 'Hire Date');
// Add data.
data.addRows([
['Mike', {v:new Date(2008,1,28), f:'February 28, 2008'}], // Example of specifying actual and formatted values.
['Bob', new Date(2007,5,1)], // More typically this would be done using a
['Alice', new Date(2006,7,16)], // formatter.
['Frank', new Date(2007,11,28)],
['Floyd', new Date(2005,3,13)],
['Fritz', new Date(2011,6,1)]
]);
// ------- Version 2------------
// Add empty rows, then populate
// -----------------------------
var data = new google.visualization.DataTable();
// Add columns
data.addColumn('string', 'Employee Name');
data.addColumn('date', 'Start Date');
// Add empty rows
data.addRows(6);
data.setCell(0, 0, 'Mike');
data.setCell(0, 1, {v:new Date(2008,1,28), f:'February 28, 2008'});
data.setCell(1, 0, 'Bob');
data.setCell(1, 1, new Date(2007, 5, 1));
data.setCell(2, 0, 'Alice');
data.setCell(2, 1, new Date(2006, 7, 16));
data.setCell(3, 0, 'Frank');
data.setCell(3, 1, new Date(2007, 11, 28));
data.setCell(4, 0, 'Floyd');
data.setCell(4, 1, new Date(2005, 3, 13));
data.setCell(5, 0, 'Fritz');
data.setCell(5, 1, new Date(2007, 9, 2));
arrayToDataTable()
Questa funzione helper crea e compila un DataTable utilizzando una singola chiamata.
Vantaggi:
- Codice eseguito nel browser molto semplice e leggibile.
- Puoi specificare esplicitamente il tipo di dati di ogni colonna o lasciare che Google Graph determini il tipo di dati dai dati trasmessi.
- Per specificare esplicitamente il tipo di dati di una colonna, specifica un oggetto nella riga di intestazione con la proprietà
type. - Per consentire ai grafici di Google di dedurre il tipo, utilizza una stringa per l'etichetta della colonna.
- Per specificare esplicitamente il tipo di dati di una colonna, specifica un oggetto nella riga di intestazione con la proprietà
Esempi:
var data = google.visualization.arrayToDataTable([
['Employee Name', 'Salary'],
['Mike', {v:22500, f:'22,500'}], // Format as "22,500".
['Bob', 35000],
['Alice', 44000],
['Frank', 27000],
['Floyd', 92000],
['Fritz', 18500]
],
false); // 'false' means that the first row contains labels, not data.
var data = google.visualization.arrayToDataTable([
[ {label: 'Year', id: 'year'},
{label: 'Sales', id: 'Sales', type: 'number'}, // Use object notation to explicitly specify the data type.
{label: 'Expenses', id: 'Expenses', type: 'number'} ],
['2014', 1000, 400],
['2015', 1170, 460],
['2016', 660, 1120],
['2017', 1030, 540]]);
Inizializzatore letterale JavaScript
Puoi passare un oggetto letterale JavaScript al costruttore della tabella, definendo lo schema della tabella e anche i dati facoltativi.
Vantaggi:
- Utile quando generi dati sul tuo server web.
- Elabora più velocemente di altri metodi per tabelle di grandi dimensioni (oltre 1000 celle)
Svantaggi:
- La sintassi è difficile da usare e soggetta a errori di battitura.
- Codice non molto leggibile.
- Temperamente simile, ma non identico, a JSON.
Esempio:
var data = new google.visualization.DataTable(
{
cols: [{id: 'task', label: 'Employee Name', type: 'string'},
{id: 'startDate', label: 'Start Date', type: 'date'}],
rows: [{c:[{v: 'Mike'}, {v: new Date(2008, 1, 28), f:'February 28, 2008'}]},
{c:[{v: 'Bob'}, {v: new Date(2007, 5, 1)}]},
{c:[{v: 'Alice'}, {v: new Date(2006, 7, 16)}]},
{c:[{v: 'Frank'}, {v: new Date(2007, 11, 28)}]},
{c:[{v: 'Floyd'}, {v: new Date(2005, 3, 13)}]},
{c:[{v: 'Fritz'}, {v: new Date(2011, 6, 1)}]}
]
}
)
Invio di una query sull'origine dati
Quando invii una query a un'origine dati di Chart Tools, una risposta corretta è un'istanza DataTable. Questa DataTable restituita può essere copiata, modificata o copiata in un DataView come per qualsiasi altra DataTable.
function drawVisualization() {
var query = new google.visualization.Query(
'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1');
// Apply query language statement.
query.setQuery('SELECT A,D WHERE D > 100 ORDER BY D');
// Send the query with a callback function.
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
visualization = new google.visualization.LineChart(document.getElementById('visualization'));
visualization.draw(data, {legend: 'bottom'});
}
dataTableToCsv()
La funzione
di supporto google.visualization.dataTableToCsv(dati)
restituisce una stringa CSV con i dati della tabella dati.
L'input a questa funzione può essere una tabella o una visualizzazione.
Utilizza i valori formattati delle celle. Le etichette di colonna vengono ignorate.
I caratteri speciali come "," e "\n" vengono sottoposti a escape utilizzando le regole di escape standard in formato CSV.
Il seguente codice verrà visualizzato
Ramanujan,1729
Gauss,5050
nella console JavaScript del browser:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Name', 'Number'],
['Ramanujan', 1729],
['Gauss', 5050]
]);
var csv = google.visualization.dataTableToCsv(data);
console.log(csv);
}
</script>
</head>
</html>
Ulteriori informazioni
- Esecuzione di query su un'origine dati di Chart Tools
- Sintassi letterale JavaScript di DataTable
- Riferimento
DataTable - Riferimento
DataView - Riferimento
arrayToDataTable()