DataTables und DataViews

Auf dieser Seite werden die interne Datendarstellung von Diagrammen, die Klassen DataTable und DataView zur Übergabe von Daten an ein Diagramm sowie die verschiedenen Möglichkeiten zum Instanziieren und Auffüllen einer DataTable erläutert.

Inhalt

  1. Darstellung von Daten in einem Diagramm
  2. Welches Tabellenschema wird in meinem Diagramm verwendet?
  3. DataTables und DataViews
  4. Datentabelle erstellen und füllen
    1. Erstellen Sie eine neue Datentabelle und rufen Sie dann addColumn()/addRows()/addRow()/setCell() auf.
    2. arrayToDataTable()
    3. JavaScript-Literalinitialisierer
    4. Datenquellenabfrage senden
  5. dataTableToCsv()
  6. Weitere Informationen

Darstellung von Daten in einem Diagramm

Alle Diagramme speichern die Daten in einer Tabelle. Hier ist eine vereinfachte Darstellung einer ausgefüllten zweispaltigen Datentabelle:

Index: 0
type: string
label: 'Task'

 Index: 1
type: number
label: 'Stunden pro Tag'
„Geschäftlich“ 11
'Essen' 2
„Pendeln“ 2
„TV ansehen“ 2
„Schlaf“ 7

Daten werden in Zellen gespeichert, die als (row, column) referenziert werden, wobei row ein nullbasierter Zeilenindex und column entweder ein nullbasierter Spaltenindex oder eine eindeutige ID ist, die Sie angeben können.

Im Folgenden finden Sie eine vollständige Liste der unterstützten Elemente und Eigenschaften der Tabelle. Weitere Informationen finden Sie unter Format des JavaScript-Literal-Parameters des Konstruktors:

  • Tabelle: ein Array aus Spalten und Zeilen sowie eine optionale Zuordnung beliebiger Name/Wert-Paare, die Sie zuweisen können. Eigenschaften auf Tabellenebene werden derzeit nicht für Diagramme verwendet.
  • Spalten: Jede Spalte unterstützt einen erforderlichen Datentyp sowie ein optionales Stringlabel, eine ID, ein Muster und eine Zuordnung beliebiger Name-/Wert-Attribute. 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 über einen nullbasierten Index oder über 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 von beliebigen Name/Wert-Paaren, die Sie zuweisen können.
  • Zellen: Jede Zelle ist ein Objekt, das einen tatsächlichen Wert des Spaltentyps sowie eine optionale, als String formatierte Version des von Ihnen angegebenen Werts enthält. Beispiel: Einer numerischen Spalte können der Wert „7“ und der formatierte Wert „sieben“ zugewiesen werden. Wenn ein formatierter Wert angegeben wird, wird in einem Diagramm der tatsächliche Wert für Berechnungen und Rendering verwendet. Der formatierte Wert kann jedoch gegebenenfalls angezeigt werden, z. B. wenn der Nutzer den Mauszeiger auf einen Punkt bewegt. Jede Zelle verfügt außerdem über eine optionale Zuordnung beliebiger Name/Wert-Paare.

Welches Tabellenschema wird in meinem Diagramm verwendet?

Verschiedene Diagramme verwenden Tabellen in unterschiedlichen Formaten: Ein Kreisdiagramm setzt beispielsweise von einer zweispaltigen Tabelle mit einer String- und einer Zahlenspalte aus, wobei jede Zeile ein Segment beschreibt. Die erste Spalte ist das Segmentlabel und die zweite Spalte der Segmentwert. Bei Streudiagrammen wird jedoch vorausgesetzt, dass eine Tabelle aus zwei numerischen Spalten besteht, wobei jede Zeile ein Punkt ist und die beiden Spalten die X- und Y-Werte des Punkts enthalten. Lesen Sie in der Dokumentation Ihres Diagramms nach, welches Datenformat dafür erforderlich ist.

DataTables und DataViews

Eine Diagrammdatentabelle wird in JavaScript entweder durch ein DataTable- oder ein DataView-Objekt dargestellt. In einigen Fällen wird möglicherweise 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 als möglicher Eingabewert für eine ChartWrapper.

