Questa pagina illustra la rappresentazione di dati interna utilizzata dai grafici, le classi DataTable
e DataView
utilizzate per trasferire i dati in un grafico e i vari modi per creare e creare un'istanza DataTable
.
Contenuti
- Come vengono rappresentati i dati in un grafico
- Quale schema della tabella utilizza il mio grafico?
- DataTables e DataViews
- Creazione e completamento di una tabella Data
- dataTableToCsv()
- Scopri di più
Come vengono rappresentati i dati in un grafico
Tutti i grafici archiviano i dati in una tabella. Di seguito è riportata una rappresentazione semplificata di una tabella di dati compilata a due colonne:
indice: 0 |
indice: 1 tipo: numero etichetta: "Ore al giorno" |
---|---|
"Lavoro" | 11 |
"Mangia" | 2 |
"Tragitto giornaliero" | 2 |
Guarda la TV | 2 |
"Sonno" | 7 |
I dati vengono archiviati nelle celle a cui viene fatto riferimento come (riga, colonna), dove riga è un indice di riga basato su zero e colonna è un indice di colonna basato su zero o un ID univoco che puoi specificare.
Ecco un elenco più completo degli elementi e delle proprietà supportati dalla tabella. Per ulteriori dettagli, consulta la sezione Formato del parametro letterale JavaScript del costruttore:
- Tabella: una matrice di colonne e righe, oltre a una mappa facoltativa di coppie nome/valore arbitrarie che puoi assegnare. Al momento, le proprietà a livello di tabella non vengono utilizzate dai grafici.
- Colonne: ogni colonna supporta un tipo di dati obbligatorio, oltre a un'etichetta di stringa facoltativa, ID, pattern e mappa di proprietà di nome/valore arbitrarie. L'etichetta è una stringa facile da usare che può essere visualizzata dal grafico; l'ID è un identificatore facoltativo che può essere utilizzato al posto di un indice di colonna. Una colonna può essere definita nel codice tramite l'indice basato su zero o l'ID facoltativo. Consulta la
DataTable.addColumn()
per un elenco dei tipi di dati supportati. - Righe: una riga è una matrice di celle, oltre a una mappa facoltativa di coppie nome/valore arbitrarie che puoi assegnare.
- Celle: ogni cella è un oggetto contenente un valore effettivo di tipo colonna, oltre a una versione facoltativa del formato fornito in formato stringa. Ad esempio, a una colonna numerica potrebbe essere assegnato il valore 7 e il valore formattato "seven".
Quale schema della tabella utilizza il mio grafico?
Grafici diversi utilizzano le tabelle in diversi formati: ad esempio, un grafico a torta prevede una tabella a due colonne con una colonna stringa e una colonna numerica, in cui ogni riga descrive una sezione e la prima colonna è l'etichetta della sezione e la seconda è il valore della sezione. Un grafico a dispersione, tuttavia, prevede una tabella composta da due colonne numeriche, dove ogni riga è un punto e le due colonne sono i valori X e Y del punto. Leggi la documentazione del grafico per informazioni sul formato dei dati richiesto.
Tabelle dati e visualizzazioni dati
Una tabella di dati del grafico è rappresentata in JavaScript da un oggetto DataTable
o da un oggetto DataView
. In alcuni casi, potresti vedere una versione letterale o JSON JavaScript di una DataTable utilizzata, ad esempio quando i dati vengono inviati su Internet da un'origine dati di Chart Tools o come possibile valore di input per ChartWrapper
.
Per creare la tabella dei dati originale viene utilizzato un DataTable
. DataView
è una classe di convenienza che fornisce una visualizzazione di sola lettura di una DataTable
, con metodi per nascondere o riordinare rapidamente le righe o le colonne senza modificare i dati originali collegati. Ecco un breve confronto tra le due classi:
Tabella dati | Visualizzazione dati |
---|---|
Lettura/scrittura | Sola lettura |
Può essere vuoto e completato | È un riferimento a un DataTable esistente. Non può essere completata da zero; deve essere creata un'istanza con un riferimento a un 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 e 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 più volte. |
Può essere clonato | Possono restituire una versione DataTable della vista |
È un'origine dati; non contiene riferimenti | Un riferimento in tempo reale a un DataTable ; qualsiasi modifica apportata ai dati di DataTable viene riportata immediatamente nella visualizzazione. |
Può essere trasmesso a un grafico come origine dati | Può essere trasmesso a un grafico come origine dati |
Non supporta le colonne calcolate | Supporta le colonne calcolate, ovvero colonne con un valore calcolato all'istante combinando o manipolando altre colonne. |
Nessuna riga o colonna nascosta | Può nascondere o mostrare le colonne selezionate |
Creazione e completamento di una tabella dati
Esistono diversi modi per creare e completare una DataTable:
- Crea una nuova DataTable, quindi chiama addColumn()/addRows()/addRow()/setCell()
- matriceDataData()
- Inizializzatore letterale JavaScript
- Inviare una query con origine dati
Tabella dati vuota + addColumn()/addRows()/addRow()/setCell()
Procedura:
- Crea un'istanza di un nuovo
DataTable
- Aggiungi colonne
- Aggiungi una o più righe, facoltativamente completate con i dati. Puoi aggiungere righe vuote e compilarle in un secondo momento. Puoi anche aggiungere o rimuovere righe aggiuntive o modificare i valori delle celle singolarmente.
Vantaggi:
- Puoi specificare il tipo di dati e l'etichetta di ogni colonna.
- Ideale per generare la tabella nel browser e meno suscettibili di errori di battitura rispetto al metodo letterale JSON.
Svantaggi:
- Non è utile quanto creare una stringa letterale JSON da passare in un costruttore DataTable durante la generazione programmatica della pagina su un server web.
- Dipende dalla velocità del browser e può essere più lenta delle stringhe letterali JSON con tabelle più grandi (circa 1000 celle).
Esempi:
Di seguito sono riportati alcuni esempi di come creare la stessa tabella dati utilizzando varianti diverse 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 completa un DataTable
utilizzando una singola chiamata.
Vantaggi:
- Codice molto semplice e leggibile eseguito nel browser.
- Puoi specificare esplicitamente il tipo di dati di ogni colonna o consentire a Google Tables di dedurre il tipo 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 a Google Tables 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, facoltativamente, anche i dati.
Vantaggi:
- Utile quando genera dati sul server web.
- Elabora più velocemente di altri metodi per le tabelle più grandi (circa 1000 celle)
Svantaggi:
- La sintassi è difficile da correggere e soggetta a errori di battitura.
- Codice non molto leggibile.
- allettante, ma non identica 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 con origine dati
Quando invii una query a un'origine dati di Chart Tools, una risposta corretta è un'istanza DataTable. Questa risorsa DataTable restituita può essere copiata, modificata o copiata in un DataView come qualsiasi altro 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()
I google.visualization.dataTableToCsv(
dati)
della funzione di supporto restituiscono una stringa CSV con i dati della tabella dati.
L'input per questa funzione può essere DataTable o DataView.
Utilizza i valori formattati delle celle. Le etichette delle colonne vengono ignorate.
I caratteri speciali come ",
" e "\n
" vengono interpretati letteralmente utilizzando le regole di escape standard per i file CSV.
Nella console JavaScript del browser verrà visualizzato il seguente codice
Ramanujan,1729
Gauss,5050
:
<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>
Scopri di più
- Eseguire query su un'origine dati degli strumenti di creazione grafici
- Sintassi letterale JavaScript di DataTable
- Riferimento
DataTable
- Riferimento
DataView
- Riferimento
arrayToDataTable()