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()