DataTable wird zum Erstellen der ursprünglichen Datentabelle verwendet. Eine DataView ist eine Convenience-Klasse, die eine schreibgeschützte Ansicht einer DataTable mit Methoden zum schnellen Ausblenden oder Neuanordnen von Zeilen oder Spalten bietet, ohne die verknüpften ursprünglichen Daten zu ändern. Hier ein kurzer Vergleich der beiden Klassen:

DataTable DataView
Lesen/Schreiben Lesezugriff
Kann leer erstellt und dann ausgefüllt werden Ist ein Verweis auf eine vorhandene DataTable. Kann nicht von Grund auf ausgefüllt werden; muss mit einem Verweis auf ein vorhandenes DataTable-Objekt instanziiert werden.
Daten belegen Speicherplatz. Daten sind ein Verweis auf eine vorhandene DataTable und belegen keinen Speicherplatz.
Kann Zeilen, Spalten und Daten hinzufügen, bearbeiten und löschen. Alle Änderungen sind dauerhaft. Kann Zeilen sortieren oder filtern, ohne die zugrunde liegenden Daten zu ändern. Zeilen und Spalten können wiederholt aus- und eingeblendet werden.
Kann geklont werden Kann eine DataTable-Version der Ansicht zurückgeben
Ist Quelldaten; enthält keine Verweise Livereferenz auf eine DataTable; Änderungen an den DataTable-Daten werden sofort in der Ansicht angezeigt.
Können als Datenquelle an ein Diagramm übergeben werden Können als Datenquelle an ein Diagramm übergeben werden
Berechnete Spalten werden nicht unterstützt Unterstützt berechnete Spalten, d. h. Spalten mit einem Wert, der durch Kombination oder Bearbeitung anderer Spalten direkt berechnet wird.
Keine Zeile oder Spalte ausgeblendet Kann ausgewählte Spalten ein- oder ausblenden

Datentabelle erstellen und füllen

Es gibt verschiedene Möglichkeiten, eine DataTable zu erstellen und auszufüllen:

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

Schritte:

  1. Neue DataTable instanziieren
  2. Spalten hinzufügen
  3. Fügen Sie eine oder mehrere Zeilen hinzu, die optional mit Daten gefüllt werden. Sie können leere Zeilen hinzufügen und später füllen. Sie können auch Zeilen hinzufügen oder entfernen oder Zellenwerte einzeln bearbeiten.

Vorteile:

  • Sie können den Datentyp und das Label jeder Spalte angeben.
  • Gut geeignet 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 bei der programmatischen Generierung der Seite auf einem Webserver an einen DataTable-Konstruktor übergeben wird.
  • Hängt von der Geschwindigkeit des Browsers ab und kann langsamer sein als JSON-Literalstrings mit größeren Tabellen (mehr als 1.000 Zellen).

Beispiele:

Im Folgenden finden Sie einige Beispiele zum Erstellen derselben Datentabelle mit verschiedenen Varianten dieser Technik:

// ------- 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 mit einem einzigen Aufruf eine DataTable und füllt sie aus.

Vorteile:

  • Sehr einfacher und lesbarer Code, der im Browser ausgeführt wird.
  • Sie können entweder explizit den Datentyp jeder Spalte 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 kann, verwenden Sie einen String für die Spaltenbeschriftung.

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-Literal-Objekt an Ihren Tabellenkonstruktor übergeben, wodurch das Tabellenschema und optional auch die Daten definiert werden.

Vorteile:

  • Nützlich beim Generieren von Daten auf Ihrem Webserver.
  • Schnellere Verarbeitung als bei anderen Methoden für größere Tabellen (mehr als 1.000 Zellen)

Nachteile:

  • Die richtige Syntax ist nicht einfach und die Syntax ist anfällig für Tippfehler.
  • Code ist nicht sehr gut lesbar.
  • Verlockend, aber nicht identisch mit JSON.

Example:

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. Diese zurückgegebene DataTable kann genau wie jede andere DataTable in eine DataView kopiert, geändert oder 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. Beschriftungen für Spalten werden ignoriert.

Sonderzeichen wie „,“ und „\n“ werden mithilfe der CSV-Standardregeln maskiert.

Mit dem folgenden Code wird

Ramanujan,1729
Gauss,5050

in der JavaScript-Konsole des 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