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