Auf dieser Seite werden die in Diagrammen verwendeten internen Datendarstellungen, die DataTable
- und DataView
-Klassen zum Übergeben von Daten in ein Diagramm und die verschiedenen Möglichkeiten zur Instanziierung und Ausfüllung von DataTable
beschrieben.
Inhalt
- Daten in einem Diagramm darstellen
- Welches Tabellenschema wird in meinem Diagramm verwendet?
- DataTables und DataViews
- DataTable erstellen und ausfüllen
- dataTableToCsv()
- Weitere Informationen
Darstellung von Daten in einem Diagramm
Die Daten aller Diagramme werden in einer Tabelle gespeichert. Hier sehen Sie eine vereinfachte Darstellung einer zweispaltigen Datentabelle:
index: 0 |
index: 1 type: number label: 'Stunden pro Tag' |
---|---|
„Geschäftlich“ | 11 |
„Essen“ | 2 |
„Pendelstrecke“ | 2 |
„TV ansehen“ | 2 |
„Schlaf“ | 7 |
Daten werden in Zellen gespeichert, auf die als (row, column) verwiesen wird, wobei row ein nullbasierter Zeilenindex und column entweder ein nullbasierter Spaltenindex oder eine eindeutige ID ist, die Sie angeben können.
Eine vollständige Liste der unterstützten Elemente und Eigenschaften der Tabelle finden Sie unter Format des JavaScript-Literalparameters des Konstruktors:
- Tabelle: Ein Array mit Spalten und Zeilen sowie eine optionale Zuordnung von beliebigen Name/Wert-Paaren, die Sie zuweisen können. Attribute auf Tabellenebene werden derzeit nicht in Diagrammen verwendet.
- Spalten: Jede Spalte unterstützt einen erforderlichen Datentyp sowie ein optionales Stringlabel, eine ID, ein Muster und eine Zuordnung von beliebigen Namens-/Wertattributen. Das Label ist ein nutzerfreundlicher String, der im Diagramm angezeigt werden kann. Die ID ist eine optionale Kennung, die anstelle eines Spaltenindex verwendet werden kann. Auf eine Spalte kann im Code entweder durch einen nullbasierten Index oder die optionale ID verwiesen werden. Eine Liste der unterstützten Datentypen finden Sie unter
DataTable.addColumn()
. - Zeilen: Eine Zeile ist ein Array von Zellen sowie eine optionale Zuordnung beliebiger Name/Wert-Paare, die Sie zuweisen können.
- Zellen: Jede Zelle ist ein Objekt, das einen tatsächlichen Wert des Spaltentyps und eine optionale Stringversion des von Ihnen angegebenen Werts enthält. Beispiel: Einer numerischen Spalte wird der Wert 7 und der formatierte Wert „sieben“ zugewiesen.
Welches Tabellenschema wird in meinem Diagramm verwendet?
Verschiedene Diagramme verwenden Tabellen in verschiedenen Formaten: Ein Kreisdiagramm erwartet beispielsweise eine zweispaltige Tabelle mit einer Stringspalte und einer Zahlenspalte, wobei jede Zeile ein Segment beschreibt und die erste Spalte das Segmentlabel und die zweite Spalte den Segmentwert enthält. Für ein Streudiagramm wird jedoch eine Tabelle mit zwei numerischen Spalten erwartet. Dabei ist jede Zeile ein Punkt und die beiden Spalten sind die X- und Y-Werte des Punkts. Lesen Sie die Dokumentation Ihres Diagramms, um zu erfahren, welches Datenformat erforderlich ist.
DataTables und DataViews
Eine Diagrammdatentabelle wird in JavaScript entweder durch ein DataTable
- oder ein DataView
-Objekt dargestellt. In einigen Fällen wird ein JavaScript-Literal oder eine JSON-Version einer DataTable angezeigt, z. B. wenn Daten von einer Chart Tools-Datenquelle über das Internet gesendet werden oder ein Eingabewert für ChartWrapper
ist.
Mit DataTable
wird die ursprüngliche Datentabelle erstellt. Eine DataView
ist eine Convenience-Klasse, die eine schreibgeschützte Ansicht einer DataTable
bietet. Sie bietet die Möglichkeit, Zeilen oder Spalten schnell auszublenden oder neu anzuordnen, ohne die verknüpften Originaldaten zu ändern. Hier ein kurzer Vergleich der beiden Klassen:
Datentabelle | Datenansicht |
---|---|
Lesen/Schreiben | Lesemodus |
Kann leer sein und dann ausgefüllt werden | Ist ein Verweis auf einen vorhandenen DataTable . Sie können nicht komplett neu eingefügt werden. Sie müssen anhand eines vorhandenen DataTable -Objekts instanziiert werden. |
Daten belegen Speicherplatz. | Die Daten verweisen auf ein vorhandenes DataTable -Objekt und belegen keinen Speicherplatz. |
Können Zeilen, Spalten und Daten hinzufügen/bearbeiten/löschen und alle Änderungen sind persistent. | Kann Zeilen sortieren oder filtern, ohne die zugrunde liegenden Daten zu ändern. Zeilen und Spalten können ausgeblendet und wiederholt eingeblendet werden. |
Kann geklont werden | Kann eine DataTable -Version der Ansicht zurückgeben |
Ist Quelldaten; enthält keine Verweise | Ein Live-Verweis auf einen DataTable . Alle Änderungen an den DataTable -Daten werden sofort in der Ansicht wiedergegeben. |
Kann als Datenquelle an ein Diagramm übergeben werden | Kann als Datenquelle an ein Diagramm übergeben werden |
Berechnete Spalten werden nicht unterstützt | Unterstützt berechnete Spalten. Dabei handelt es sich um Spalten mit einem Wert, der spontan durch Kombinieren oder Bearbeiten anderer Spalten berechnet wird. |
Keine Zeile oder Spalte ausgeblendet | Darf ausgewählte Spalten ein- oder ausblenden |
DataTable erstellen und ausfüllen
Es gibt verschiedene Möglichkeiten, eine DataTable zu erstellen und mit Daten zu füllen:
- Erstellen Sie eine neue DataTable und rufen Sie dann addColumn()/addRows()/addRow()/setCell() auf.
- ArrayToDataTable()
- JavaScript-Literal-Initialisierer
- Datenquellenabfragen senden
Leere DataTable + addColumn()/addRows()/addRow()/setCell()
Schritte:
DataTable
instanziieren- Spalten hinzufügen
- Fügen Sie eine oder mehrere Zeilen hinzu, optional mit Daten. Sie können leere Zeilen hinzufügen und später füllen. Sie können Zeilen auch in zusätzlichen Zeilen hinzufügen oder entfernen oder Zellenwerte einzeln bearbeiten.
Vorteile:
- Sie können für jede Spalte den Datentyp und das Label angeben.
- Gut zum Generieren der Tabelle im Browser und weniger anfällig für Tippfehler als die JSON-Literalmethode.
Nachteile:
- Nicht so nützlich wie das Erstellen eines JSON-Literalstrings, der an einen DataTable-Konstruktor übergeben wird, wenn die Seite programmatisch auf einem Webserver generiert wird.
- Hängt von der Geschwindigkeit des Browsers ab und kann langsamer sein als JSON-Literalstrings mit größeren Tabellen (etwa 1.000 Zellen).
Beispiele:
Hier sind einige Beispiele für das Erstellen derselben Datentabelle mit verschiedenen Varianten dieses Verfahrens:
// ------- 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()
Diese Hilfsfunktion erstellt und füllt ein DataTable
mit einem einzelnen Aufruf.
Vorteile:
- Sehr einfacher und lesbarer Code, der im Browser ausgeführt wird.
- Sie können entweder den Datentyp jeder Spalte explizit angeben oder Google Charts den Typ aus den übergebenen Daten ableiten lassen.
- Wenn Sie den Datentyp einer Spalte explizit angeben möchten, geben Sie in der Kopfzeile mit dem Attribut
type
ein Objekt an. - Damit Google Charts den Typ ableiten können, verwenden Sie einen String für das Spaltenlabel.
- Wenn Sie den Datentyp einer Spalte explizit angeben möchten, geben Sie in der Kopfzeile mit dem Attribut
Beispiele:
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]]);
JavaScript-Literal-Initialisierer
Sie können ein JavaScript-Literalobjekt an Ihren Tabellenkonstruktor übergeben und damit das Tabellenschema und optional auch Daten definieren.
Vorteile:
- Nützlich beim Generieren von Daten auf Ihrem Webserver.
- Schnellere Verarbeitung als bei anderen Methoden für größere Tabellen (etwa 1.000 Zellen)
Nachteile:
- Die Syntax ist kompliziert und anfällig für Tippfehler.
- Code ist nicht sehr gut lesbar.
- Verlockend ähnlich, aber nicht identisch mit JSON.
Beispiel:
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)}]} ] } )
Datenquellenabfrage senden
Wenn Sie eine Abfrage an eine Chart Tools-Datenquelle senden, ist eine erfolgreiche Antwort eine DataTable-Instanz. Die zurückgegebene DataTable kann wie jede andere DataTable kopiert, geändert oder in eine DataView kopiert werden.
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()
Die Hilfsfunktion google.visualization.dataTableToCsv(
data)
gibt einen CSV-String mit den Daten aus der Datentabelle zurück.
Die Eingabe für diese Funktion kann entweder eine DataTable oder eine DataView sein.
Dabei werden die formatierten Werte der Zellen verwendet. Spalten-Labels werden ignoriert.
Sonderzeichen wie „,
“ und „\n
“ werden mithilfe von Standard-CSV-Escape-Regeln maskiert.
Mit dem folgenden Code wird Ramanujan,1729
Gauss,5050
in der JavaScript-Konsole deines Browsers angezeigt:
<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>
Weitere Informationen
- Diagrammtools als Datenquelle abfragen
- DataTable-JavaScript-Literalsyntax
- Referenz zu
DataTable
- Referenz zu
DataView
arrayToDataTable()
-Referenz