DataTables und DataViews

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

  1. Daten in einem Diagramm darstellen
  2. Welches Tabellenschema wird in meinem Diagramm verwendet?
  3. DataTables und DataViews
  4. DataTable erstellen und ausfüllen
    1. Erstellen Sie eine neue DataTable und rufen Sie dann addColumn()/addRows()/addRow()/setCell() auf.
    2. ArrayToDataTable()
    3. JavaScript-Literal-Initialisierer
    4. Datenquellenabfragen senden
  5. dataTableToCsv()
  6. 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
type: string
label: 'Aufgabe'

 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. Wenn ein formatierter Wert angegeben ist, wird in einem Diagramm der tatsächliche Wert für Berechnungen und Rendering verwendet. Er kann jedoch gegebenenfalls den formatierten Wert anzeigen, z. B. wenn der Nutzer den Mauszeiger auf einen Punkt bewegt. Jede Zelle hat auch eine optionale Zuordnung von beliebigen Name/Wert-Paaren.

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:

Leere DataTable + addColumn()/addRows()/addRow()/setCell()

Schritte:

  1. DataTable instanziieren
  2. Spalten hinzufügen
  3. 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.

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