Referenz zur Google Visualization API

Auf dieser Seite sind die Objekte aufgeführt, die von der Google Visualization API zur Verfügung gestellt werden, sowie die Standardmethoden, die von allen Visualisierungen zur Verfügung gestellt werden.

Hinweis: Der Namespace der Google Visualization API ist google.visualization.*.

Hinweis zu Arrays

Einige Browser können nachgestellte Kommas in JavaScript-Arrays nicht richtig verarbeiten. Verwenden Sie sie daher nicht. Leere Werte in der Mitte eines Arrays sind in Ordnung. Ein Beispiel:

data = ['a','b','c', ,]; // BAD
data = ['a','b','c'];   // OK
data = ['a','b', ,'d']; // Also OK. The third value is undefined.

DataTable-Klasse

Stellt eine zweidimensionale, änderbare Wertetabelle dar. Wenn Sie eine schreibgeschützte Kopie einer DataTable erstellen möchten (optional gefiltert, um bestimmte Werte, Zeilen oder Spalten anzuzeigen), erstellen Sie eine DataView.

Jeder Spalte wird ein Datentyp sowie mehrere optionale Attribute wie eine ID, ein Label und ein Musterstring zugewiesen.

Darüber hinaus können Sie jeder Zelle, Zeile, Spalte oder der gesamten Tabelle benutzerdefinierte Eigenschaften (Name/Wert-Paare) zuweisen. Einige Visualisierungen unterstützen bestimmte benutzerdefinierte Eigenschaften. Beispielsweise unterstützt die Tabellenvisualisierung die Zelleneigenschaft „style“, mit der Sie der gerenderten Tabellenzelle einen Inline-CSS-Stilstring zuweisen können. In einer Visualisierung sollten in der Dokumentation alle unterstützten benutzerdefinierten Eigenschaften beschrieben werden.

Siehe auch: QueryResponse.getDataTable

Konstruktor

Syntax

DataTable(opt_data, opt_version)

opt_data
[Optional] Daten, die zum Initialisieren der Tabelle verwendet werden. Dies kann entweder die JSON-Datei sein, die durch Aufrufen von DataTable.toJSON() für eine ausgefüllte Tabelle zurückgegeben wird, oder ein JavaScript-Objekt mit Daten, die zum Initialisieren der Tabelle verwendet werden. Die Struktur des JavaScript-Literalobjekts wird hier beschrieben. Wenn dieser Parameter nicht angegeben wird, wird eine neue, leere Datentabelle zurückgegeben.
opt_version
[Optional] Ein numerischer Wert, der die Version des verwendeten Verbindungsprotokolls angibt. Dies wird nur von Datenquellen-Implementierern für Diagrammtools verwendet. Die aktuelle Version ist 0.6.

Details

Das DataTable-Objekt enthält die an eine Visualisierung übergebenen Daten. Eine DataTable ist eine einfache zweidimensionale Tabelle. Alle Daten in den einzelnen Spalten müssen denselben Datentyp haben. Jede Spalte hat einen Deskriptor, der ihren Datentyp, ein Label für diese Spalte (das möglicherweise von einer Visualisierung angezeigt wird) und eine ID, die verwendet werden kann, um auf eine bestimmte Spalte zu verweisen (als Alternative zur Verwendung von Spaltenindexen), enthält. Das DataTable-Objekt unterstützt auch eine Zuordnung beliebiger Attribute, die einem bestimmten Wert, einer Zeile, einer Spalte oder dem gesamten DataTable zugewiesen sind. In Visualisierungen können diese zur Unterstützung zusätzlicher Funktionen verwendet werden. Beispielsweise werden in der Tabellenvisualisierung benutzerdefinierte Eigenschaften verwendet, damit Sie einzelnen Zellen beliebige Klassennamen oder Stile zuweisen können.

Jede Zelle in der Tabelle enthält einen Wert. Zellen können einen Nullwert oder einen Wert des durch ihre Spalte angegebenen Typs haben. Die Zellen können optional eine „formatierte“ Version der Daten annehmen. Dies ist eine String-Version der Daten, die zur Anzeige durch eine Visualisierung formatiert ist. Eine Visualisierung kann die formatierte Version zur Anzeige verwenden (ist aber nicht erforderlich). Die Daten selbst werden jedoch immer für das Sortieren oder Berechnungen verwendet, z. B. um zu bestimmen, an welcher Stelle in einem Diagramm ein Punkt platziert werden soll. Ein Beispiel wäre die Zuweisung der Werte "low", "medium" und "high" als formatierte Werte zu numerischen Zellenwerten von 1, 2 und 3.

Wenn Sie nach dem Aufruf des Konstruktors Datenzeilen hinzufügen möchten, können Sie entweder addRow() für eine einzelne Zeile oder addRows() für mehrere Zeilen aufrufen. Sie können auch Spalten hinzufügen, indem Sie die addColumn()-Methoden aufrufen. Es gibt auch Entfernungsmethoden für Zeilen und Spalten. Statt Zeilen oder Spalten zu entfernen, sollten Sie jedoch eine DataView erstellen, die eine selektive Ansicht der DataTable ist.

Wenn Sie Werte in einem DataTable ändern, nachdem es an die draw()-Methode einer Visualisierung übergeben wurde, wirken sich die Änderungen nicht sofort auf das Diagramm aus. Sie müssen draw() noch einmal aufrufen, um Änderungen zu übernehmen.

Hinweis: Google Charts führt keine Validierung von Datentabellen durch. (Andernfalls würden Diagramme langsamer gerendert.) Wenn Sie eine Zahl angeben, bei der Ihre Spalte einen String erwartet (oder umgekehrt), versucht Google Charts, den Wert auf eine sinnvolle Weise zu interpretieren. Fehler werden jedoch nicht gekennzeichnet.

Beispiele

Im folgenden Beispiel wird das Instanziieren und Ausfüllen einer DataTable mit einem literalen String mit denselben Daten wie im JavaScript-Beispiel oben veranschaulicht:

var dt = new google.visualization.DataTable({
    cols: [{id: 'task', label: 'Task', type: 'string'},
           {id: 'hours', label: 'Hours per Day', type: 'number'}],
    rows: [{c:[{v: 'Work'}, {v: 11}]},
           {c:[{v: 'Eat'}, {v: 2}]},
           {c:[{v: 'Commute'}, {v: 2}]},
           {c:[{v: 'Watch TV'}, {v:2}]},
           {c:[{v: 'Sleep'}, {v:7, f:'7.000'}]}]
    }, 0.6);

Im folgenden Beispiel wird eine neue, leere DataTable erstellt und dann manuell mit den oben genannten Daten gefüllt:

var data = new google.visualization.DataTable();
data.addColumn('string', 'Task');
data.addColumn('number', 'Hours per Day');
data.addRows([
  ['Work', 11],
  ['Eat', 2],
  ['Commute', 2],
  ['Watch TV', 2],
  ['Sleep', {v:7, f:'7.000'}]
]);
Soll ich meine DataTable in JavaScript oder in der Objektliteral-Notation erstellen?

Sie können ein DataTable erstellen, indem Sie entweder den Konstruktor ohne Parameter aufrufen und dann Werte hinzufügen, indem Sie die unten aufgeführten Methoden addColumn()/addRows() aufrufen oder ein ausgefülltes JavaScript-Literalobjekt übergeben, um es zu initialisieren. Beide Methoden werden im Folgenden beschrieben. Welche Methode sollten Sie verwenden?

  • Code zum Erstellen und Ausfüllen einer Tabelle in JavaScript durch Aufrufen von addColumn(), addRow() und addRows() ist sehr gut lesbar. Diese Methode ist nützlich, wenn Sie Code von Hand eingeben. Dies ist langsamer als die Verwendung der Objektliteral-Notation (siehe unten), aber in kleineren Tabellen (z. B. 1.000 Zellen) werden Sie wahrscheinlich keinen großen Unterschied bemerken.
  • Die direkte Deklaration des DataTable-Objekts mit der Objektliteral-Notation ist in großen Tabellen erheblich schneller. Die richtige Syntax kann jedoch eine schwierige Syntax sein. Verwenden Sie diese Methode, wenn Sie die Objektliteralsyntax im Code generieren können, um die Wahrscheinlichkeit von Fehlern zu verringern.

 

Methoden

Methode Rückgabewert Beschreibung

addColumn(type, opt_label, opt_id)

ODER

addColumn(description_object)

Zahl

Fügt der Datentabelle eine neue Spalte hinzu und gibt den Index der neuen Spalte zurück. Allen Zellen der neuen Spalte wird ein null-Wert zugewiesen. Diese Methode verfügt über zwei Signaturen:

Die erste Signatur hat die folgenden Parameter:

  • type: Ein String mit dem Datentyp der Spaltenwerte. Folgende Typen sind möglich: 'string', 'number', 'boolean', 'date', 'datetime', und 'timeofday'..
  • opt_label: [optional] Ein String mit dem Label der Spalte. Die Spaltenbeschriftung wird normalerweise im Rahmen der Visualisierung angezeigt, z. B. als Spaltenüberschrift in einer Tabelle oder als Legendenlabel in einem Kreisdiagramm. Wenn kein Wert angegeben ist, wird ein leerer String zugewiesen.
  • opt_id: [optional] Ein String mit einer eindeutigen Kennzeichnung für die Spalte. Wenn kein Wert angegeben ist, wird ein leerer String zugewiesen.

Die zweite Signatur hat einen einzelnen Objektparameter mit den folgenden Mitgliedern:

  • type: Ein String, der den Spaltendatentyp beschreibt. Dieselben Werte wie bei type oben.
  • label: [Optional, String] Ein Label für die Spalte.
  • id: [Optional, String] Eine ID für die Spalte.
  • role: [Optional, String] Eine Rolle für die Spalte.
  • pattern: [Optional, String] Ein String im Zahlen- oder Datumsformat, der angibt, wie der Spaltenwert angezeigt wird.

Siehe auch: getColumnId, getColumnLabel, getColumnType, insertColumn, getColumnRole

addRow(opt_cellArray) Zahl

Fügt der Datentabelle eine neue Zeile hinzu und gibt den Index der neuen Zeile zurück.

  • opt_cellArray [optional]: Ein Zeilenobjekt in JavaScript-Notation, das die Daten für die neue Zeile angibt. Wenn dieser Parameter nicht enthalten ist, fügt diese Methode einfach eine neue, leere Zeile am Ende der Tabelle hinzu. Dieser Parameter ist ein Array von Zellenwerten: Wenn Sie nur einen Wert für eine Zelle angeben möchten, geben Sie nur den Zellenwert an (z. B. „55“ oder „hello“). Wenn Sie einen formatierten Wert und/oder Eigenschaften für die Zelle festlegen möchten, verwenden Sie ein Zellobjekt (z. B. {v:55, f:'fünfundfünfzig'}). Sie können einfache Werte und Zellobjekte in einem Methodenaufruf mischen.) Verwenden Sie null oder einen leeren Arrayeintrag für eine leere Zelle.

Beispiele:

data.addRow();  // Add an empty row
data.addRow(['Hermione', new Date(1999,0,1)]); // Add a row with a string and a date value.

// Add a row with two cells, the second with a formatted value.
data.addRow(['Hermione', {v: new Date(1999,0,1),
                          f: 'January First, Nineteen ninety-nine'}
]);

data.addRow(['Col1Val', null, 'Col3Val']); // Second column is undefined.
data.addRow(['Col1Val', , 'Col3Val']);     // Same as previous.
addRows(numOrArray) Zahl

Fügt neue Zeilen zur Datentabelle hinzu und gibt den Index der zuletzt hinzugefügten Zeile zurück. Sie können diese Methode aufrufen, um neue leere Zeilen zu erstellen oder mit Daten, die zum Füllen der Zeilen verwendet werden, wie unten beschrieben.

  • numOrArray – entweder eine Zahl oder ein Array:
    • Zahl: Diese Zahl gibt an, wie viele neue, nicht ausgefüllte Zeilen hinzugefügt werden sollen.
    • Array: Ein Array von row-Objekten, das zum Füllen neuer Zeilen verwendet wird. Jede Zeile ist ein Objekt, wie unter addRow() beschrieben. Verwenden Sie null oder einen leeren Arrayeintrag für eine leere Zelle.

Example:

data.addRows([
  ['Ivan', new Date(1977,2,28)],
  ['Igor', new Date(1962,7,5)],
  ['Felix', new Date(1983,11,17)],
  ['Bob', null] // No date set for Bob.
]);

Siehe auch: insertRows

clone() DataTable Gibt einen Klon der Datentabelle zurück. Das Ergebnis ist eine detaillierte Kopie der Datentabelle, mit Ausnahme der Zelleneigenschaften, Zeileneigenschaften, Tabelleneigenschaften und Spalteneigenschaften, bei denen es sich um oberflächliche Kopien handelt. Das bedeutet, dass nicht-primitive Eigenschaften durch Verweis kopiert werden, primitive Eigenschaften jedoch nach Wert.
getColumnId(columnIndex) String Gibt die Kennzeichnung einer bestimmten Spalte zurück, die durch den Spaltenindex in der zugrunde liegenden Tabelle angegeben wird.
Bei Datentabellen, die durch Abfragen abgerufen werden, wird die Spaltenkennung durch die Datenquelle festgelegt und kann bei Verwendung der Abfragesprache zum Verweisen auf Spalten verwendet werden.
Siehe auch:Query.setQuery
getColumnIndex(columnIdentifier) String, Zahl Gibt den Index einer bestimmten Spalte zurück, der durch den Spaltenindex, die ID oder das Label angegeben wird, sofern er in dieser Tabelle vorhanden ist. Andernfalls wird -1 zurückgegeben. Wenn columnIdentifier ein String ist, wird die Spalte zuerst nach ihrer ID und dann nach ihrem Label gesucht.
Siehe auch: getColumnId, getColumnLabel
getColumnLabel(columnIndex) String Gibt das Label einer bestimmten Spalte zurück, das durch den Spaltenindex in der zugrunde liegenden Tabelle angegeben wird.
Die Spaltenbeschriftung wird normalerweise als Teil der Visualisierung angezeigt. Das Spaltenlabel kann beispielsweise als Spaltenüberschrift in einer Tabelle oder als Legendenlabel in einem Kreisdiagramm angezeigt werden.
Bei Datentabellen, die durch Abfragen abgerufen werden, wird die Spaltenbeschriftung durch die Datenquelle oder durch die label-Klausel der Abfragesprache festgelegt.
Siehe auch:setColumnLabel
getColumnPattern(columnIndex) String

Gibt das Formatierungsmuster zurück, das zur Formatierung der Werte der angegebenen Spalte verwendet wird.

  • columnIndex muss eine Zahl größer oder gleich null und kleiner als die Anzahl der Spalten sein, die von der Methode getNumberOfColumns() zurückgegeben wird.

Bei Datentabellen, die durch Abfragen abgerufen werden, wird das Spaltenmuster von der Datenquelle oder der format-Klausel der Abfragesprache festgelegt. Ein Beispiel für ein Muster ist '#,##0.00'. Weitere Informationen zu Mustern finden Sie in der Referenz zur Abfragesprache.

getColumnProperties(columnIndex) Objekt

Gibt eine Zuordnung aller Eigenschaften für die angegebene Spalte zurück. Beachten Sie, dass das Properties-Objekt über einen Verweis zurückgegeben wird. Wenn Sie also Werte im abgerufenen Objekt ändern, werden sie auch in DataTable geändert.

  • columnIndex ist der numerische Index der Spalte, für die Eigenschaften abgerufen werden sollen.
getColumnProperty(columnIndex, name) Auto

Gibt den Wert eines benannten Attributs oder null zurück, wenn kein solches Attribut für die angegebene Spalte festgelegt ist. Der Rückgabetyp variiert je nach Property.

  • columnIndex muss eine Zahl größer oder gleich null und kleiner als die Anzahl der Spalten sein, die von der Methode getNumberOfColumns() zurückgegeben wird.
  • name ist der Attributname als String.

Weitere Informationen: setColumnProperty setColumnProperties

getColumnRange(columnIndex) Objekt

Gibt die Minimal- und Maximalwerte von Werten in einer bestimmten Spalte zurück. Das zurückgegebene Objekt hat die Attribute min und max. Wenn der Bereich keine Werte hat, enthalten min und max den Wert null.

columnIndex muss eine Zahl größer oder gleich null und kleiner als die Anzahl der Spalten sein, die von der Methode getNumberOfColumns() zurückgegeben wird.

getColumnRole(columnIndex) String Gibt die role der angegebenen Spalte zurück.
getColumnType(columnIndex) String

Gibt den Typ einer bestimmten Spalte zurück, der durch den Spaltenindex angegeben wird.

  • columnIndex muss eine Zahl größer oder gleich null und kleiner als die Anzahl der Spalten sein, die von der Methode getNumberOfColumns() zurückgegeben wird.

Es kann einer der folgenden Spaltentypen zurückgegeben werden: 'string', 'number', 'boolean', 'date', 'datetime', oder 'timeofday'.

getDistinctValues(columnIndex) Array von Objekten

Gibt die eindeutigen Werte in einer bestimmten Spalte in aufsteigender Reihenfolge zurück.

  • columnIndex muss eine Zahl größer oder gleich null und kleiner als die Anzahl der Spalten sein, die von der Methode getNumberOfColumns() zurückgegeben wird.

Der Typ der zurückgegebenen Objekte entspricht dem Typ, der von der Methode getValue zurückgegeben wird.

getFilteredRows(filters) Array von Objekten

Gibt die Zeilenindexe für Zeilen zurück, die mit allen angegebenen Filtern übereinstimmen. Die Indexe werden in aufsteigender Reihenfolge zurückgegeben. Die Ausgabe dieser Methode kann als Eingabe für DataView.setRows() verwendet werden, um den angezeigten Zeilensatz in einer Visualisierung zu ändern.

filters: ein Array von Objekten, die einen akzeptablen Zellenwert beschreiben. Diese Methode gibt einen Zeilenindex zurück, wenn er mit allen angegebenen Filtern übereinstimmt. Jeder Filter ist ein Objekt mit einer numerischen column-Eigenschaft, die den Index der Spalte in der auszuwertenden Zeile sowie einen der folgenden Werte angibt:

  • Eine value-Eigenschaft mit einem Wert, der genau mit der Zelle in der angegebenen Spalte übereinstimmen muss. Der Wert muss vom selben Typ wie die Spalte sein oder
  • Eines oder beide der folgenden Attribute, die vom gleichen Typ wie die zu filternde Spalte sind:
    • minValue: ein Minimalwert für die Zelle. Der Zellenwert in der angegebenen Spalte muss größer oder gleich diesem Wert sein.
    • maxValue: ein Höchstwert für die Zelle. Der Zellenwert in der angegebenen Spalte muss kleiner oder gleich diesem Wert sein.
    Ein Nullwert oder ein undefinierter Wert für minValue (oder maxValue) bedeutet, dass die untere (oder obere) Grenze des Bereichs nicht erzwungen wird.

Ein weiteres optionales Attribut, test, gibt eine Funktion an, die mit der Wert- oder Bereichsfilterung kombiniert werden soll. Die Funktion wird mit dem Zellenwert, den Zeilen- und Spaltenindexen sowie der Datentabelle aufgerufen. Es sollte „false“ zurückgegeben werden, wenn die Zeile aus dem Ergebnis ausgeschlossen werden soll.

Beispiel: getFilteredRows([{column: 3, value: 42}, {column: 2, minValue: 'bar', maxValue: 'foo'}, {column: 1, test: (value, rowId, columnId, datatable) => { return value == "baz"; }}]) gibt ein Array zurück, das in aufsteigender Reihenfolge die Indexe aller Zeilen enthält, bei denen die vierte Spalte (Spaltenindex 3) genau 42 und die dritte Spalte (Spaltenindex 2) zwischen „bar“ und „foo“ (einschließlich) liegt.

getFormattedValue(rowIndex, columnIndex) String

Gibt den formatierten Wert der Zelle an den angegebenen Zeilen- und Spaltenindexen zurück.

  • rowIndex muss eine Zahl größer oder gleich null und kleiner als die Anzahl der Zeilen sein, die von der Methode getNumberOfRows() zurückgegeben werden.
  • ColumnIndex muss eine Zahl größer oder gleich null und kleiner als die Anzahl der Spalten sein, die von der Methode getNumberOfColumns() zurückgegeben wird.

Weitere Informationen zum Formatieren von Spaltenwerten finden Sie in der Referenz zur Abfragesprache.

Weitere Informationen:setFormattedValue

getNumberOfColumns() Zahl Gibt die Anzahl der Spalten in der Tabelle zurück.
getNumberOfRows() Zahl Gibt die Anzahl der Zeilen in der Tabelle zurück.
getProperties(rowIndex, columnIndex) Objekt

Gibt eine Zuordnung aller Eigenschaften für die angegebene Zelle zurück. Beachten Sie, dass das Properties-Objekt über einen Verweis zurückgegeben wird. Wenn Sie also Werte im abgerufenen Objekt ändern, werden sie auch in DataTable geändert.

  • rowIndex ist der Zeilenindex der Zelle.
  • columnIndex ist der Spaltenindex der Zelle.
getProperty(rowIndex, columnIndex, name) Auto

Gibt den Wert einer benannten Eigenschaft oder null zurück, wenn keine solche Eigenschaft für die angegebene Zelle festgelegt ist. Der Rückgabetyp variiert je nach Property.

  • rowIndex muss eine Zahl größer oder gleich null und kleiner als die Anzahl der Zeilen sein, die von der Methode getNumberOfRows() zurückgegeben werden.
  • columnIndex muss eine Zahl größer oder gleich null und kleiner als die Anzahl der Spalten sein, die von der Methode getNumberOfColumns() zurückgegeben wird.
  • name ist ein String mit dem Attributnamen.

Weitere Informationen: setCell setProperties setProperty

getRowProperties(rowIndex) Objekt

Gibt eine Zuordnung aller Eigenschaften für die angegebene Zeile zurück. Beachten Sie, dass das Properties-Objekt über einen Verweis zurückgegeben wird. Wenn Sie also Werte im abgerufenen Objekt ändern, werden sie auch in DataTable geändert.

  • rowIndex ist der Index der Zeile, für die Eigenschaften abgerufen werden sollen.
getRowProperty(rowIndex, name) Auto

Gibt den Wert eines benannten Attributs oder null zurück, wenn kein solches Attribut für die angegebene Zeile festgelegt ist. Der Rückgabetyp variiert je nach Property.

  • rowIndex muss eine Zahl größer oder gleich null und kleiner als die Anzahl der Zeilen sein, die von der Methode getNumberOfRows() zurückgegeben werden.
  • name ist ein String mit dem Attributnamen.

Siehe auch: setRowProperty setRowProperties

getSortedRows(sortColumns) Array von Zahlen

Gibt eine sortierte Version der Tabelle zurück, ohne die Reihenfolge der zugrunde liegenden Daten zu ändern. Wenn Sie die zugrunde liegenden Daten dauerhaft sortieren möchten, rufen Sie sort() auf. Je nach Typ, den Sie an den Parameter sortColumns übergeben, gibt es mehrere Möglichkeiten, die Sortierung anzugeben:

  • Eine einzelne Zahl gibt den Index der Spalte an, nach der sortiert werden soll. Die Sortierung erfolgt in aufsteigender Reihenfolge. Beispiel: sortColumns(3) sortiert nach der vierten Spalte in aufsteigender Reihenfolge.
  • Ein einzelnes Objekt, das die Nummer des Spaltenindex, nach dem sortiert werden soll, und das optionale boolesche Attribut desc enthält. Wenn desc auf „true“ gesetzt ist, wird die jeweilige Spalte in absteigender Reihenfolge sortiert. Andernfalls erfolgt die Sortierung in aufsteigender Reihenfolge. Beispiele: sortColumns({column: 3}) sortiert nach der 4. Spalte in aufsteigender Reihenfolge; sortColumns({column: 3, desc: true}) sortiert nach der 4. Spalte in absteigender Reihenfolge.
  • Ein Zahlenarray der Spaltenindexe, nach denen sortiert werden soll. Die erste Zahl ist die primäre Spalte, nach der sortiert werden soll, die zweite die sekundäre und so weiter. Das bedeutet, dass, wenn zwei Werte in der ersten Spalte gleich sind, die Werte in der nächsten Spalte verglichen werden usw. Beispiel: sortColumns([3, 1, 6]) sortiert zuerst nach der 4. Spalte (in aufsteigender Reihenfolge), dann nach der zweiten Spalte (in aufsteigender Reihenfolge) und dann nach der 7. Spalte (in aufsteigender Reihenfolge).
  • Ein Array von Objekten, jedes mit der Nummer des Spaltenindex, nach dem sortiert werden soll, und dem optionalen booleschen Attribut desc. Wenn desc auf „true“ gesetzt ist, wird die jeweilige Spalte in absteigender Reihenfolge sortiert (Standardeinstellung ist aufsteigend). Das erste Objekt ist die primäre Spalte, nach der sortiert werden soll, die zweite die sekundäre Spalte usw. Das bedeutet, wenn zwei Werte in der ersten Spalte gleich sind, werden die Werte in der nächsten Spalte verglichen und so weiter. Beispiel: sortColumn([{column: 3}, {column: 1, desc: true}, {column: 6, desc: true}]) sortiert zuerst nach der 4. Spalte (in aufsteigender Reihenfolge), dann nach Spalte 2 in absteigender Reihenfolge und danach nach Spalte 7 in absteigender Reihenfolge.

Der zurückgegebene Wert ist ein Array aus Zahlen. Jede Zahl ist ein Index einer DataTable-Zeile. Das Iterieren der DataTable-Zeilen in der Reihenfolge des zurückgegebenen Arrays führt zu Zeilen, die nach dem angegebenen sortColumns-Wert sortiert sind. Die Ausgabe kann als Eingabe für DataView.setRows() verwendet werden, um den angezeigten Zeilensatz in einer Visualisierung schnell zu ändern.

Beachten Sie, dass das Sortieren garantiert stabil ist: Wenn Sie also nach den gleichen Werten zweier Zeilen sortieren, gibt die gleiche Sortierung die Zeilen jedes Mal in derselben Reihenfolge zurück.
Siehe auch: Sortieren

Beispiel: Wenn Sie für Zeilen iterieren möchten, die nach der dritten Spalte sortiert sind, verwenden Sie:

var rowInds = data.getSortedRows([{column: 2}]);
for (var i = 0; i < rowInds.length; i++) {
  var v = data.getValue(rowInds[i], 2);
}
getTableProperties Objekt Gibt eine Zuordnung aller Eigenschaften der Tabelle zurück.
getTableProperty(name) Auto

Gibt den Wert eines benannten Attributs oder null zurück, wenn kein solches Attribut für die Tabelle festgelegt ist. Der Rückgabetyp variiert je nach Property.

  • name ist ein String mit dem Attributnamen.

Weitere Informationen: setTableProperties setTableProperty

getValue(rowIndex, columnIndex) Objekt

Gibt den Wert der Zelle an den angegebenen Zeilen- und Spaltenindexen zurück.

  • rowIndex muss eine Zahl größer oder gleich null und kleiner als die Anzahl der Zeilen sein, die von der Methode getNumberOfRows() zurückgegeben werden.
  • columnIndex muss eine Zahl größer oder gleich null und kleiner als die Anzahl der Spalten sein, die von der Methode getNumberOfColumns() zurückgegeben wird.

Der Typ des zurückgegebenen Werts hängt vom Spaltentyp ab (siehe getColumnType):

  • Wenn der Spaltentyp „String“ ist, ist der Wert ein String.
  • Wenn der Spaltentyp „Zahl“ ist, ist der Wert eine Zahl.
  • Wenn der Spaltentyp „boolesch“ ist, ist der Wert ein boolescher Wert.
  • Wenn der Spaltentyp „date“ oder „datetime“ ist, ist der Wert ein Datumsobjekt.
  • Wenn der Spaltentyp "timeofday" ist, ist der Wert ein Array aus vier Zahlen: [Stunde, Minute, Sekunde, Millisekunden].
  • Wenn der Zellenwert ein Nullwert ist, wird null zurückgegeben.
insertColumn(columnIndex, type [,label [,id]]) Ohne

Fügt eine neue Spalte am angegebenen Index in die Datentabelle ein. Alle vorhandenen Spalten am oder nach dem angegebenen Index werden in einen höheren Index verschoben.

  • columnIndex ist eine Zahl mit dem erforderlichen Index der neuen Spalte.
  • type sollte ein String mit dem Datentyp der Spaltenwerte sein. Folgende Typen sind möglich: 'string', 'number', 'boolean', 'date', 'datetime', oder 'timeofday'..
  • label sollte ein String mit dem Label der Spalte sein. Die Spaltenbeschriftung wird normalerweise im Rahmen der Visualisierung angezeigt, z. B. als Spaltenüberschrift in einer Tabelle oder als Legendenlabel in einem Kreisdiagramm. Wenn kein Wert angegeben ist, wird ein leerer String zugewiesen.
  • id sollte ein String mit einer eindeutigen Kennzeichnung für die Spalte sein. Wenn kein Wert angegeben ist, wird ein leerer String zugewiesen.

Siehe auch: addColumn

insertRows(rowIndex, numberOrArray) Ohne

Fügt die angegebene Anzahl von Zeilen am angegebenen Zeilenindex ein.

  • rowIndex ist die Indexnummer, in die die neue(n) Zeile(n) eingefügt werden soll(en). Zeilen werden ab der angegebenen Indexnummer hinzugefügt.
  • numberOrArray ist entweder eine Anzahl neuer, leerer Zeilen, die hinzugefügt werden sollen, oder ein Array mit einer oder mehreren ausgefüllten Zeilen, die dem Index hinzugefügt werden sollen. Die Syntax zum Hinzufügen eines Arrays von Zeilenobjekten finden Sie unter addRows().

Siehe auch: addRows

removeColumn(columnIndex) Ohne

Entfernt die Spalte am angegebenen Index.

  • columnIndex muss eine Zahl mit einem gültigen Spaltenindex sein.

Siehe auch: removeColumns

removeColumns(columnIndex, numberOfColumns) Ohne

Entfernt die angegebene Anzahl von Spalten beginnend bei der Spalte am angegebenen Index.

  • numberOfColumns ist die Anzahl der zu entfernenden Spalten.
  • columnIndex muss eine Zahl mit einem gültigen Spaltenindex sein.

Siehe auch: removeColumn

removeRow(rowIndex) Ohne

Entfernt die Zeile im angegebenen Index.

  • rowIndex muss eine Zahl mit einem gültigen Zeilenindex sein.

Siehe auch: removeRows

removeRows(rowIndex, numberOfRows) Ohne

Entfernt die angegebene Anzahl von Zeilen beginnend bei der Zeile im angegebenen Index.

  • numberOfRows ist die Anzahl der zu entfernenden Zeilen.
  • rowIndex muss eine Zahl mit einem gültigen Zeilenindex sein.

Siehe auch: removeRow

setCell(rowIndex, columnIndex [, value [, formattedValue [, properties]]]) Ohne

Legt den Wert, den formatierten Wert und/oder die Eigenschaften einer Zelle fest.

  • rowIndex muss eine Zahl größer oder gleich null und kleiner als die Anzahl der Zeilen sein, die von der Methode getNumberOfRows() zurückgegeben werden.
  • columnIndex muss eine Zahl größer oder gleich null und kleiner als die Anzahl der Spalten sein, die von der Methode getNumberOfColumns() zurückgegeben wird.
  • value [optional] ist der Wert, der der angegebenen Zelle zugewiesen ist. Damit dieser Wert nicht überschrieben wird, setzen Sie diesen Parameter auf undefined. Wenn Sie ihn löschen möchten, setzen Sie ihn auf null. Der Typ des Werts hängt vom Spaltentyp ab (siehe getColumnType()):
    • Wenn der Spaltentyp „String“ ist, sollte der Wert ein String sein.
    • Wenn der Spaltentyp „Zahl“ ist, sollte der Wert eine Zahl sein.
    • Wenn der Spaltentyp „boolesch“ ist, sollte der Wert ein boolescher Wert sein.
    • Wenn der Spaltentyp „date“ oder „datetime“ ist, sollte der Wert ein Datumsobjekt sein.
    • Wenn der Spaltentyp "timeofday" ist, sollte der Wert ein Array aus vier Zahlen sein: [Stunde, Minute, Sekunde, Millisekunden].
  • formattedValue [optional] ist ein String mit dem Wert, der als String formatiert ist. Damit dieser Wert nicht überschrieben wird, setzen Sie diesen Parameter auf undefined. Wenn Sie diesen Wert löschen und die API die Standardformatierung bei Bedarf auf value anwenden soll, legen Sie ihn auf null fest. Wenn Sie einen leeren formatierten Wert explizit festlegen möchten, setzen Sie ihn auf einen leeren String. Der formatierte Wert wird in der Regel von Visualisierungen zur Anzeige von Wertlabels verwendet. Der formatierte Wert kann beispielsweise als Beschriftungstext in einem Kreisdiagramm angezeigt werden.
  • properties [optional] ist eine Object (Zuordnung von Name/Wert) mit zusätzlichen Eigenschaften für diese Zelle. Damit dieser Wert nicht überschrieben wird, setzen Sie diesen Parameter auf undefined. Wenn Sie ihn löschen möchten, setzen Sie ihn auf null. Einige Visualisierungen unterstützen Zeilen-, Spalten- oder Zelleneigenschaften, um ihre Anzeige oder ihr Verhalten zu ändern. Informationen zu den unterstützten Eigenschaften finden Sie in der Visualisierungsdokumentation.

Weitere Informationen:setValue(), setFormattedValue(), setProperty(), setProperties().

setColumnLabel(columnIndex, label) Ohne

Legt das Label einer Spalte fest.

  • columnIndex muss eine Zahl größer oder gleich null und kleiner als die Anzahl der Spalten sein, die von der Methode getNumberOfColumns() zurückgegeben wird.
  • label ist ein String mit dem Label, das der Spalte zugewiesen werden soll. Die Spaltenbeschriftung wird normalerweise als Teil der Visualisierung angezeigt. Das Spaltenlabel kann beispielsweise als Spaltenüberschrift in einer Tabelle oder als Legendenlabel in einem Kreisdiagramm angezeigt werden.

Siehe auch: getColumnLabel

setColumnProperty(columnIndex, name, value) Ohne

Legt ein Spaltenattribut fest. Einige Visualisierungen unterstützen Zeilen-, Spalten- oder Zelleneigenschaften, um ihre Anzeige oder ihr Verhalten zu ändern. Informationen zu den unterstützten Eigenschaften finden Sie in der Visualisierungsdokumentation.

  • columnIndex muss eine Zahl größer oder gleich null und kleiner als die Anzahl der Spalten sein, die von der Methode getNumberOfColumns() zurückgegeben wird.
  • name ist ein String mit dem Attributnamen.
  • value ist ein Wert eines beliebigen Typs, der dem angegebenen benannten Attribut der angegebenen Spalte zugewiesen werden soll.

Siehe auch:setColumnProperties getColumnProperty

setColumnProperties(columnIndex, properties) Ohne

Legt mehrere Spaltenattribute fest. Einige Visualisierungen unterstützen Zeilen-, Spalten- oder Zelleneigenschaften, um ihre Anzeige oder ihr Verhalten zu ändern. Informationen zu den unterstützten Eigenschaften finden Sie in der Visualisierungsdokumentation.

  • columnIndex muss eine Zahl größer oder gleich null und kleiner als die Anzahl der Spalten sein, die von der Methode getNumberOfColumns() zurückgegeben wird.
  • properties ist eine Object (Name/Wert-Zuordnung) mit zusätzlichen Attributen für diese Spalte. Wenn null angegeben ist, werden alle zusätzlichen Attribute der Spalte entfernt.

Siehe auch: setColumnProperty getColumnProperty

setFormattedValue(rowIndex, columnIndex, formattedValue) Ohne

Legt den formatierten Wert einer Zelle fest.

  • rowIndex muss eine Zahl größer oder gleich null und kleiner als die Anzahl der Zeilen sein, die von der Methode getNumberOfRows() zurückgegeben werden.
  • columnIndex muss eine Zahl größer oder gleich null und kleiner als die Anzahl der Spalten sein, die von der Methode getNumberOfColumns() zurückgegeben wird.
  • formattedValue ist ein String mit dem Wert, der angezeigt werden soll. Um diesen Wert zu löschen und die API bei Bedarf Standardformatierung auf den Zellenwert anzuwenden, legen Sie formattedValue null fest. Wenn Sie einen leeren formatierten Wert explizit festlegen möchten, setzen Sie ihn auf einen leeren String.

Siehe auch: getFormattedValue

setProperty(rowIndex, columnIndex, name, value) Ohne

Legt eine Zelleneigenschaft fest. Einige Visualisierungen unterstützen Zeilen-, Spalten- oder Zelleneigenschaften, um ihre Anzeige oder ihr Verhalten zu ändern. Informationen zu den unterstützten Eigenschaften finden Sie in der Visualisierungsdokumentation.

  • rowIndex muss eine Zahl größer oder gleich null und kleiner als die Anzahl der Zeilen sein, die von der Methode getNumberOfRows() zurückgegeben werden.
  • columnIndex muss eine Zahl größer oder gleich null und kleiner als die Anzahl der Spalten sein, die von der Methode getNumberOfColumns() zurückgegeben wird.
  • name ist ein String mit dem Attributnamen.
  • value ist ein Wert eines beliebigen Typs, der der angegebenen benannten Eigenschaft der angegebenen Zelle zugewiesen werden soll.

Siehe auch: setCell setProperties getProperty

setProperties(rowIndex, columnIndex, properties) Ohne

Legt mehrere Zelleneigenschaften fest. Einige Visualisierungen unterstützen Zeilen-, Spalten- oder Zelleneigenschaften, um ihre Anzeige oder ihr Verhalten zu ändern. Informationen zu den unterstützten Eigenschaften finden Sie in der Visualisierungsdokumentation.

  • rowIndex muss eine Zahl größer oder gleich null und kleiner als die Anzahl der Zeilen sein, die von der Methode getNumberOfRows() zurückgegeben werden.
  • columnIndex muss eine Zahl größer oder gleich null und kleiner als die Anzahl der Spalten sein, die von der Methode getNumberOfColumns() zurückgegeben wird.
  • properties ist eine Object (Namens-/Wertzuordnung) mit zusätzlichen Eigenschaften für diese Zelle. Wenn null angegeben ist, werden alle zusätzlichen Eigenschaften der Zelle entfernt.

Siehe auch: setCell setProperty getProperty

setRowProperty(rowIndex, name, value) Ohne

Legt ein Zeilenattribut fest. Einige Visualisierungen unterstützen Zeilen-, Spalten- oder Zelleneigenschaften, um ihre Anzeige oder ihr Verhalten zu ändern. Informationen zu den unterstützten Eigenschaften finden Sie in der Visualisierungsdokumentation.

  • rowIndex muss eine Zahl größer oder gleich null und kleiner als die Anzahl der Zeilen sein, die von der Methode getNumberOfRows() zurückgegeben werden.
  • name ist ein String mit dem Attributnamen.
  • value ist ein Wert eines beliebigen Typs, der dem angegebenen benannten Attribut der angegebenen Zeile zugewiesen werden soll.

Siehe auch: setRowProperties getRowProperty

setRowProperties(rowIndex, properties) Ohne

Legt mehrere Zeileneigenschaften fest. Einige Visualisierungen unterstützen Zeilen-, Spalten- oder Zelleneigenschaften, um ihre Anzeige oder ihr Verhalten zu ändern. Informationen zu den unterstützten Eigenschaften finden Sie in der Visualisierungsdokumentation.

  • rowIndex muss eine Zahl größer oder gleich null und kleiner als die Anzahl der Zeilen sein, die von der Methode getNumberOfRows() zurückgegeben werden.
  • properties ist eine Object (Name/Wert-Zuordnung) mit zusätzlichen Attributen für diese Zeile. Wenn null angegeben ist, werden alle zusätzlichen Eigenschaften der Zeile entfernt.

Siehe auch: setRowProperty getRowProperty

setTableProperty(name, value) Ohne

Legt ein einzelnes Tabellenattribut fest. Einige Visualisierungen unterstützen Tabellen-, Zeilen-, Spalten- oder Zelleneigenschaften, um ihre Anzeige oder ihr Verhalten zu ändern. Informationen zu den unterstützten Eigenschaften finden Sie in der Visualisierungsdokumentation.

  • name ist ein String mit dem Attributnamen.
  • value ist ein Wert eines beliebigen Typs, der dem angegebenen benannten Attribut der Tabelle zugewiesen werden soll.

Weitere Informationen: setTableProperties getTableProperty

setTableProperties(properties) Ohne

Legt mehrere Tabelleneigenschaften fest. Einige Visualisierungen unterstützen Tabellen-, Zeilen-, Spalten- oder Zelleneigenschaften, um ihre Anzeige oder ihr Verhalten zu ändern. Informationen zu den unterstützten Eigenschaften finden Sie in der Visualisierungsdokumentation.

  • properties ist eine Object (Name/Wert-Zuordnung) mit zusätzlichen Attributen für die Tabelle. Wenn null angegeben ist, werden alle zusätzlichen Attribute der Tabelle entfernt.

Siehe auch: setTableProperty getTableProperty

setValue(rowIndex, columnIndex, value) Ohne

Legt den Wert einer Zelle fest. Mit dieser Methode werden nicht nur vorhandene Zellenwerte überschrieben, sondern auch formatierte Werte und Eigenschaften der Zelle gelöscht.

  • rowIndex muss eine Zahl größer oder gleich null und kleiner als die Anzahl der Zeilen sein, die von der Methode getNumberOfRows() zurückgegeben werden.
  • columnIndex muss eine Zahl größer oder gleich null und kleiner als die Anzahl der Spalten sein, die von der Methode getNumberOfColumns() zurückgegeben wird. Bei dieser Methode können Sie keinen formatierten Wert für die Zelle festlegen. Rufen Sie dazu setFormattedValue() auf.
  • value ist der Wert, der der angegebenen Zelle zugewiesen ist. Der Typ des zurückgegebenen Werts hängt vom Spaltentyp ab (siehe getColumnType):
    • Wenn der Spaltentyp „String“ ist, sollte der Wert ein String sein.
    • Wenn der Spaltentyp „Zahl“ ist, sollte der Wert eine Zahl sein.
    • Wenn der Spaltentyp „boolesch“ ist, sollte der Wert ein boolescher Wert sein.
    • Wenn der Spaltentyp „date“ oder „datetime“ ist, sollte der Wert ein Datumsobjekt sein.
    • Wenn der Spaltentyp "timeofday" ist, sollte der Wert ein Array aus vier Zahlen sein: [Stunde, Minute, Sekunde, Millisekunden].
    • Für jeden Spaltentyp kann der Wert auf null festgelegt werden.

Siehe auch: setCell, setFormattedValue, setProperty, setProperties

sort(sortColumns) Ohne Sortiert die Zeilen entsprechend den angegebenen Sortierspalten. Der DataTable wird durch diese Methode geändert. Eine Beschreibung der Details zum Sortieren finden Sie unter getSortedRows(). Bei dieser Methode werden die sortierten Daten nicht zurückgegeben.
Siehe auch: getSortedRows
Beispiel: Um nach der dritten Spalte und dann nach der zweiten Spalte zu sortieren, verwenden Sie: data.sort([{column: 2}, {column: 1}]);
toJSON() String Gibt eine JSON-Darstellung von DataTable zurück, die an den Konstruktor DataTable übergeben werden kann. Beispiel:
{"cols":[{"id":"Col1","label":"","type":"date"}],
 "rows":[
   {"c":[{"v":"a"},{"v":"Date(2010,10,6)"}]},
   {"c":[{"v":"b"},{"v":"Date(2010,10,7)"}]}
 ]
}

Format des JavaScript-Literalparameters data des Konstruktors

Zum Initialisieren eines DataTable kannst du ein JavaScript-Stringliteralobjekt an den data-Parameter übergeben. Dieses Objekt nennen wir data. Sie können dieses Objekt gemäß der folgenden Beschreibung manuell codieren oder eine Python-Hilfsbibliothek verwenden, wenn Sie mit Python vertraut sind und diese auf Ihrer Website verwenden kann. Wenn Sie das Objekt jedoch manuell erstellen möchten, finden Sie in diesem Abschnitt eine Beschreibung der Syntax.

Sehen wir uns zuerst ein Beispiel für ein einfaches JavaScript-Objekt an, das eine Tabelle mit drei Zeilen und drei Spalten (String, Zahl und Datum) beschreibt:

{
  cols: [{id: 'A', label: 'NEW A', type: 'string'},
         {id: 'B', label: 'B-label', type: 'number'},
         {id: 'C', label: 'C-label', type: 'date'}
  ],
  rows: [{c:[{v: 'a'},
             {v: 1.0, f: 'One'},
             {v: new Date(2008, 1, 28, 0, 31, 26), f: '2/28/08 12:31 AM'}
        ]},
         {c:[{v: 'b'},
             {v: 2.0, f: 'Two'},
             {v: new Date(2008, 2, 30, 0, 31, 26), f: '3/30/08 12:31 AM'}
        ]},
         {c:[{v: 'c'},
             {v: 3.0, f: 'Three'},
             {v: new Date(2008, 3, 30, 0, 31, 26), f: '4/30/08 12:31 AM'}
        ]}
  ],
  p: {foo: 'hello', bar: 'world!'}
}

Lassen Sie uns nun die Syntax beschreiben:

Das data -Objekt besteht aus zwei erforderlichen übergeordneten Properties, cols und rows, sowie einer optionalen p-Eigenschaft, die eine Zuordnung beliebiger Werte ist.

Hinweis:Bei allen angezeigten Attributnamen und Stringkonstanten wird die Groß-/Kleinschreibung beachtet. Außerdem muss der Wert bei Attributen, die einen Stringwert annehmen, in Anführungszeichen gesetzt werden. Wenn Sie beispielsweise die Typeigenschaft als Zahl angeben möchten, würde der Wert so ausgedrückt: type: 'number'. Der Wert selbst würde jedoch als numerischer Wert so ausgedrückt werden: v: 42

cols-Property

cols ist ein Array von Objekten, die die ID und den Typ jeder Spalte beschreiben. Jede Eigenschaft ist ein Objekt mit den folgenden Eigenschaften (unter Berücksichtigung der Groß- und Kleinschreibung):

  • type [erforderlich] Der Datentyp der Daten in der Spalte. Unterstützt die folgenden Stringwerte (z. B. das Attribut „v:“, das weiter unten beschrieben wird):
    • "boolean" - Boolescher JavaScript-Wert ("true" oder "false"). Beispielwert: v:'true'
    • "number" - der JavaScript-Zahlenwert Beispielwerte: v:7, v:3.14, v:-55
    • "string" – JavaScript-Stringwert Beispielwert: v:'hello'
    • „date“ – JavaScript-Datumsobjekt (Monat auf Nullbasis) mit abgeschnittener Zeit Beispielwert: v:new Date(2008, 0, 15)
    • "datetime" – JavaScript-Datumsobjekt mit Uhrzeit. Beispielwert: v:new Date(2008, 0, 15, 14, 30, 45)
    • "timeofday": Array aus drei Zahlen und einer optionalen vierten, die Stunde (0 steht für Mitternacht), Minute, Sekunde und optional Millisekunde steht. Beispielwerte: v:[8, 15, 0], v: [6, 12, 1, 144]
  • id [optional] String-ID der Spalte. Darf in der Tabelle nur einmal vorkommen. Verwende einfache alphanumerische Zeichen, damit die Hostseite keine komplizierten Escape-Zeichen für den Zugriff auf die Spalte in JavaScript erfordert. Achten Sie darauf, kein JavaScript-Keyword auszuwählen. Beispiel: id:'col_1'
  • label [optional] Stringwert, der in einigen Visualisierungen für diese Spalte angezeigt wird. Beispiel: label:'Height'
  • pattern [optional] Stringmuster, das von einer Datenquelle zum Formatieren numerischer, Datums- oder Uhrzeitspaltenwerte verwendet wurde. Dies dient nur als Referenz. Sie müssen das Muster wahrscheinlich nicht lesen und es ist auch nicht erforderlich. Der Google-Visualisierungsclient verwendet diesen Wert nicht. Er liest den formatierten Wert der Zelle. Wenn DataTable als Antwort auf eine Abfrage mit einer format-Klausel aus einer Datenquelle stammt, wird wahrscheinlich das in dieser Klausel angegebene Muster in diesem Wert zurückgegeben. Die empfohlenen Musterstandards sind DecimalFormat und SimpleDateFormat auf der ICU.
  • p [Optional] Ein Objekt, das eine Zuordnung benutzerdefinierter Werte ist, die auf die Zelle angewendet wurden. Diese Werte können einen beliebigen JavaScript-Typ haben. Wenn Ihre Visualisierung Eigenschaften auf Zellenebene unterstützt, werden diese beschrieben. Andernfalls wird sie ignoriert. Beispiel: p:{style: 'border: 1px solid green;'}.

Beispiel für cols

cols: [{id: 'A', label: 'NEW A', type: 'string'},
       {id: 'B', label: 'B-label', type: 'number'},
       {id: 'C', label: 'C-label', type: 'date'}]

rows-Property

Das Attribut rows enthält ein Array von Zeilenobjekten.

Jedes Zeilenobjekt hat eine erforderliche Eigenschaft namens c. Dabei handelt es sich um ein Array von Zellen in dieser Zeile. Außerdem hat sie die optionale p-Eigenschaft, mit der eine Zuordnung beliebiger benutzerdefinierter Werte definiert wird, die der gesamten Zeile zugewiesen werden sollen. Wenn in Ihrer Visualisierung Attribute auf Zeilenebene unterstützt werden, werden diese beschrieben. Andernfalls wird sie ignoriert.

Zellobjekte

Jede Zelle in der Tabelle wird durch ein Objekt mit den folgenden Eigenschaften beschrieben:

  • v [optional]: Der Zellenwert. Der Datentyp sollte dem Datentyp der Spalte entsprechen. Wenn die Zelle null ist, sollte die Eigenschaft v null sein, obwohl sie weiterhin die Eigenschaften f und p haben kann.
  • f [optional] Eine Stringversion des v-Werts, die zur Anzeige formatiert ist. In der Regel stimmen die Werte überein, obwohl dies nicht zwingend erforderlich ist. Wenn Sie also Date(2008, 0, 1) für v angeben, sollten Sie für dieses Attribut „1. Januar 2008“ oder einen ähnlichen String angeben. Dieser Wert wird nicht mit dem Wert v verglichen. Die Visualisierung verwendet diesen Wert nicht für die Berechnung, sondern nur als Beschriftung für die Anzeige. Wenn nichts angegeben ist, wird mit dem Standardformatierer automatisch eine Stringversion von v generiert. Die f-Werte können mit Ihrem eigenen Formatierer geändert oder mit setFormattedValue() oder setCell() festgelegt oder mit getFormattedValue() abgerufen werden.
  • p [Optional] Ein Objekt, das eine Zuordnung benutzerdefinierter Werte ist, die auf die Zelle angewendet wurden. Diese Werte können einen beliebigen JavaScript-Typ haben. Wenn Ihre Visualisierung Eigenschaften auf Zellenebene unterstützt, werden diese beschrieben. Diese Attribute können mit den Methoden getProperty() und getProperties() abgerufen werden. Beispiel: p:{style: 'border: 1px solid green;'}.

Die Zellen im Zeilenarray müssen die gleiche Reihenfolge haben wie die Spaltenbeschreibungen in cols. Um eine Null-Zelle anzugeben, können Sie null angeben, eine Zelle in einem Array leer lassen oder nachgestellte Array-Mitglieder weglassen. Um also eine Zeile mit dem Nullwert für die ersten beiden Zellen anzugeben, können Sie [ , , {cell_val}] oder [null, null, {cell_val}] angeben.

Hier sehen Sie ein Beispiel für ein Tabellenobjekt mit drei Spalten, das mit drei Datenzeilen gefüllt ist:

{
  cols: [{id: 'A', label: 'NEW A', type: 'string'},
         {id: 'B', label: 'B-label', type: 'number'},
         {id: 'C', label: 'C-label', type: 'date'}
  ],
  rows: [{c:[{v: 'a'},
             {v: 1.0, f: 'One'},
             {v: new Date(2008, 1, 28, 0, 31, 26), f: '2/28/08 12:31 AM'}
        ]},
         {c:[{v: 'b'},
             {v: 2.0, f: 'Two'},
             {v: new Date(2008, 2, 30, 0, 31, 26), f: '3/30/08 12:31 AM'}
        ]},
         {c:[{v: 'c'},
             {v: 3.0, f: 'Three'},
             {v: new Date(2008, 3, 30, 0, 31, 26), f: '4/30/08 12:31 AM'}
        ]}
  ]
}

p-Eigenschaft

Das Attribut p auf Tabellenebene ist eine Zuordnung benutzerdefinierter Werte, die auf die gesamte DataTable angewendet werden. Diese Werte können einen beliebigen JavaScript-Typ haben. Wenn Ihre Visualisierung Attribute auf Datentabellenebene unterstützt, werden diese beschrieben. Andernfalls steht sie für die Anwendung zur Verfügung. Beispiel: p:{className: 'myDataTable'}.

DataView-Klasse

Eine schreibgeschützte Ansicht einer zugrunde liegenden DataTable Ein DataView ermöglicht die Auswahl nur einer Teilmenge der Spalten und/oder Zeilen. Außerdem können Spalten/Zeilen neu angeordnet und Spalten/Zeilen dupliziert werden.

Eine Ansicht ist ein Live-Fenster in der zugrunde liegenden DataTable, kein statischer Snapshot der Daten. Sie müssen jedoch trotzdem vorsichtig sein, wenn Sie die Struktur der Tabelle selbst wie hier beschrieben ändern:

  • Das Hinzufügen oder Entfernen von Spalten aus der zugrunde liegenden Tabelle wird in der Ansicht nicht berücksichtigt und kann zu unerwartetem Verhalten in der Ansicht führen. Sie müssen eine neue DataView aus der DataTable erstellen, um diese Änderungen zu übernehmen.
  • Das Hinzufügen oder Entfernen von Zeilen aus der zugrunde liegenden Tabelle ist sicher und Änderungen werden sofort an die Ansicht weitergegeben. Sie müssen jedoch nach dieser Änderung für alle Visualisierungen draw() aufrufen, damit der neue Zeilensatz gerendert wird. Wenn in der Ansicht Zeilen durch Aufrufen einer der setRows() or hideRows()-Methoden herausgefiltert wurden und Sie Zeilen in die zugrunde liegende Tabelle einfügen oder daraus entfernen, kommt es zu unerwartetem Verhalten. Sie müssen eine neue DataView erstellen, die die neue Tabelle widerspiegelt.
  • Das Ändern von Zellenwerten in vorhandenen Zellen ist sicher und Änderungen werden sofort an die DataView weitergegeben. Sie müssen jedoch nach dieser Änderung für alle Visualisierungen draw() aufrufen, damit die neuen Zellenwerte gerendert werden.

Es ist auch möglich, ein DataView aus einem anderen DataView zu erstellen. Hinweis: Wenn eine zugrunde liegende Tabelle oder Ansicht erwähnt wird, bezieht sich diese auf die Ebene unmittelbar darunter. Mit anderen Worten: Er bezieht sich auf das Datenobjekt, mit dem diese DataView erstellt wurde.

DataView unterstützt auch berechnete Spalten. Dies sind Spalten, deren Wert spontan mit einer von Ihnen bereitgestellten Funktion berechnet wird. So können Sie beispielsweise eine Spalte einschließen, die die Summe von zwei vorhergehenden Spalten ist, oder eine Spalte, die das Kalenderquartal eines Datums aus einer anderen Spalte berechnet und anzeigt. Weitere Informationen finden Sie unter setColumns().

Wenn Sie ein DataView ändern, indem Sie Zeilen oder Spalten aus- oder einblenden, wirkt sich dies erst auf die Visualisierung aus, wenn Sie draw() für die Visualisierung noch einmal aufrufen.

Sie können DataView.getFilteredRows() mit DataView.setRows() kombinieren, um eine DataView mit einer interessanten Teilmenge von Daten zu erstellen, wie hier gezeigt:

var data = new google.visualization.DataTable();
data.addColumn('string', 'Employee Name');
data.addColumn('date', 'Start Date');
data.addRows(6);
data.setCell(0, 0, 'Mike');
data.setCell(0, 1, new Date(2008, 1, 28));
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));

// Create a view that shows everyone hired since 2007.
var view = new google.visualization.DataView(data);
view.setRows(view.getFilteredRows([{column: 1, minValue: new Date(2007, 0, 1)}]));
var table = new google.visualization.Table(document.getElementById('test_dataview'));
table.draw(view, {sortColumn: 1});

Konstruktoren

Es gibt zwei Möglichkeiten, eine neue DataView-Instanz zu erstellen:

Konstruktor 1

var myView = new google.visualization.DataView(data)
data
Ein DataTable oder DataView, das zum Initialisieren der Ansicht verwendet wird. Standardmäßig enthält die Ansicht alle Spalten und Zeilen in der zugrunde liegenden Datentabelle oder -ansicht in der ursprünglichen Reihenfolge. Wenn Sie Zeilen oder Spalten in dieser Ansicht ein- oder ausblenden möchten, rufen Sie die entsprechenden Methoden set...() oder hide...() auf.

Weitere Informationen

setColumns(), hideColumns(), setRows() und hideRows()

 

Konstruktor 2

Dieser Konstruktor erstellt eine neue DataView. Dazu weist er einer DataTable eine serialisierte DataView zu. Sie können damit das DataView neu erstellen, das Sie mit DataView.toJSON() serialisiert haben.

var myView = google.visualization.DataView.fromJSON(data, viewAsJson)
Daten
Das DataTable-Objekt, mit dem du die DataView erstellt hast, auf dem du DataView.toJSON() aufgerufen hast. Wenn sich diese Tabelle von der ursprünglichen Tabelle unterscheidet, erhalten Sie unvorhersehbare Ergebnisse.
viewAsJson
Der von DataView.toJSON() zurückgegebene JSON-String. Dies ist eine Beschreibung, welche Zeilen in der Datentabelle data ein- oder ausgeblendet werden.

Methoden

Methode Rückgabewert Beschreibung
Beschreibungen in DataTable ansehen. Wie die entsprechenden DataTable-Methoden, mit dem Unterschied, dass Zeilen-/Spaltenindexe auf den Index in der Ansicht und nicht auf die zugrunde liegende Tabelle/Ansicht verweisen.
getTableColumnIndex(viewColumnIndex) Zahl

Gibt den Index in der zugrunde liegenden Tabelle (oder Ansicht) einer bestimmten Spalte zurück, die durch ihren Index in dieser Ansicht angegeben ist. viewColumnIndex muss eine Zahl größer oder gleich null und kleiner als die Anzahl der Spalten sein, die von der Methode getNumberOfColumns() zurückgegeben wird. Gibt -1 zurück, wenn dies eine generierte Spalte ist.

Beispiel: Wenn setColumns([3, 1, 4]) zuvor aufgerufen wurde, gibt getTableColumnIndex(2) 4 zurück.

getTableRowIndex(viewRowIndex) Zahl

Gibt den Index in der zugrunde liegenden Tabelle (oder Ansicht) einer bestimmten Zeile zurück, die durch ihren Index in dieser Ansicht angegeben ist. viewRowIndex muss eine Zahl größer oder gleich null und kleiner als die Anzahl der Zeilen sein, die von der Methode getNumberOfRows() zurückgegeben werden.

Beispiel: Wenn setRows([3, 1, 4]) zuvor aufgerufen wurde, gibt getTableRowIndex(2) 4 zurück.

getViewColumnIndex(tableColumnIndex) Zahl

Gibt in dieser Ansicht den Index zurück, der einer bestimmten Spalte zugeordnet ist, die durch ihren Index in der zugrunde liegenden Tabelle (oder Ansicht) angegeben wird. Wenn mehr als ein solcher Index vorhanden ist, wird der erste (kleinste) Index zurückgegeben. Wenn ein solcher Index nicht vorhanden ist (die angegebene Spalte ist nicht in der Ansicht vorhanden), wird -1 zurückgegeben. tableColumnIndex muss eine Zahl größer oder gleich null und kleiner als die Anzahl der Spalten sein, die von der Methode getNumberOfColumns() der zugrunde liegenden Tabelle/Ansicht zurückgegeben wird.

Beispiel: Wenn setColumns([3, 1, 4]) zuvor aufgerufen wurde, gibt getViewColumnIndex(4) 2 zurück.

getViewColumns() Array von Zahlen

Gibt die Spalten in dieser Ansicht der Reihe nach zurück. Wenn Sie also setColumns mit einem Array und dann getViewColumns() aufrufen, sollten Sie ein identisches Array erhalten.

getViewRowIndex(tableRowIndex) Zahl

Gibt in dieser Ansicht den Index zurück, der einer bestimmten Zeile zugeordnet ist, die durch ihren Index in der zugrunde liegenden Tabelle (oder Ansicht) angegeben wird. Wenn mehr als ein solcher Index vorhanden ist, wird der erste (kleinste) Index zurückgegeben. Wenn kein solcher Index vorhanden ist (die angegebene Zeile ist nicht in der Ansicht enthalten), wird -1 zurückgegeben. tableRowIndex muss eine Zahl größer oder gleich null und kleiner als die Anzahl der Zeilen sein, wie sie von der Methode getNumberOfRows() der zugrunde liegenden Tabelle/Ansicht zurückgegeben wird.

Beispiel: Wenn setRows([3, 1, 4]) zuvor aufgerufen wurde, gibt getViewRowIndex(4) 2 zurück.

getViewRows() Array von Zahlen

Gibt die Zeilen in dieser Ansicht der Reihe nach zurück. Wenn Sie also setRows mit einem Array und dann getViewRows() aufrufen, sollten Sie ein identisches Array erhalten.

hideColumns(columnIndexes) keine

Blendet die angegebenen Spalten aus der aktuellen Ansicht aus. columnIndexes ist ein Array von Zahlen, die die Indexe der auszublendenden Spalten darstellen. Diese Indexe sind die Indexnummern in der zugrunde liegenden Tabelle/Ansicht. Die Zahlen in columnIndexes müssen nicht in einer bestimmten Reihenfolge sein (d. h. [3,4,1] ist in Ordnung). Die verbleibenden Spalten behalten ihre Indexreihenfolge bei, wenn Sie sie durchlaufen. Die Eingabe einer Indexnummer für eine bereits ausgeblendete Spalte ist kein Fehler. Wenn Sie jedoch einen Index eingeben, der in der zugrunde liegenden Tabelle/Ansicht nicht vorhanden ist, wird ein Fehler ausgegeben. Rufen Sie setColumns() auf, um Spalten einzublenden.

Beispiel: Wenn Sie eine Tabelle mit zehn Spalten haben und setColumns([2,7,1,7,9]) und dann hideColumns([7,9]) aufrufen, sind die Spalten in der Ansicht [2,1].

hideRows(min, max) Ohne

Blendet alle Zeilen mit Indexen aus, die zwischen Min und Max (einschließlich) liegen, aus der aktuellen Ansicht. Dies ist eine praktische Syntax für hideRows(rowIndexes) oben. hideRows(5, 10) entspricht beispielsweise hideRows([5, 6, 7, 8, 9, 10]).

hideRows(rowIndexes) Ohne

Blendet die angegebenen Zeilen aus der aktuellen Ansicht aus. rowIndexes ist ein Array von Zahlen, die die Indexe der auszublendenden Zeilen darstellen. Diese Indexe sind die Indexnummern in der zugrunde liegenden Tabelle/Ansicht. Die Zahlen in rowIndexes müssen nicht in einer bestimmten Reihenfolge sein (d. h. [3,4,1] ist in Ordnung). Die verbleibenden Zeilen behalten ihre Indexreihenfolge. Die Eingabe einer Indexnummer für eine bereits ausgeblendete Zeile ist kein Fehler. Wenn Sie jedoch einen Index eingeben, der in der zugrunde liegenden Tabelle bzw. Ansicht nicht vorhanden ist, wird ein Fehler ausgegeben. Rufen Sie setRows() auf, um Zeilen einzublenden.

Beispiel: Wenn Sie eine Tabelle mit 10 Zeilen haben und setRows([2,7,1,7,9]) und dann hideRows([7,9]) aufrufen, sind die Zeilen in der Ansicht [2,1].

setColumns(columnIndexes) Ohne

Gibt an, welche Spalten in dieser Ansicht sichtbar sind. Alle nicht angegebenen Spalten werden ausgeblendet. Hierbei handelt es sich um ein Array von Spaltenindexen in der zugrunde liegenden Tabelle/Ansicht oder in berechneten Spalten. Wenn Sie diese Methode nicht aufrufen, werden standardmäßig alle Spalten angezeigt. Das Array kann auch Duplikate enthalten, um dieselbe Spalte mehrmals anzuzeigen. Die Spalten werden in der angegebenen Reihenfolge angezeigt.

  • columnIndexes – ein Array aus Zahlen und/oder Objekten (kann gemischt werden):
    • Zahlen geben den Index der Quelldatenspalte an, die in die Ansicht aufgenommen werden soll. Die Daten werden unverändert übertragen. Wenn Sie eine Rolle oder zusätzliche Spaltenattribute explizit definieren müssen, geben Sie ein Objekt mit dem Attribut sourceColumn an.
    • Objekte geben eine berechnete Spalte an. Eine berechnete Spalte erstellt automatisch einen Wert für jede Zeile und fügt ihn der Ansicht hinzu. Das Objekt muss die folgenden Eigenschaften haben:
      • calc [Funktion]: Eine Funktion, die für jede Zeile in der Spalte aufgerufen wird, um einen Wert für diese Zelle zu berechnen. Die Funktionssignatur ist func(dataTable, row), wobei dataTable die Quelle-DataTable und row der Index der Quelldatenzeile ist. Die Funktion sollte einen einzelnen Wert des durch type angegebenen Typs zurückgeben.
      • type [string] – JavaScript-Typ des Werts, den die Funktion calc zurückgibt.
      • label [optional, string] – ein optionales Label, das dieser generierten Spalte zugewiesen werden soll. Wenn keine Angabe erfolgt, hat die Spalte „Ansicht“ kein Label.
      • id [optional, string]: Eine optionale ID, die dieser generierten Spalte zugewiesen werden soll.
      • sourceColumn: [optional, Zahl] Die Quellspalte, die als Wert verwendet werden soll. Falls angegeben, geben Sie weder calc noch das Attribut type an. Dies ähnelt der Übergabe einer Zahl anstelle eines Objekts, ermöglicht Ihnen jedoch, eine Rolle und Eigenschaften für die neue Spalte anzugeben.
      • properties [optional, Objekt]: ein Objekt mit beliebigen Attributen, die dieser Spalte zugewiesen werden können. Wenn keine Angabe erfolgt, enthält die Spalte „Ansicht“ keine Attribute.
      • role [optional, string]: eine Rolle, die dieser Spalte zugewiesen werden soll. Wenn keine Angabe erfolgt, wird die vorhandene Rolle nicht importiert.

Beispiele:

// Show some columns directly from the underlying data.
// Shows column 3 twice.
view.setColumns([3, 4, 3, 2]);

// Underlying table has a column specifying a value in centimeters.
// The view imports this directly, and creates a calculated column
// that converts the value into inches.
view.setColumns([1,{calc:cmToInches, type:'number', label:'Height in Inches'}]);
function cmToInches(dataTable, rowNum){
  return Math.floor(dataTable.getValue(rowNum, 1) / 2.54);
}
setRows(min, max) Ohne

Legt fest, dass die Zeilen in dieser Ansicht alle Indexe (in der zugrunde liegenden Tabelle/Ansicht) sind, die zwischen Min und Max (einschließlich) liegen. Dies ist eine praktische Syntax für setRows(rowIndexes) unten. setRows(5, 10) entspricht beispielsweise setRows([5, 6, 7, 8, 9, 10]).

setRows(rowIndexes) Ohne

Legt die sichtbaren Zeilen in dieser Ansicht basierend auf Indexnummern aus der zugrunde liegenden Tabelle/Ansicht fest. rowIndexes sollte ein Array von Indexnummern sein, die angeben, welche Zeilen in der Ansicht angezeigt werden. Das Array gibt die Reihenfolge an, in der die Zeilen angezeigt werden sollen, und Zeilen können dupliziert werden. Es werden nur die in rowIndexes angegebenen Zeilen angezeigt. Mit dieser Methode werden alle anderen Zeilen aus der Ansicht gelöscht. Das Array kann auch Duplikate enthalten, wodurch die angegebene Zeile in dieser Ansicht dupliziert wird. Beispielsweise wird durch setRows([3, 4, 3, 2]) die Zeile 3 in dieser Ansicht zweimal angezeigt. Das Array stellt somit eine Zuordnung der Zeilen aus der zugrunde liegenden Tabelle/Ansicht zu dieser Ansicht bereit. Sie können getFilteredRows() oder getSortedRows() verwenden, um eine Eingabe für diese Methode zu generieren.

Beispiel: So erstellen Sie eine Ansicht mit den Zeilen 3 und 0 einer zugrunde liegenden Tabelle/Ansicht: view.setRows([3, 0])

toDataTable() DataTable Gibt ein DataTable-Objekt zurück, das die sichtbaren Zeilen und Spalten von DataView enthält.
toJSON() String Gibt eine Stringdarstellung dieses DataView zurück. Dieser String enthält nicht die eigentlichen Daten, sondern nur die DataView-spezifischen Einstellungen wie sichtbare Zeilen und Spalten. Sie können diesen String speichern und an den statischen Konstruktor DataView.fromJSON() übergeben, um diese Ansicht neu zu erstellen. Generierte Spalten werden dabei nicht berücksichtigt.

ChartWrapper-Klasse

Mit der Klasse ChartWrapper wird Ihr Diagramm umschlossen und alle Lade-, Zeichen- und Datenquellenabfragen für Ihr Diagramm werden verarbeitet. Die Klasse stellt praktische Methoden zum Festlegen von Werten im Diagramm und zum Zeichnen des Diagramms bereit. Diese Klasse vereinfacht das Lesen aus einer Datenquelle, da kein Callback-Handler für Abfragen erstellt werden muss. Außerdem können Sie damit Diagramme speichern, um sie ganz einfach wiederverwenden zu können.

Ein weiterer Vorteil von ChartWrapper ist, dass Sie die Anzahl der Bibliotheksaufrufe durch dynamisches Laden reduzieren können. Außerdem musst du die Pakete nicht explizit laden, da ChartWrapper die Diagrammpakete für dich sucht und lädt. Weitere Informationen finden Sie in den Beispielen unten.

ChartWrapper propagiert derzeit jedoch nur eine Teilmenge der von Diagrammen ausgelösten Ereignisse: „select“, „ready“ und „error“. Andere Ereignisse werden nicht über die ChartWrapper-Instanz übertragen. Um andere Ereignisse abzurufen, müssen Sie getChart() aufrufen und Ereignisse direkt im Diagramm-Handle abonnieren, wie hier gezeigt:

var wrapper;
function drawVisualization() {

  // Draw a column chart
  wrapper = new google.visualization.ChartWrapper({
    chartType: 'ColumnChart',
    dataTable: [['Germany', 'USA', 'Brazil', 'Canada', 'France', 'RU'],
                [700, 300, 400, 500, 600, 800]],
    options: {'title': 'Countries'},
    containerId: 'visualization'
  });

  // Never called.
  google.visualization.events.addListener(wrapper, 'onmouseover', uselessHandler);

  // Must wait for the ready event in order to
  // request the chart and subscribe to 'onmouseover'.
  google.visualization.events.addListener(wrapper, 'ready', onReady);

  wrapper.draw();

  // Never called
  function uselessHandler() {
    alert("I am never called!");
  }

  function onReady() {
    google.visualization.events.addListener(wrapper.getChart(), 'onmouseover', usefulHandler);
  }

  // Called
  function usefulHandler() {
    alert("Mouseover event!");
  }
}

Konstruktor

ChartWrapper(opt_spec)
opt_spec
[optional]: Entweder ein JSON-Objekt, das das Diagramm definiert, oder eine serialisierte Stringversion dieses Objekts. Das Format dieses Objekts ist in der drawChart()-Dokumentation beschrieben. Wenn nicht angegeben, müssen Sie alle entsprechenden Eigenschaften mit den von diesem Objekt bereitgestellten set...-Methoden festlegen.

Methoden

ChartWrapper stellt die folgenden zusätzlichen Methoden bereit:

Methode Rückgabetyp Beschreibung
draw(opt_container_ref) Ohne

Zeichnet das Diagramm. Sie müssen diese Methode nach allen Änderungen am Diagramm oder an den Daten aufrufen, damit die Änderungen angezeigt werden.

  • opt_container_ref [optional] – ein Verweis auf ein gültiges Containerelement auf der Seite. Wenn angegeben, wird das Diagramm dort gezeichnet. Andernfalls wird das Diagramm im Element mit der ID gezeichnet, die durch containerId angegeben wird.
toJSON() String Gibt eine Stringversion der JSON-Darstellung des Diagramms zurück.
clone() ChartWrapper Gibt eine detaillierte Kopie des Diagramm-Wrappers zurück.
getDataSourceUrl() String Wenn die Daten dieses Diagramms aus einer Datenquelle stammen, wird die URL für diese Datenquelle zurückgegeben. Andernfalls wird null zurückgegeben.
getDataTable() google.visualization.DataTable

Wenn dieses Diagramm seine Daten aus einer lokal definierten DataTable bezieht, wird ein Verweis auf die DataTable des Diagramms zurückgegeben. Wenn die Daten für dieses Diagramm aus einer Datenquelle stammen, wird null zurückgegeben.

Alle Änderungen, die Sie am zurückgegebenen Objekt vornehmen, spiegeln sich beim nächsten Aufruf von ChartWrapper.draw() im Diagramm wider.

getChartType() String Der Klassenname des umschlossenen Diagramms. Wenn es sich um ein Google-Diagramm handelt, wird der Name nicht mit google.visualization qualifiziert. Bei einem Strukturkartendiagramm wird also beispielsweise „Treemap“ und nicht „google.visualization.treemap“ zurückgegeben.
getChartName() String Gibt den von setChartName() zugewiesenen Diagrammnamen zurück.
getChart() Diagrammobjektreferenz Gibt einen Verweis auf das von diesem ChartWrapper erstellte Diagramm zurück, z. B. google.visualization.BarChart oder google.visualization.ColumnChart . Dies gibt null zurück, bis Sie draw() für das ChartWrapper-Objekt aufgerufen haben und ein Ready-Ereignis ausgelöst wird. Die für das zurückgegebene Objekt aufgerufenen Methoden werden auf der Seite wiedergegeben.
getContainerId() String Die ID des DOM-Containerelements des Diagramms.
getQuery() String Der Abfragestring für dieses Diagramm, sofern vorhanden und der eine Datenquelle abfragt.
getRefreshInterval() Zahl Jedes Aktualisierungsintervall für dieses Diagramm, wenn eine Datenquelle abgefragt wird. Null bedeutet, dass keine Aktualisierung erfolgt.
getOption(key, opt_default_val) Beliebiger Typ

Gibt den angegebenen Wert für die Diagrammoption zurück

  • key – der Name der abzurufenden Option. Kann ein qualifizierter Name wie 'vAxis.title' sein.
  • opt_default_value [optional] – Wenn der angegebene Wert nicht definiert oder null ist, wird er zurückgegeben.
getOptions() Objekt Gibt das Optionsobjekt für dieses Diagramm zurück
getView() Objekt ODER Array Gibt das DataView-Initialisierungsobjekt im selben Format wie dataview.toJSON() oder ein Array solcher Objekte zurück.
setDataSourceUrl(url) Ohne Legt die URL einer Datenquelle für dieses Diagramm fest. Wenn Sie auch eine Datentabelle für dieses Objekt festlegen, wird die Datenquellen-URL ignoriert.
setDataTable(table) Ohne Legt die DataTable für das Diagramm fest. Übergeben Sie einen der folgenden Werte: null, ein DataTable-Objekt, eine JSON-Darstellung einer DataTable oder ein Array gemäß der Syntax von arrayToDataTable().
setChartType(type) Ohne Legt den Diagrammtyp fest. Übergeben Sie den Klassennamen des umschlossenen Diagramms. Wenn es sich um ein Google-Diagramm handelt, können Sie es nicht mit google.visualization qualifizieren. Bei einem Kreisdiagramm übergeben Sie also beispielsweise "Kreisdiagramm".
setChartName(name) Ohne Legt einen beliebigen Namen für das Diagramm fest. Dies wird nirgendwo im Diagramm angezeigt, es sei denn, ein benutzerdefiniertes Diagramm ist explizit dafür vorgesehen.
setContainerId(id) Ohne Legt die ID des beinhaltenden DOM-Elements für das Diagramm fest
setQuery(query_string) Ohne Legt einen Abfragestring fest, wenn in diesem Diagramm eine Datenquelle abgefragt wird. Wenn Sie diesen Wert angeben, müssen Sie auch die URL der Datenquelle festlegen.
setRefreshInterval(interval) Ohne Legt das Aktualisierungsintervall für dieses Diagramm fest, wenn eine Datenquelle abgefragt wird. Wenn Sie diesen Wert angeben, müssen Sie auch eine Datenquellen-URL festlegen. Null bedeutet, dass keine Aktualisierung erfolgt.
setOption(key, value) Ohne Legt einen einzelnen Diagrammoptionswert fest, wobei key der Optionsname und value der Wert ist. Wenn Sie die Festlegung einer Option aufheben möchten, übergeben Sie als Wert null. key kann ein qualifizierter Name wie 'vAxis.title' sein.
setOptions(options_obj) Ohne Legt ein vollständiges Optionsobjekt für ein Diagramm fest.
setView(view_spec) Ohne Legt ein DataView-Initialisierungsobjekt fest, das als Filter für die zugrunde liegenden Daten dient. Dem Diagramm-Wrapper müssen Daten aus einer Datentabelle oder einer Datenquelle zugrunde liegen, auf die diese Ansicht angewendet werden kann. Sie können entweder einen String oder ein DataView-Initialisierungsobjekt übergeben, wie das von dataview.toJSON() zurückgegeben wird. Sie können auch ein Array von DataView-Initialisierungsobjekten übergeben. In diesem Fall wird die erste DataView im Array auf die zugrunde liegenden Daten angewendet, um eine neue Datentabelle zu erstellen. Die zweite DataView wird auf die Datentabelle angewendet, die sich aus der Anwendung des ersten DataView ergibt usw.

Veranstaltungen

Das ChartWrapper-Objekt gibt die folgenden Ereignisse aus. Sie müssen ChartWrapper.draw() aufrufen, bevor Ereignisse ausgelöst werden.

Name Beschreibung Attribute
error Wird ausgelöst, wenn beim Versuch, das Diagramm zu rendern, ein Fehler auftritt. ID, Nachricht
ready Das Diagramm ist bereit für externe Methodenaufrufe. Wenn Sie mit dem Diagramm interagieren und Methoden aufrufen möchten, nachdem Sie es gezeichnet haben, sollten Sie einen Listener für dieses Ereignis einrichten, bevor Sie die Methode draw aufrufen. Dieser Listener muss erst aufgerufen werden, nachdem das Ereignis ausgelöst wurde. Ohne
select Wird ausgelöst, wenn der Nutzer auf eine Leiste oder Legende klickt Bei Auswahl eines Diagrammelements wird die entsprechende Zelle in der Datentabelle ausgewählt. Bei Auswahl einer Legende wird die entsprechende Spalte in der Datentabelle ausgewählt. Wenn Sie wissen möchten, was ausgewählt wurde, rufen Sie ChartWrapper.getChart(). getSelection() auf. Dies wird nur ausgelöst, wenn der zugrunde liegende Diagrammtyp ein Auswahlereignis auslöst. Ohne

Beispiel

Mit den folgenden beiden Snippets wird ein äquivalentes Liniendiagramm erstellt. Im ersten Beispiel wird das Diagramm mit der JSON-Literal-Notation definiert. Im zweiten Beispiel werden ChartWrapper-Methoden verwendet, um diese Werte festzulegen.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Visualization API Sample</title>
<!--
  One script tag loads all the required libraries!
-->
<script type="text/javascript"
      src='https://www.gstatic.com/charts/loader.js'></script>
<script>
  google.charts.load('current);
  google.charts.setOnLoadCallback(drawVisualization);

  function drawVisualization() {
    var wrap = new google.visualization.ChartWrapper({
       'chartType':'LineChart',
       'dataSourceUrl':'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
       'containerId':'visualization',
       'query':'SELECT A,D WHERE D > 100 ORDER BY D',
       'options': {'title':'Population Density (people/km^2)', 'legend':'none'}
       });
     wrap.draw();
  }
</script>
</head>
<body>
  <div id="visualization" style="height: 400px; width: 400px;"></div>
</body>
</html>

Dasselbe Diagramm, jetzt mit Setter-Methoden:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='content-type' content='text/html; charset=utf-8'/>
<title>Google Visualization API Sample</title>
<!-- One script tag loads all the required libraries!
-->
<script type="text/javascript"
    src='https://www.gstatic.com/charts/loader.js'></script>
<script type="text/javascript">
  google.charts.load('current');
  google.charts.setOnLoadCallback(drawVisualization);
  function drawVisualization() {
    // Define the chart using setters:
    var wrap = new google.visualization.ChartWrapper();
    wrap.setChartType('LineChart');
    wrap.setDataSourceUrl('http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1');
    wrap.setContainerId('visualization');
    wrap.setQuery('SELECT A,D WHERE D > 100 ORDER BY D');
    wrap.setOptions({'title':'Population Density (people/km^2)', 'legend':'none'});
    wrap.draw();
  }
</script>
</head>
<body>
  <div id='visualization' style='height: 400px; width: 400px;'></div>
</body>
</html>

ChartEditor-Klasse

Die Klasse ChartEditor wird verwendet, um ein In-Page-Dialogfeld zu öffnen, mit dem Nutzer eine Visualisierung im Handumdrehen anpassen können.

So verwenden Sie den ChartEditor:

  1. Laden Sie das Paket charteditor. Laden Sie in google.charts.load() das Paket „charteditor“. Sie müssen die Pakete für den Diagrammtyp, den Sie im Editor rendern, nicht laden. Der Diagrammeditor lädt nach Bedarf jedes Paket für Sie.
  2. Erstellen Sie ein ChartWrapper-Objekt, das das Diagramm für den Nutzer definiert, das angepasst werden soll. Dieses Diagramm wird im Dialogfeld angezeigt und der Nutzer verwendet den Editor, um das Diagramm neu zu gestalten, Diagrammtypen oder sogar die Quelldaten zu ändern.
  3. Erstellen Sie eine neue ChartEditor-Instanz und registrieren Sie sich, um auf das „ok“-Ereignis zu warten. Dieses Ereignis wird ausgelöst, wenn der Nutzer im Dialogfeld auf die Schaltfläche „OK“ klickt. Nach dem Empfang sollten Sie ChartEditor.getChartWrapper() aufrufen, um das vom Nutzer geänderte Diagramm abzurufen.
  4. Rufen Sie ChartEditor.openDialog() auf und übergeben Sie ChartWrapper. Das Dialogfeld wird geöffnet. Über die Dialogfeldschaltflächen kann der Nutzer den Editor schließen. Die Instanz ChartEditor ist verfügbar, solange sie im Geltungsbereich liegt. Sie wird nicht automatisch gelöscht, nachdem der Nutzer das Dialogfeld geschlossen hat.
  5. Rufen Sie setChartWrapper() auf, um das Diagramm im Code zu aktualisieren.

Methoden

Methode Rückgabewert Beschreibung
openDialog(chartWrapper, opt_options) null

Öffnet den Diagrammeditor als eingebettetes Dialogfeld auf der Seite. Die Funktion wird sofort zurückgegeben und wartet nicht darauf, dass das Dialogfeld geschlossen wird. Wenn Sie den Bereich der Instanz nicht verlieren, können Sie noch einmal openDialog() aufrufen, um das Dialogfeld wieder zu öffnen. Allerdings müssen Sie noch einmal ein ChartWrapper-Objekt übergeben.

  • chartWrapper – Ein ChartWrapper-Objekt, mit dem das erste Diagramm definiert wird, das im Fenster gerendert werden soll. Das Diagramm muss entweder einen ausgefüllten DataTable haben oder mit einer gültigen Datenquelle verbunden sein. Dieser Wrapper wird intern in den Diagrammeditor kopiert. Daher werden Änderungen, die Sie später am ChartWrapper-Handle vornehmen, nicht in die Kopie des Diagrammeditors übernommen.
  • opt_options - [optional] Ein Objekt, das Optionen für den Diagrammeditor enthält. Siehe Tabelle mit Optionen unten.
getChartWrapper() ChartWrapper Gibt ein ChartWrapper zurück, das das Diagramm mit Nutzeränderungen darstellt.
setChartWrapper(chartWrapper) null

Mit dieser Methode können Sie das gerenderte Diagramm im Editor aktualisieren.

chartWrapper – Ein ChartWrapper-Objekt, das das neue zu rendernde Diagramm darstellt. Das Diagramm muss entweder einen ausgefüllten DataTable haben oder mit einer gültigen Datenquelle verbunden sein.

closeDialog() null Schließt das Dialogfeld des Diagrammeditors.

Optionen

Der Diagrammeditor unterstützt die folgenden Optionen:

Name Typ Standard Beschreibung
dataSourceInput Element-Handle oder „urlbox“ null

Damit kann der Nutzer eine Datenquelle für das Diagramm angeben. Dieses Attribut kann einen von zwei Werten haben:

  • 'urlbox': Die URL der Datenquelle des Diagramms wird im Dialogfeld in einem bearbeitbaren Textfeld angezeigt. Der Nutzer kann dies ändern und das Diagramm wird basierend auf der neuen Datenquelle neu gezeichnet.
  • DOM-Element: Hiermit können Sie ein benutzerdefiniertes HTML-Element zur Auswahl einer Datenquelle angeben. Übergeben Sie einen Handle an ein HTML-Element, das entweder im Code erstellt oder von der Seite kopiert wurde. Dieses Element wird im Dialogfeld angezeigt. So können Nutzer die Datenquelle des Diagramms auswählen. Sie können beispielsweise ein Listenfeld mit mehreren Datenquellen-URLs oder nutzerfreundlichen Namen erstellen, aus denen der Nutzer auswählen kann. Das Element muss einen Auswahl-Handler implementieren und damit die Datenquelle des Diagramms ändern. Ändern Sie beispielsweise entweder die zugrunde liegende DataTable oder das Feld dataSourceUrl des Diagramms.

Veranstaltungen

Der Diagrammeditor gibt die folgenden Ereignisse aus:

Name Beschreibung Attribute
ok Wird ausgelöst, wenn der Nutzer im Dialogfeld auf die Schaltfläche „OK“ klickt. Nachdem Sie diese Methode erhalten haben, sollten Sie getChartWrapper() aufrufen, um das vom Nutzer konfigurierte Diagramm abzurufen. keine
cancel Wird ausgelöst, wenn der Nutzer im Dialogfeld auf die Schaltfläche „Abbrechen“ klickt. keine

Beispiel

Mit dem folgenden Beispielcode wird ein Diagrammeditor-Dialogfeld mit einem ausgefüllten Liniendiagramm geöffnet. Wenn der Nutzer auf „OK“ klickt, wird das bearbeitete Diagramm im angegebenen <div> auf der Seite gespeichert.

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  <title>
    Google Visualization API Sample
  </title>
  <script type="text/javascript"
    src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {packages: ['charteditor']});
  </script>
  <script type="text/javascript">
    google.charts.setOnLoadCallback(loadEditor);
    var chartEditor = null;

    function loadEditor() {
      // Create the chart to edit.
      var wrapper = new google.visualization.ChartWrapper({
         'chartType':'LineChart',
         'dataSourceUrl':'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
         'query':'SELECT A,D WHERE D > 100 ORDER BY D',
         'options': {'title':'Population Density (people/km^2)', 'legend':'none'}
      });

      chartEditor = new google.visualization.ChartEditor();
      google.visualization.events.addListener(chartEditor, 'ok', redrawChart);
      chartEditor.openDialog(wrapper, {});
    }

    // On "OK" save the chart to a <div> on the page.
    function redrawChart(){
      chartEditor.getChartWrapper().draw(document.getElementById('vis_div'));
    }

  </script>
</head>
<body>
  <div id="vis_div" style="height: 400px; width: 600px;"></div>
</body>
</html>

Datenbearbeitungsmethoden

Der Namespace google.visualization.data enthält statische Methoden, um SQL-ähnliche Vorgänge für DataTable-Objekte auszuführen, z. B. zum Zusammenführen oder Gruppieren nach Spaltenwert.

Der Namespace google.visualization.data stellt die folgenden Methoden zur Verfügung:

Methode Beschreibung
google.visualization.data.group Führt die SQL GROUP BY-Aktion aus, um eine Tabelle zurückzugeben, die nach Werten in bestimmten Spalten gruppiert ist.
google.visualization.data.join Verbindet zwei Datentabellen mit einer oder mehreren Schlüsselspalten.

group()

Übernimmt ein ausgefülltes DataTable-Objekt und führt einen SQL-ähnlichen GROUP BY-Vorgang durch. Dabei wird eine Tabelle mit Zeilen zurückgegeben, die nach den angegebenen Spaltenwerten gruppiert sind. Dadurch wird die Eingabe-DataTable nicht geändert.

Die zurückgegebene Tabelle enthält eine Zeile für jede Kombination von Werten in den angegebenen Schlüsselspalten. Jede Zeile enthält die Schlüsselspalten sowie eine Spalte mit einem aggregierten Spaltenwert über alle Zeilen, die mit der Schlüsselkombination übereinstimmen (z. B. eine Summe oder Anzahl aller Werte in der angegebenen Spalte).

Der Namespace google.visualization.data enthält mehrere nützliche Aggregationswerte (z. B. sum und count). Sie können aber auch eigene Werte definieren (z. B. standardDeviation oder secondHighest). Eine Anleitung zum Definieren Ihres eigenen Aggregators finden Sie im Anschluss an die Methodenbeschreibung.

Syntax

google.visualization.data.group(data_table, keys, columns)
data_table
Die Eingabe-DataTable. Dies wird nicht durch den Aufruf von group() geändert.
keys
Ein Array von Zahlen und/oder Objekten, die angeben, nach welchen Spalten gruppiert werden soll. Die Ergebnistabelle enthält jede Spalte in diesem Array sowie jede Spalte in columns. Bei einer Zahl ist dies ein Spaltenindex der Eingabe-DataTable, nach dem gruppiert werden soll. Wenn es sich um ein Objekt handelt, enthält es eine Funktion, mit der die angegebene Spalte geändert werden kann (z. B. 1 zum Wert in dieser Spalte addieren). Das Objekt muss die folgenden Eigenschaften haben:
  • Spalte: Eine Zahl, die ein Spaltenindex aus dt ist, auf den die Transformation angewendet werden soll.
  • modifier: Eine Funktion, die einen Wert annimmt (den Zellenwert in dieser Spalte für jede Zeile) und den geänderten Wert zurückgibt. Diese Funktion wird verwendet, um den Spaltenwert zu ändern, der bei der Gruppierung unterstützt wird. Dazu wird z. B. eine whatQuarter-Funktion aufgerufen, die aus einer Datumsspalte ein Quartal berechnet, damit die API Zeilen nach Quartal gruppieren kann. Der berechnete Wert wird in den Schlüsselspalten der zurückgegebenen Tabelle angezeigt. Diese Funktion kann innerhalb dieses Objekts inline deklariert werden oder eine Funktion sein, die Sie an anderer Stelle in Ihrem Code definieren (sie muss sich innerhalb des aufrufenden Bereichs befinden). Die API bietet eine einfache Modifikatorfunktion. Hier finden Sie eine Anleitung zum Erstellen eigener, nützlicherer Funktionen. Sie müssen den Datentyp kennen, den diese Funktion akzeptieren kann, und ihn nur für Spalten dieses Typs aufrufen. Außerdem müssen Sie den Rückgabetyp dieser Funktion kennen und in der Property type, die als Nächstes beschrieben wird, deklarieren.
  • type – Typ, der von der Funktion modifier zurückgegeben wird. Dies sollte ein JavaScript-Stringtyp sein, z. B. „Zahl“ oder „Boolescher Wert“.
  • label – [optional] Ein Stringlabel, um diese Spalte in der zurückgegebenen DataTable zuzuweisen.
  • id – [optional] Eine String-ID, die dieser Spalte im zurückgegebenen DataTable zugewiesen werden soll.

Beispiele:[0], [0,2], [0,{column:1, modifier:myPlusOneFunc, type:'number'},2]
Spalten
[Optional] Hier können Sie angeben, welche Spalten zusätzlich zu den Schlüsselspalten in die Ausgabetabelle aufgenommen werden sollen. Da alle Zeilen in der Zeilengruppe zu einer einzelnen Ausgabezeile komprimiert werden, müssen Sie festlegen, welcher Wert für diese Zeilengruppe angezeigt werden soll. Sie können beispielsweise den Spaltenwert aus der ersten Zeile in der Gruppe oder einen Durchschnitt aller Zeilen in dieser Gruppe anzeigen. columns ist ein Array von Objekten mit den folgenden Attributen:
  • Spalte: Eine Zahl, die den Index der anzuzeigenden Spalte angibt.
  • aggregation: Eine Funktion, die ein Array aller Werte dieser Spalte in dieser Zeilengruppe annimmt und einen einzelnen Wert zur Anzeige in der Ergebniszeile zurückgibt. Der Rückgabewert muss von dem Typ sein, der in der Eigenschaft type des Objekts angegeben ist. Details zum Erstellen einer eigenen Aggregationsfunktion finden Sie unten. Sie müssen wissen, welche Datentypen diese Methode akzeptiert, und sie nur für Spalten des entsprechenden Typs aufrufen. Die API bietet mehrere nützliche Aggregationsfunktionen. Eine Liste finden Sie unten unter Bereitgestellte Aggregationsfunktionen. Unter Aggregationsfunktion erstellen erfahren Sie, wie Sie eine eigene Aggregationsfunktion schreiben.
  • type – Rückgabetyp der Aggregationsfunktion. Dies sollte ein JavaScript-Stringtyp sein, z. B. „Zahl“ oder „Boolescher Wert“.
  • label – [optional] Ein Stringlabel, das auf diese Spalte in der zurückgegebenen Tabelle angewendet werden soll.
  • id – [optional] Eine String-ID, die auf diese Spalte in der zurückgegebenen Tabelle angewendet werden soll.

Rückgabewert

Ein DataTable mit einer Spalte für jede in keys aufgeführte Spalte und einer Spalte für jede in columns aufgeführte Spalte. Die Tabelle wird von links nach rechts nach Schlüsselzeilen sortiert.

Beispiel

// This call will group the table by column 0 values.
// It will also show column 3, which will be a sum of
// values in that column for that row group.
var result = google.visualization.data.group(
  dt,
  [0],
  [{'column': 3, 'aggregation': google.visualization.data.sum, 'type': 'number'}]
);

*Input table*
1  'john'  'doe'            10
1  'jane'  'doe'           100
3  'jill'  'jones'          50
3  'jack'  'jones'          75
5  'al'    'weisenheimer'  500

*Output table*
1  110
3  125
5  500

Bereitgestellte Modifikatorfunktionen

Die API bietet die folgenden Modifikatorfunktionen, die Sie an die Schlüssel übergeben können. modifier an, um das Gruppierungsverhalten anzupassen.

Funktion Typ des Eingabearrays Rückgabetyp Beschreibung
google.visualization.data.month Datum number Für ein bestimmtes Datum wird der nullbasierte Monatswert (0, 1, 2 usw.) zurückgegeben.

Bereitgestellte Aggregationsfunktionen

Die API bietet die folgenden Aggregationsfunktionen, die Sie an die Spalten übergeben können. aggregation.

Funktion Typ des Eingabearrays Rückgabetyp Beschreibung
google.visualization.data.avg number number Der Durchschnittswert des übergebenen Arrays.
google.visualization.data.count Alle Typen number Die Anzahl der Zeilen in der Gruppe. Null- und doppelte Werte werden gezählt.
google.visualization.data.max Zahl, String, Datum number, string, Date, null Höchstwert im Array. Bei Strings ist dies das erste Element in einer lexikografisch sortierten Liste. Bei Datumwerten ist dies das späteste Datum. NULL-Werte werden ignoriert. Gibt null zurück, wenn kein Maximalwert vorhanden ist.
google.visualization.data.min Zahl, String, Datum number, string, Date, null Der Minimalwert im Array. Bei Strings ist dies das letzte Element in einer lexikografisch sortierten Liste. Bei Datumwerten ist dies das früheste Datum. NULL-Werte werden ignoriert. Gibt null zurück, wenn es kein Minimum gibt.
google.visualization.data.sum number number Die Summe aller Werte im Array.

Modifikatorfunktion erstellen

Sie können eine Modifikatorfunktion erstellen, um eine einfache Transformation onkey-Werte durchzuführen, bevor die group()-Funktion die Zeilen gruppiert. Diese Funktion nimmt den Wert einer einzelnen Zelle, führt eine Aktion dafür aus (z. B. addiert den Wert 1) und gibt ihn zurück. Die Eingabe- und Rückgabetypen müssen nicht vom gleichen Typ sein, aber der Aufrufer muss die Ein- und Ausgabetypen kennen. Hier ist ein Beispiel für eine Funktion, die ein Datum annimmt und das Quartal zurückgibt:

// Input type: Date
// Return type: number (1-4)
function getQuarter(someDate) {
  return Math.floor(someDate.getMonth()/3) + 1;
}

Aggregationsfunktion erstellen

Sie können eine Aggregationsfunktion erstellen, die eine Reihe von Spaltenwerten in einer Zeilengruppe annimmt und eine einzelne Zahl zurückgibt, z. B. die Anzahl oder den Durchschnitt von Werten. Hier sehen Sie eine Implementierung der angegebenen Aggregationsfunktion „Anzahl“, die die Anzahl der Zeilen in der Zeilengruppe zurückgibt:

// Input type: Array of any type
// Return type: number
function count(values) {
  return values.length;
}

join()

Mit dieser Methode werden zwei Datentabellen (DataTable- oder DataView-Objekte) zu einer einzigen Ergebnistabelle zusammengeführt, ähnlich wie bei einer SQL JOIN-Anweisung. Sie geben ein oder mehrere Spaltenpaare (key-Spalten) zwischen den beiden Tabellen an und die Ausgabetabelle enthält die Zeilen gemäß einer von Ihnen angegebenen Join-Methode: nur Zeilen, bei denen beide Schlüssel übereinstimmen, alle Zeilen aus einer Tabelle oder alle Zeilen aus beiden Tabellen, unabhängig davon, ob die Schlüssel übereinstimmen. Die Ergebnistabelle enthält nur die Schlüsselspalten sowie alle zusätzlichen Spalten, die Sie angeben. Beachten Sie, dass dt2 keine Schlüsselduplikate haben kann, dt1 jedoch schon. Der Begriff "Schlüssel" bezeichnet die Kombination aller Schlüsselspaltenwerte und nicht einen bestimmten Schlüsselspaltenwert. Wenn also eine Zeile die Zellenwerte A | B | C hat und die Spalten 0 und 1 Schlüsselspalten sind, dann ist der Schlüssel für diese Zeile AB.

Syntax

google.visualization.data.join(dt1, dt2, joinMethod,
                                 keys, dt1Columns, dt2Columns);
dt1
Eine ausgefüllte DataTable, die mit dt2 zusammengeführt werden soll.
dt2
Ein ausgefüllter DataTable-Wert für den Join mit dt1. Diese Tabelle darf nicht mehrere identische Schlüssel enthalten (wobei ein Schlüssel eine Kombination aus Schlüsselspaltenwerten ist).
joinMethod
Ein String, der den Join-Typ angibt. Wenn dt1 mehrere Zeilen hat, die mit einer dt2-Zeile übereinstimmen, enthält die Ausgabetabelle alle übereinstimmenden dt1-Zeilen. Wählen Sie einen der folgenden Werte aus:
  • "full" (vollständig) – Die Ausgabetabelle enthält alle Zeilen aus beiden Tabellen, unabhängig davon, ob die Schlüssel übereinstimmen. Nicht übereinstimmende Zeilen haben keine Zelleneinträge. Übereinstimmende Zeilen werden verknüpft.
  • "inner": Der vollständige Join ist so gefiltert, dass nur Zeilen eingeschlossen werden, bei denen die Schlüssel übereinstimmen.
  • 'left': Die Ausgabetabelle enthält alle Zeilen aus dt1, unabhängig davon, ob es passende Zeilen aus dt2 gibt.
  • „right“: Die Ausgabetabelle enthält alle Zeilen aus dt2, unabhängig davon, ob es passende Zeilen aus dt1 gibt.
keys
Ein Array mit Schlüsselspalten, die aus beiden Tabellen verglichen werden sollen. Jedes Paar ist ein Array mit zwei Elementen. Das erste ist ein Schlüssel in dt1 und das zweite ein Schlüssel in dt2. In diesem Array können Spalten nach Index, ID oder Label angegeben werden (siehe getColumnIndex).
Spalten müssen in beiden Tabellen vom gleichen Typ sein. Alle angegebenen Schlüssel müssen gemäß der durch joinMethod angegebenen Regel übereinstimmen, damit eine Zeile aus der Tabelle eingeschlossen wird. Schlüsselspalten sind immer in der Ausgabetabelle enthalten. Nur dt1, die linke Tabelle, kann doppelte Schlüssel enthalten; Schlüssel in dt2 müssen eindeutig sein. Der Begriff "Schlüssel" steht hier für einen eindeutigen Satz von Schlüsselspalten, nicht für einzelne Spaltenwerte. Wenn Ihre Schlüsselspalten beispielsweise A und B wären, würde die folgende Tabelle nur eindeutige Schlüssel/Wert-Paare enthalten (und könnte daher als dt2 verwendet werden):
A B
Jan Rot
Jan Blau
Fred Rot
Beispiel:[[0,0], [2,1]] vergleicht Werte aus der ersten Spalte in beiden Tabellen sowie aus der dritten Spalte aus dt1 mit der zweiten Spalte aus dt1.
dt1Columns
Ein Array mit Spalten aus dt1, die zusätzlich zu den Schlüsselspalten von dt1 in die Ausgabetabelle aufgenommen werden sollen. In diesem Array können Spalten nach Index, ID oder Label angegeben werden (siehe getColumnIndex).
dt2Columns
Ein Array mit Spalten aus dt2, die zusätzlich zu den Schlüsselspalten von dt2 in die Ausgabetabelle aufgenommen werden sollen. In diesem Array können Spalten nach Index, ID oder Label angegeben werden (siehe getColumnIndex).

Rückgabewert

Ein DataTable mit den Schlüsselspalten, dt1Columns und dt2Columns. Diese Tabelle wird von links nach rechts nach den Schlüsselspalten sortiert. Wenn joinMethod "inner" ist, sollten alle Schlüsselzellen ausgefüllt werden. Bei anderen Join-Methoden hat die Tabelle einen Nullwert für alle nicht übereinstimmenden Schlüsselzellen, wenn kein übereinstimmender Schlüssel gefunden wird.

Beispiele

*Tables*
dt1                        dt2
bob  | 111 | red           bob   | 111 | point
bob  | 111 | green         ellyn | 222 | square
bob  | 333 | orange        jane  | 555 | circle
fred | 555 | blue          jane  | 777 | triangle
jane | 777 | yellow        fred  | 666 | dodecahedron
* Note that right table has duplicate Jane entries, but the key we will use is
* columns 0 and 1. The left table has duplicate key values, but that is
* allowed.

*Inner join* google.visualization.data.join(dt1, dt2, 'inner', [[0,0],[1,1]], [2], [2]);
bob  | 111 | red    | point
bob  | 111 | green  | point
jane | 777 | yellow | triangle
* Note that both rows from dt1 are included and matched to
* the equivalent dt2 row.


*Full join* google.visualization.data.join(dt1, dt2, 'full', [[0,0],[1,1]], [2], [2]);
bob   | 111 | red    | point
bob   | 111 | green  | point
bob   | 333 | orange | null
ellyn | 222 | null | square
fred  | 555 | blue   | null
fred  | 666 | null | dodecahedron
jane  | 555 | null | circle
jane  | 777 | yellow | triangle


*Left join*  google.visualization.data.join(dt1, dt2, 'left', [[0,0],[1,1]], [2], [2]);
bob  | 111 | red | point
bob  | 111 | green | point
bob  | 333 | orange | null
fred | 555 | blue | null
jane | 777 | yellow | triangle


*Right join*  google.visualization.data.join(dt1, dt2, 'right', [[0,0],[1,1]], [2], [2]);
bob   | 111 | red | point
bob   | 111 | green | point
ellyn | 222 | null | square
fred  | 666 | null | dodecahedron
jane  | 555 | null | circle
jane  | 777 | yellow | triangle

Formatierer

Die Google Visualization API bietet Formatierer, mit denen Daten in einer Visualisierung neu formatiert werden können. Diese Formatierer ändern den formatierten Wert der angegebenen Spalte in allen Zeilen. Hinweis:

  • Formatierer ändern nur die formatierten Werte, nicht die zugrunde liegenden Werte. Der angezeigte Wert wäre beispielsweise „1.000, 00 $“, der zugrunde liegende Wert wäre aber weiterhin „1.000“.
  • Formatierer wirken sich jeweils nur auf eine Spalte aus. Wenn Sie mehrere Spalten neu formatieren möchten, wenden Sie auf jede Spalte, die Sie ändern möchten, einen Formatierer an.
  • Wenn Sie auch benutzerdefinierte Formatierer verwenden, überschreiben bestimmte Google-Formatierer für Visualisierungen alle benutzerdefinierten Formatierer.
  • Die eigentliche Formatierung auf die Daten wird aus dem Gebietsschema abgeleitet, mit dem die API geladen wurde. Weitere Informationen finden Sie unter Diagramme mit einer bestimmten Sprache laden .

    Wichtig: Formatierer können nur mit einem DataTable und nicht mit einem DataView verwendet werden (DataView-Objekte sind schreibgeschützt).

    Allgemeine Schritte zur Verwendung eines Formatierers:

    1. Rufen Sie das ausgefüllte DataTable-Objekt ab.
    2. Gehen Sie für jede Spalte, die Sie neu formatieren möchten, so vor:
      1. Erstellen Sie ein Objekt, in dem alle Optionen für die Formatierung angegeben werden. Dies ist ein einfaches JavaScript-Objekt mit einer Reihe von Attributen und Werten. In der Dokumentation des Formatierers erfahren Sie, welche Attribute unterstützt werden. (Optional können Sie ein Objekt-Literal-Notation-Objekt übergeben, mit dem Ihre Optionen festgelegt werden.)
      2. Erstellen Sie die Formatierung, indem Sie das Optionsobjekt übergeben.
      3. Rufen Sie formatter.format(table, colIndex) auf und übergeben Sie DataTable und die (nullbasierte) Spaltennummer der neu zu formatierenden Daten. Sie können auf jede Spalte nur eine Formatierer anwenden. Durch das Anwenden einer zweiten Formatierung werden einfach die Effekte der ersten überschrieben.
        Wichtig:Viele Formatierer benötigen HTML-Tags, um eine spezielle Formatierung anzuzeigen. Wenn Ihre Visualisierung die Option allowHtml unterstützt, sollten Sie diese auf „true“ setzen.

    Hier ist ein Beispiel für das Ändern der formatierten Datumswerte einer Datumsspalte zur Verwendung eines langen Datumsformats („1. Januar 2009“):

    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Employee Name');
    data.addColumn('date', 'Start Date');
    data.addRows(3);
    data.setCell(0, 0, 'Mike');
    data.setCell(0, 1, new Date(2008, 1, 28));
    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));
    
    // Create a formatter.
    // This example uses object literal notation to define the options.
    var formatter = new google.visualization.DateFormat({formatType: 'long'});
    
    // Reformat our data.
    formatter.format(data, 1);
    
    // Draw our data
    var table = new google.visualization.Table(document.getElementById('dateformat_div'));
    table.draw(data, {showRowNumber: true});

    Die meisten Formatierer bieten die folgenden zwei Methoden:

    Methode Beschreibung
    google.visualization.formatter_name(options)

    Konstruktor, wobei formatter_name ein bestimmter Formatierklassenname ist.

    • options – Ein generisches JavaScript-Objekt, das die Optionen für diesen Formatierer angibt. Dieses Objekt ist ein generisches Objekt mit Attribut/Wert-Paaren mit Attributen, die für diesen Formatierer spezifisch sind. Informationen zu den unterstützten Optionen finden Sie in der Dokumentation zu Ihrem spezifischen Formatierer. Hier sind zwei Beispiele für Möglichkeiten, den Konstruktor für das DateFormat-Objekt aufzurufen, indem zwei Eigenschaften übergeben werden:
    // Object literal technique
    var formatter = new google.visualization.DateFormat({formatType: 'long', timeZone: -5});
    
    // Equivalent property setting technique
    var options = new Object();
    options['formatType'] = 'long';
    options['timeZone'] = -5;
    var formatter = new google.visualization.DateFormat(options);
    format(data, colIndex)

    Formatiert die Daten in der angegebenen Spalte neu.

    • data – Ein DataTable mit den Daten, die umformatiert werden sollen. Sie können hier keine DataView verwenden.
    • colIndex – nullbasierter Index der zu formatierenden Spalte. Wenn Sie mehrere Spalten formatieren möchten, müssen Sie diese Methode mehrmals mit unterschiedlichen colIndex-Werten aufrufen.

     

    Die Google Visualization API bietet die folgenden Formatierer:

    Name des Formatierers Beschreibung
    ArrowFormat Fügt einen Aufwärts- oder Abwärtspfeil hinzu, der angibt, ob der Zellenwert über oder unter einem bestimmten Wert liegt.
    BarFormat Fügt einen farbigen Balken hinzu, dessen Richtung und Farbe anzeigt, ob der Zellenwert über oder unter einem bestimmten Wert liegt.
    ColorFormat Färbt eine Zelle entsprechend ein, ob die Werte in einen bestimmten Bereich fallen.
    DateFormat Formatiert einen Datums- oder Datum/Uhrzeit-Wert auf verschiedene Arten, z. B. „1. Januar 2009“, „1. Januar 2009“ und „1. Januar 2009“.
    NumberFormat Formatiert verschiedene Aspekte numerischer Werte.
    PatternFormat Verkettet Zellenwerte aus derselben Zeile in eine angegebene Zelle, zusammen mit beliebigem Text.

    ArrowFormat

    Fügt einer numerischen Zelle einen Aufwärts- oder Abwärtspfeil hinzu, je nachdem, ob der Wert über oder unter einem angegebenen Basiswert liegt. Wenn er gleich dem Basiswert ist, wird kein Pfeil angezeigt.

    Optionen

    ArrowFormat unterstützt die folgenden Optionen, die an den Konstruktor übergeben werden:

    Wahltaste Beschreibung
    base

    Zahl, die den Basiswert angibt und mit dem Zellenwert verglichen wird. Ist der Zellenwert höher, enthält die Zelle einen grünen Aufwärtspfeil. Ist der Zellenwert niedriger, enthält die Zelle einen roten Abwärtspfeil. Ist der Wert gleich, gibt es keinen Pfeil.

    Beispielcode

    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Department');
    data.addColumn('number', 'Revenues Change');
    data.addRows([
      ['Shoes', {v:12, f:'12.0%'}],
      ['Sports', {v:-7.3, f:'-7.3%'}],
      ['Toys', {v:0, f:'0%'}],
      ['Electronics', {v:-2.1, f:'-2.1%'}],
      ['Food', {v:22, f:'22.0%'}]
    ]);
    
    var table = new google.visualization.Table(document.getElementById('arrowformat_div'));
    
    var formatter = new google.visualization.ArrowFormat();
    formatter.format(data, 1); // Apply formatter to second column
    
    table.draw(data, {allowHtml: true, showRowNumber: true});

    BarFormat

    Fügt einer numerischen Zelle einen farbigen Balken hinzu, der angibt, ob der Zellenwert über oder unter einem angegebenen Basiswert liegt.

    Optionen

    BarFormat unterstützt die folgenden Optionen, die an den Konstruktor übergeben werden:

    Wahltaste

    Beispiel

    Beschreibung
    base Zahl, die der Basiswert ist, mit dem der Zellenwert verglichen werden soll. Ist der Zellenwert höher, wird er rechts von der Basis gezeichnet, andernfalls nach links. Der Standardwert ist 0.
    colorNegative Ein String, der den Bereich mit negativen Werten von Balken angibt. Mögliche Werte sind „red“, „green“ und „blue“. Der Standardwert ist „red“.
    colorPositive Ein String, der die Farbe des Balkens mit positiven Werten angibt. Mögliche Werte sind „red“, „green“ und „blue“. Der Standardwert ist blau.
    drawZeroLine Ein boolescher Wert, der angibt, ob bei negativen Werten eine dunkle Basislinie mit einer Pixelzahl gezeichnet werden soll. Die dunkle Linie soll die visuelle Darstellung der Balken verbessern. Der Standardwert ist „false“.
    max Der Maximalwert für den Balkenbereich. Der Standardwert ist der höchste Wert in der Tabelle.
    min Der kleinste Zahlenwert für den Balkenbereich. Der Standardwert ist der niedrigste Wert in der Tabelle.
    showValue Falls wahr, werden Werte und Balken angezeigt, bei FALSCH werden nur Balken angezeigt. Der Standardwert ist "true".
    width Dicke jedes Balkens in Pixeln Der Standardwert ist 100.

    Beispielcode

    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Department');
    data.addColumn('number', 'Revenues');
    data.addRows([
      ['Shoes', 10700],
      ['Sports', -15400],
      ['Toys', 12500],
      ['Electronics', -2100],
      ['Food', 22600],
      ['Art', 1100]
    ]);
    
    var table = new google.visualization.Table(document.getElementById('barformat_div'));
    
    var formatter = new google.visualization.BarFormat({width: 120});
    formatter.format(data, 1); // Apply formatter to second column
    
    table.draw(data, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});

    ColorFormat

    Weist dem Vorder- oder Hintergrund einer numerischen Zelle abhängig vom Zellenwert Farben zu. Dieser Formatierer ist ungewöhnlich, da er seine Optionen nicht im Konstruktor übernimmt. Stattdessen sollten Sie addRange() oder addGradientRange() beliebig oft aufrufen, um Farbbereiche hinzuzufügen, bevor Sie format() aufrufen. Farben können in jedem zulässigen HTML-Format angegeben werden, z. B. „black“, „#000000“ oder „#000“.

    Methoden

    ColorFormat unterstützt die folgenden Methoden:

    Methode Beschreibung
    google.visualization.ColorFormat() Konstruktor. Nimmt keine Argumente an.
    addRange(from, to, color, bgcolor)

    Gibt eine Vordergrund- und/oder Hintergrundfarbe für eine Zelle an, je nach Zellenwert. Jeder Zelle mit einem Wert im angegebenen Bereich von from bis to werden color und bgcolor zugewiesen. Beachten Sie, dass der Bereich nicht inklusiv ist, da das Erstellen eines Bereichs von 1 bis 1.000 und einer Sekunde zwischen 1.000 und 2.000 den Wert 1.000 nicht deckt.

    • from – [String, Number, Date, DateTime, or TimeOfDay]: Die Untergrenze (einschließlich) des Bereichs oder null. Ist dieser Wert null, entspricht er -∞. Stringgrenzen werden alphabetisch mit Stringwerten verglichen.
    • to – [String, Number, Date, DateTime, or TimeOfDay]: Obergrenze (nicht einschließlich) des Bereichs oder null. Wenn null, entspricht er +∞. Stringgrenzen werden alphabetisch mit Stringwerten verglichen.
    • color – die Farbe, die auf den Text in übereinstimmenden Zellen angewendet werden soll Die Werte können entweder „#RRGGBB“-Werte oder definierte Farbkonstanten sein, z. B. „#FF0000“ oder „red“.
    • bgcolor – die Farbe, die auf den Hintergrund übereinstimmender Zellen angewendet werden soll Die Werte können entweder „#RRGGBB“-Werte oder definierte Farbkonstanten sein, z. B. „#FF0000“ oder „red“.
    addGradientRange(from, to, color, fromBgColor, toBgColor)

    Weist entsprechend dem Zellenwert eine Hintergrundfarbe aus einem Bereich zu. Die Farbe wird so skaliert, dass sie dem Wert der Zelle in einem Bereich von einer Farbe für die untere Begrenzung bis zu einer oberen Begrenzungsfarbe entspricht. Beachten Sie, dass mit dieser Methode im Gegensatz zu addRange() Stringwerte nicht verglichen werden können. Tipp: Farbbereiche sind für Betrachter oft schwer zu erkennen. Der einfachste und am einfachsten lesbare Bereich ist von einer voll gesättigten Farbe bis zu Weiß (z. B. #FF0000–FFFFFF).

    • from – [Number, Date, DateTime, or TimeOfDay]: Untergrenze (einschließlich) des Bereichs oder null. Wenn null, stimmt er mit -∞ überein.
    • to – [Number, Date, DateTime, or TimeOfDay]: Die Obergrenze des Bereichs (nicht einschließlich) oder null. Wenn er null lautet, entspricht er +∞.
    • color – die Farbe, die auf den Text in übereinstimmenden Zellen angewendet werden soll Diese Farbe ist für alle Zellen gleich, unabhängig von ihrem Wert.
    • fromBgColor – Die Hintergrundfarbe für Zellen, deren Werte am unteren Ende des Farbverlaufs liegen. Die Werte können entweder „#RRGGBB“-Werte oder definierte Farbkonstanten sein, z. B. „#FF0000“ oder „red“.
    • toBgColor: Die Hintergrundfarbe für Zellen, deren Werte am oberen Rand des Farbverlaufs liegen. Die Werte können entweder „#RRGGBB“-Werte oder definierte Farbkonstanten sein, z. B. „#FF0000“ oder „red“.

     

    format(dataTable, columnIndex) Die Standardmethode format(), um Formatierungen auf die angegebene Spalte anzuwenden.

    Beispielcode

    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Department');
    data.addColumn('number', 'Revenues');
    data.addRows([
      ['Shoes', 10700],
      ['Sports', -15400],
      ['Toys', 12500],
      ['Electronics', -2100],
      ['Food', 22600],
      ['Art', 1100]
    ]);
    
    var table = new google.visualization.Table(document.getElementById('colorformat_div'));
    
    var formatter = new google.visualization.ColorFormat();
    formatter.addRange(-20000, 0, 'white', 'orange');
    formatter.addRange(20000, null, 'red', '#33ff33');
    formatter.format(data, 1); // Apply formatter to second column
    
    table.draw(data, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});

    DateFormat

    Formatiert einen JavaScript-Date-Wert auf verschiedene Arten, z. B. „1. Januar 2016“, „1/1/16“ und „1. Januar 2016“.

    Optionen

    DateFormat unterstützt die folgenden Optionen, die an den Konstruktor übergeben werden:

    Wahltaste Beschreibung
    formatType

    Eine schnelle Formatierungsoption für das Datum. Die folgenden Stringwerte werden unterstützt, wobei das Datum des 28. Februar 2016 so neu formatiert wird:

    • 'kurz' – Kurzformat: z.B. „28.02.2016“
    • 'medium' – Mittelformat: z.B. „Feb 28, 2016“
    • 'long' – Langformat: z.B. „28. Februar 2016“

    Sie können nicht sowohl formatType als auch pattern angeben.

    pattern

    Ein benutzerdefiniertes Formatmuster, das auf den Wert angewendet werden soll, ähnlich dem Datums- und Uhrzeitformat auf der ICU. Beispiel: var formatter3 = new google.visualization.DateFormat({pattern: "EEE, MMM d, ''yy"});

    Sie können nicht sowohl formatType als auch pattern angeben. Weitere Details zu Mustern finden Sie im nächsten Abschnitt.

    timeZone Die Zeitzone, in der der Datumswert angezeigt werden soll. Dies ist ein numerischer Wert, der GMT + diese Anzahl von Zeitzonen angibt (kann negativ sein). Datumsobjekte werden standardmäßig mit der Zeitzone des Computers erstellt, auf dem sie erstellt wurden. Mit dieser Option wird der Wert in einer anderen Zeitzone angezeigt. Wenn Sie beispielsweise ein Datumsobjekt mit 17:00 Uhr auf einem Computer in Greenwich, England, erstellt und für die Zeitzone -5 angegeben haben (options['timeZone'] = -5 oder Eastern Pacific Time in den USA), wird als Wert 12 Uhr angezeigt.

    Methoden

    DateFormat unterstützt die folgenden Methoden:

    Methode Beschreibung
    google.visualization.DateFormat(options)

    Konstruktor. Weitere Informationen finden Sie oben im Abschnitt zu den Optionen.

    format(dataTable, columnIndex) Die Standardmethode format(), um Formatierungen auf die angegebene Spalte anzuwenden.
    formatValue(value)

    Gibt den formatierten Wert eines bestimmten Werts zurück. Für diese Methode ist kein DataTable erforderlich.

    Beispielcode

    function drawDateFormatTable() {
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Employee Name');
      data.addColumn('date', 'Start Date (Long)');
      data.addColumn('date', 'Start Date (Medium)');
      data.addColumn('date', 'Start Date (Short)');
      data.addRows([
        ['Mike', new Date(2008, 1, 28, 0, 31, 26),
                 new Date(2008, 1, 28, 0, 31, 26),
                 new Date(2008, 1, 28, 0, 31, 26)],
        ['Bob', new Date(2007, 5, 1, 0),
                new Date(2007, 5, 1, 0),
                new Date(2007, 5, 1, 0)],
        ['Alice', new Date(2006, 7, 16),
                  new Date(2006, 7, 16),
                  new Date(2006, 7, 16)]
      ]);
    
      // Create three formatters in three styles.
      var formatter_long = new google.visualization.DateFormat({formatType: 'long'});
      var formatter_medium = new google.visualization.DateFormat({formatType: 'medium'});
      var formatter_short = new google.visualization.DateFormat({formatType: 'short'});
    
      // Reformat our data.
      formatter_long.format(data, 1);
      formatter_medium.format(data,2);
      formatter_short.format(data, 3);
    
      // Draw our data
      var table = new google.visualization.Table(document.getElementById('dateformat_div'));
      table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
    }

    Weitere Informationen zu Datumsmustern

    Weitere Informationen zu den unterstützten Mustern:

    Die Muster ähneln dem Datums- und Uhrzeitformat auf der ICU, die folgenden Muster werden jedoch noch nicht unterstützt: A e D F g Y u w W. Um Konflikte mit Mustern zu vermeiden, sollte jeder Literaltext, der in der Ausgabe angezeigt werden soll, in einfache Anführungszeichen gesetzt werden.Eine Ausnahme bilden einfache Anführungszeichen, die verdoppelt werden sollten. Beispiel: "K 'o''clock.'".

    Muster Beschreibung Beispielausgabe
    GG Ära-Bezeichner. "Anzeige"
    yy oder yyyy Jahr. 1996
    M

    Monat im Jahr. Für Januar:

    • M produziert 1
    • MM produziert 01
    • MMM produziert Januar
    • MMMM produziert Januar

    „Juli“

    „07“

    t Tag im Monat. Zusätzliche „d“-Werte addieren führende Nullen. 10
    Std. Stunde im 12-Stunden-Skala. Zu zusätzlichen „h“-Werten werden führende Nullen addiert. 12
    H Stunde im 24-Stunden-Format. Zu den zusätzlichen Hk-Werten werden führende Nullen addiert. 0
    m Minute in Stunde. Zu zusätzlichen „M“-Werten werden führende Nullen addiert. 30
    s Sekunde in Minute. Zusätzliche „s“-Werte addieren führende Nullen. 55
    S Sekundenbruchteile Zusätzliche 'S'-Werte werden rechts mit Nullen aufgefüllt. 978
    E

    Wochentag. Folgende Ausgaben für "Dienstag":

    • E erzeugt T.
    • EE oder EEE Produzieren Di oder Di
    • EEEE produziert am Dienstag

    „Di“

    „Dienstag“

    aa AM/PM „PM“
    k Stunde (1~24). Zu zusätzlichen „k“-Werten werden führende Nullen addiert. 24
    K Stunde in AM/PM (0~11). Zu zusätzlichen „k“-Werten werden führende Nullen addiert. 0
    z

    Zeitzone Für Zeitzone 5 wird „UTC+5“ ausgegeben.

    „UTC+5“
    Z

    Zeitzone im RFC 822-Format. Für die Zeitzone -5:

    Z, ZZ, ZZZ produzieren -0500

    ZZZZ und andere produzieren „GMT -05:00“

    „-0800“

    „GMT -05:00“

    v

    Zeitzone (generisch)

    „ usw./GMT-5“
    ' Esc-Taste für Text 'Datum='
    '' Einfaches Anführungszeichen „jj“

    NumberFormat

    Beschreibt, wie numerische Spalten formatiert werden sollten. Zu den Formatierungsoptionen gehören die Angabe eines Präfixsymbols (z. B. ein Dollarzeichen) oder des Satzzeichens, das als Tausendertrennzeichen verwendet werden soll.

    Optionen

    NumberFormat unterstützt die folgenden Optionen, die an den Konstruktor übergeben werden:

    Wahltaste Beschreibung
    decimalSymbol

    Ein Zeichen, das als Dezimalmarkierung verwendet wird. Der Standardwert ist ein Punkt (.).

    fractionDigits

    Zahl, die angibt, wie viele Ziffern nach dem Dezimaltrennzeichen angezeigt werden. Der Standardwert ist 2. Wenn Sie mehr Ziffern angeben, als die Zahl enthält, werden für die kleineren Werte Nullen angezeigt. Abgeschnittene Werte werden gerundet (5 aufgerundet).

    groupingSymbol Ein Zeichen, mit dem die Ziffern links vom Dezimaltrennzeichen in Dreiersätze gruppiert werden. Der Standardwert ist ein Komma (,).
    negativeColor Die Textfarbe für negative Werte. Kein Standardwert. Die Werte können jeder akzeptable HTML-Farbwert wie „red“ oder „#FF0000“ sein.
    negativeParens Ein boolescher Wert, wobei „true“ angibt, dass negative Werte in Klammern gesetzt werden sollen. Standardwert ist True.
    pattern

    Ein Formatstring. Alle anderen Optionen mit Ausnahme von negativeColor werden ignoriert.

    Der Formatstring ist eine Teilmenge des ICU-Mustersatzes . {pattern:'#,###%'} führt beispielsweise zu den Ausgabewerten "1.000%", "750%" und "50%" für die Werte 10, 7,5 und 0,5.

    prefix Ein Stringpräfix für den Wert, z. B. "$".
    suffix Ein Stringsuffix für den Wert, z. B. „%“.

    Methoden

    NumberFormat unterstützt die folgenden Methoden:

    Methode Beschreibung
    google.visualization.NumberFormat(options)

    Konstruktor. Weitere Informationen finden Sie oben im Abschnitt zu den Optionen.

    format(dataTable, columnIndex) Die Standardmethode format(), um Formatierungen auf die angegebene Spalte anzuwenden.
    formatValue(value)

    Gibt den formatierten Wert eines bestimmten Werts zurück. Diese Methode erfordert keine DataTable.

    Beispielcode

    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Department');
    data.addColumn('number', 'Revenues');
    data.addRows([
      ['Shoes', 10700],
      ['Sports', -15400],
      ['Toys', 12500],
      ['Electronics', -2100],
      ['Food', 22600],
      ['Art', 1100]
    ]);
    
    var table = new google.visualization.Table(document.getElementById('numberformat_div'));
    
    var formatter = new google.visualization.NumberFormat(
        {prefix: '$', negativeColor: 'red', negativeParens: true});
    formatter.format(data, 1); // Apply formatter to second column
    
    table.draw(data, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});

    PatternFormat

    Hiermit können Sie die Werte bestimmter Spalten zusammen mit beliebigem Text in einer einzigen Spalte zusammenführen. Wenn Sie beispielsweise eine Spalte für Vornamen und eine Spalte für Nachnamen haben, könnten Sie eine dritte Spalte mit {last name}, {first name}, füllen. Diese Formatierer folgen nicht den Konventionen für den Konstruktor und die Methode format(). Eine Anleitung finden Sie im Abschnitt "Methoden" weiter unten.

    Methoden

    PatternFormat unterstützt die folgenden Methoden:

    Methode Beschreibung
    google.visualization.PatternFormat(pattern)

    Konstruktor. Verwendet kein Optionsobjekt. Stattdessen wird ein Stringparameter pattern verwendet. Dies ist ein String, der beschreibt, welche Spaltenwerte zusammen mit beliebigem Text in die Zielspalte eingegeben werden sollen. Betten Sie Platzhalter in Ihren String ein, um einen Wert aus einer anderen Spalte anzugeben, der eingebettet werden soll. Die Platzhalter sind {#}, wobei # der Index einer zu verwendenden Quellspalte ist. Der Index ist ein Index im Array srcColumnIndices der folgenden format()-Methode. Wenn Sie ein Literalzeichen { oder } einschließen möchten, müssen Sie es wie folgt maskieren: \{ oder \}. Um ein \-Zeichen einzuschließen, müssen Sie es als \\ verwenden.

    Beispielcode

    Das folgende Beispiel zeigt einen Konstruktor für ein Muster, mit dem ein Ankerelement erstellt wird, wobei das erste und das zweite Element aus der Methode format() übernommen werden:

    var formatter = new google.visualization.PatternFormat(
      '<a href="mailto:{1}">{0}</a>');
    format(dataTable, srcColumnIndices, opt_dstColumnIndex)

    Standardformatierungsaufruf mit einigen zusätzlichen Parametern:

    • dataTable – DataTable, an der der Vorgang ausgeführt werden soll.
    • srcColumnIndices: Ein Array mit einem oder mehreren (nullbasierten) Spaltenindexen, die als Quellen aus der zugrunde liegenden DataTable abgerufen werden sollen. Diese wird als Datenquelle für den Parameter pattern im Konstruktor verwendet. Die Spaltennummern müssen nicht in sortierter Reihenfolge angegeben werden.
    • opt_dstColumnIndex – [optional] Die Zielspalte für die Ausgabe der pattern-Manipulation. Wenn nicht angegeben, wird das erste Element in srcColumIndices als Ziel verwendet.

    Die Formatierungsbeispiele finden Sie im Anschluss an die Tabelle.

    Hier sind einige Beispiele für Ein- und Ausgaben für eine vierspaltige Tabelle.

    Row before formatting (4 columns, last is blank):
    John  |  Paul  |  Jones  |  [empty]
    
    var formatter = new google.visualization.PatternFormat("{0} {1} {2}");
    formatter.format(data, [0,1,2], 3);
    Output:
      John  |  Paul  |  Jones  |  John Paul Jones
    
    var formatter = new google.visualization.PatternFormat("{1}, {0}");
    formatter.format(data, [0,2], 3);
    Output:
      John  |  Paul  |  Jones  |  Jones, John

    Beispielcode

    Das folgende Beispiel zeigt, wie Daten aus zwei Spalten zu einer E-Mail-Adresse kombiniert werden können. Dabei wird ein DataView-Objekt verwendet, um die ursprünglichen Quellspalten auszublenden:

    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('string', 'Email');
    data.addRows([
      ['John Lennon', 'john@beatles.co.uk'],
      ['Paul McCartney', 'paul@beatles.co.uk'],
      ['George Harrison', 'george@beatles.co.uk'],
      ['Ringo Starr', 'ringo@beatles.co.uk']
    ]);
    
    var table = new google.visualization.Table(document.getElementById('patternformat_div'));
    
    var formatter = new google.visualization.PatternFormat(
        '<a href="mailto:{1}">{0}</a>');
    // Apply formatter and set the formatted value of the first column.
    formatter.format(data, [0, 1]);
    
    var view = new google.visualization.DataView(data);
    view.setColumns([0]); // Create a view with the first column only.
    
    table.draw(view, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});

    GadgetHelper

    Eine Hilfsklasse zum Vereinfachen des Schreibens von Gadgets, die die Google Visualization API verwenden.

    Konstruktor

    google.visualization.GadgetHelper()

    Methoden

    Methode Rückgabewert Beschreibung
    createQueryFromPrefs(prefs) google.visualization.Query Statisch. Erstellen Sie eine neue Instanz von google.visualization.Query und legen Sie die Attribute gemäß den Werten aus den Einstellungen des Gadgets fest. Der Typ des Parameters prefs ist _IG_Prefs.
    1. _table_query_url wird bevorzugt, um die URL der Datenquelle für die Abfrage festzulegen.
    2. _table_query_refresh_interval wird bevorzugt verwendet, um das Aktualisierungsintervall für Abfragen (in Sekunden) festzulegen.
    validateResponse(response) Boolesch Statisch. Der Parameter response ist vom Typ google.visualization.QueryResponse. Gibt true zurück, wenn die Antwort Daten enthält. Gibt false zurück, wenn die Abfrageausführung fehlgeschlagen ist und die Antwort keine Daten enthält. Wenn ein Fehler aufgetreten ist, zeigt diese Methode eine Fehlermeldung an.

    Abfrageklassen

    Mit den folgenden Objekten können Datenabfragen an eine externe Datenquelle wie Google Tabellen gesendet werden.

    • Abfrage – umschließt die ausgehende Datenanfrage.
    • QueryResponse – verarbeitet die Antwort von der Datenquelle.

    Abfrage

    Stellt eine Abfrage dar, die an eine Datenquelle gesendet wird.

    Konstruktor

    google.visualization.Query(dataSourceUrl, opt_options)

    Parameter

    dataSourceUrl
    [Erforderlich, String] URL, an die die Abfrage gesendet werden soll. Weitere Informationen zu Google Tabellen finden Sie in der Dokumentation zu Diagrammen und Tabellen.
    opt_options
    [Optional, Objekt] Eine Zuordnung der Optionen für die Anfrage. Hinweis : Wenn Sie auf eine eingeschränkte Datenquelle zugreifen, sollten Sie diesen Parameter nicht verwenden. Folgende Attribute werden unterstützt:
    • sendMethod - [Optional, String] Gibt die Methode an, die zum Senden der Abfrage verwendet werden soll. Wählen Sie einen der folgenden Stringwerte aus:
      • 'xhr': Senden der Abfrage mit XmlHttpRequest
      • 'scriptInjection': Senden Sie die Abfrage mithilfe einer Skripteinschleusung.
      • 'makeRequest' – [Nur für Gadgets verfügbar, die verworfen wurden] Die Anfrage wird mithilfe der Gadgets API-Methode makeRequest() gesendet. Falls angegeben, sollten Sie auch makeRequestParams angeben.
      • 'auto': Die im URL-Parameter tqrt der Datenquellen-URL angegebene Methode wird verwendet. tqrt kann die folgenden Werte haben: „xhr“, „scriptInjection“ oder „makeRequest“. Wenn tqrt fehlt oder einen ungültigen Wert hat, ist der Standardwert für Anfragen innerhalb der Domain „xhr“ und für domainübergreifende Anfragen „scriptInjection“.
    • makeRequestParams – [Objekt] Eine Zuordnung von Parametern für eine makeRequest()-Abfrage. Wird nur verwendet und ist nur erforderlich, wenn sendMethod den Wert "makeRequest" hat.

    Methoden

    Methode Rückgabewert Beschreibung
    abort() Ohne Beendet das automatische Senden von Abfragen, das mit setRefreshInterval() gestartet wurde.
    setRefreshInterval(seconds) Ohne

    Legt die Abfrage so fest, dass die Methode send jede angegebene Dauer (Anzahl der Sekunden) automatisch aufgerufen wird, beginnend ab dem ersten expliziten Aufruf von send. seconds ist eine Zahl größer oder gleich null.

    Wenn Sie diese Methode verwenden, sollten Sie sie vor dem Aufrufen der send-Methode aufrufen.

    Brechen Sie diese Methode ab, indem Sie sie noch einmal mit null (Standardeinstellung) aufrufen oder abort() aufrufen.

    setTimeout(seconds) Ohne Legt fest, wie viele Sekunden auf die Antwort der Datenquelle gewartet werden soll, bevor ein Zeitüberschreitungsfehler ausgelöst wird. seconds ist eine Zahl größer als null.
    Das Standardzeitlimit beträgt 30 Sekunden. Falls diese Methode verwendet wird, sollte sie vor dem Aufrufen der Methode send aufgerufen werden.
    setQuery(string) Ohne Legt den Abfragestring fest. Der Wert des Parameters string sollte eine gültige Abfrage sein.
    Wenn diese Methode verwendet wird, sollte sie vor dem Aufrufen der Methode send aufgerufen werden. Weitere Informationen zur Abfragesprache
    send(callback) Ohne Sendet die Abfrage an die Datenquelle. callback sollte eine Funktion sein, die aufgerufen wird, wenn die Datenquelle antwortet. Die Callback-Funktion empfängt einen einzelnen Parameter vom Typ google.visualization.QueryResponse.

    QueryResponse

    Eine Antwort auf eine Abfrageausführung, die von der Datenquelle empfangen wurde. Eine Instanz dieser Klasse wird als Argument an die Callback-Funktion übergeben, die beim Aufruf von Query.send festgelegt wurde.

    Methoden

    Methode Rückgabewert Beschreibung
    getDataTable() DataTable Gibt die von der Datenquelle zurückgegebene Datentabelle zurück. Gibt null zurück, wenn die Abfrageausführung fehlgeschlagen ist und keine Daten zurückgegeben wurden.
    getDetailedMessage() String Gibt eine detaillierte Fehlermeldung für fehlgeschlagene Abfragen zurück. Wenn die Abfrage erfolgreich ausgeführt wurde, gibt diese Methode einen leeren String zurück. Die zurückgegebene Nachricht ist für Entwickler bestimmt und kann technische Informationen enthalten, z. B. „Spalte {salary} existiert nicht“.
    getMessage() String Gibt eine kurze Fehlermeldung für fehlgeschlagene Abfragen zurück. Wenn die Abfrage erfolgreich ausgeführt wurde, gibt diese Methode einen leeren String zurück. Die zurückgegebene Nachricht ist eine kurze Nachricht für Endnutzer, z. B. „Ungültige Abfrage“ oder „Zugriff verweigert“.
    getReasons() Stringarray Gibt ein Array von null oder mehr Einträgen zurück. Jeder Eintrag ist ein kurzer String mit einem Fehler- oder Warncode, der beim Ausführen der Abfrage ausgelöst wurde. Mögliche Codes:
    • access_denied Der Nutzer hat keine Zugriffsberechtigung für die Datenquelle.
    • invalid_query Die angegebene Abfrage weist einen Syntaxfehler auf.
    • data_truncated Eine oder mehrere Datenzeilen, die der Abfrageauswahl entsprechen, wurden aufgrund von Größenbeschränkungen für die Ausgabe nicht zurückgegeben. (Warnung).
    • timeout Die Anfrage hat nicht innerhalb der erwarteten Zeit geantwortet.
    hasWarning() Boolesch Gibt true zurück, wenn bei der Abfrageausführung Warnmeldungen angezeigt werden.
    isError() Boolesch Gibt true zurück, wenn die Abfrageausführung fehlgeschlagen ist und die Antwort keine Datentabelle enthält. Gibt <false> zurück, wenn die Abfrage erfolgreich ausgeführt wurde und die Antwort eine Datentabelle enthält.

    Fehleranzeige

    Die API bietet mehrere Funktionen, mit denen Sie Ihren Nutzern benutzerdefinierte Fehlermeldungen anzeigen können. Um diese Funktionen zu verwenden, musst du auf der Seite ein Containerelement (in der Regel ein <div>) angeben, in das die API eine formatierte Fehlermeldung eingibt. Dieser Container kann entweder das Visualisierungscontainerelement oder ein Container nur für Fehler sein. Wenn Sie das Visualisierungselement angeben, wird die Fehlermeldung über der Visualisierung angezeigt. Rufen Sie dann die entsprechende Funktion unten auf, um die Fehlermeldung anzuzeigen oder zu entfernen.

    Alle Funktionen sind statische Funktionen im Namespace google.visualization.errors.

    Viele Visualisierungen können ein Fehlerereignis ausgeben. Weitere Informationen dazu finden Sie im Abschnitt „Fehlerereignis“ weiter unten.

    Ein Beispiel für einen benutzerdefinierten Fehler finden Sie im Beispiel für den Abfrage-Wrapper.

    Funktion Rückgabewert Beschreibung
    addError(container, message, opt_detailedMessage, opt_options) String-ID-Wert, der das erstellte Fehlerobjekt identifiziert. Dies ist ein eindeutiger Wert auf der Seite, mit dem der Fehler entfernt oder das enthaltene Element ermittelt werden kann.

    Fügt dem angegebenen Seitenelement einen Fehleranzeigeblock mit dem angegebenen Text und der angegebenen Formatierung hinzu.

    • container – Das DOM-Element, in das die Fehlermeldung eingefügt werden soll. Wenn der Container nicht gefunden wird, gibt die Funktion einen JavaScript-Fehler aus.
    • message – Eine Stringnachricht, die angezeigt werden soll.
    • opt_detailedMessage – ein optionaler detaillierter Nachrichtenstring. Standardmäßig handelt es sich dabei um Mouseover-Text, der jedoch mit der unten beschriebenen Eigenschaft opt_options.showInToolTip geändert werden kann.
    • opt_options – Ein optionales Objekt mit Eigenschaften, mit denen verschiedene Anzeigeoptionen für die Nachricht festgelegt werden. Folgende Optionen werden unterstützt:
      • showInTooltip: Ein boolescher Wert, bei dem „true“ die detaillierte Nachricht nur als Text für Kurzinfos und „false“ die detaillierte Nachricht im Containertext nach der kurzen Nachricht anzeigt. Der Standardwert ist "true".
      • type: Ein String, der den Fehlertyp beschreibt. Damit wird bestimmt, welche CSS-Stile auf die Nachricht angewendet werden sollen. Die unterstützten Werte sind „error“ und „warning“. Der Standardwert ist „Fehler“.
      • style – Ein Stilstring für die Fehlermeldung. Dieser Stil überschreibt alle Stile, die auf den Warntyp (opt_options.type) angewendet werden. Beispiel: 'background-color: #33ff99; padding: 2px;' Der Standardwert ist ein leerer String.
      • removable: ein boolescher Wert, wobei „true“ bedeutet, dass die Nachricht durch einen Mausklick des Nutzers geschlossen werden kann. Der Standardwert ist "false".
    addErrorFromQueryResponse(container, response)

    String-ID-Wert, der das erstellte Fehlerobjekt identifiziert, oder null, wenn in der Antwort kein Fehler angegeben wurde. Dies ist ein eindeutiger Wert auf der Seite, mit dem der Fehler entfernt oder das enthaltene Element ermittelt werden kann.

    Übergeben Sie einen Abfrageantwort- und Fehlermeldungscontainer an diese Methode: Wenn die Abfrageantwort auf einen Abfragefehler hinweist, wird im angegebenen Seitenelement eine Fehlermeldung angezeigt. Wenn die Abfrageantwort null ist, gibt die Methode einen JavaScript-Fehler aus. Übergeben Sie die in Ihrem Abfrage-Handler erhaltene QueryResponse an diese Nachricht, um einen Fehler anzuzeigen. Außerdem wird der Stil der Anzeige entsprechend dem Typ festgelegt (Fehler oder Warnung, ähnlich wie bei addError(opt_options.type)).

    • container – Das DOM-Element, in das die Fehlermeldung eingefügt werden soll. Wenn der Container nicht gefunden wird, gibt die Funktion einen JavaScript-Fehler aus.
    • response: Ein QueryResponse-Objekt, das von Ihrem Abfrage-Handler als Antwort auf eine Abfrage empfangen wurde. Wenn dieser Wert null ist, gibt die Methode einen JavaScript-Fehler aus.
    removeError(id) Boolescher Wert: "true", wenn der Fehler entfernt wurde; andernfalls "false".

    Entfernt den durch die ID angegebenen Fehler von der Seite.

    • id – String-ID eines Fehlers, der mit addError() oder addErrorFromQueryResponse() erstellt wurde.
    removeAll(container) Ohne

    Entfernt alle Fehlerblöcke aus einem angegebenen Container. Wenn der angegebene Container nicht vorhanden ist, wird ein Fehler ausgegeben.

    • container – das DOM-Element mit den zu entfernenden Fehlerstrings Wenn der Container nicht gefunden wird, gibt die Funktion einen JavaScript-Fehler aus.
    getContainer(errorId) Handle zu einem DOM-Element, das den angegebenen Fehler enthält, oder null, wenn es nicht gefunden wurde.

    Ruft ein Handle für das Containerelement ab, das den durch errorID angegebenen Fehler enthält.

    • errorId – String-ID eines Fehlers, der mit addError() oder addErrorFromQueryResponse() erstellt wurde.

    Ereignisse

    Die meisten Visualisierungen lösen Ereignisse aus, um anzuzeigen, dass etwas passiert ist. Als Nutzer des Diagramms möchten Sie häufig auf diese Ereignisse warten. Wenn Sie Ihre eigene Visualisierung codieren, können Sie solche Ereignisse auch selbst auslösen.

    Mit den folgenden Methoden können Entwickler auf Ereignisse warten, vorhandene Event-Handler entfernen oder Ereignisse in einer Visualisierung auslösen.

    addListener()

    Rufen Sie diese Methode auf, um sich für den Empfang von Ereignissen zu registrieren, die von einer auf Ihrer Seite gehosteten Visualisierung ausgelöst werden. Sie sollten dokumentieren, welche Ereignisargumente gegebenenfalls an die Verarbeitungsfunktion übergeben werden.

    google.visualization.events.addListener(source_visualization,
      event_name, handling_function)
    source_visualization
    Ein Handle für die Quellvisualisierungsinstanz.
    event_name
    Der Stringname des Ereignisses, auf das gewartet werden soll. In einer Visualisierung sollte dokumentiert werden, welche Ereignisse ausgelöst werden.
    handling_function
    Der Name der lokalen JavaScript-Funktion, die aufgerufen werden soll, wenn „source_visualization“ das Ereignis „event_name“ auslöst. An die Verarbeitungsfunktion werden alle Ereignisargumente als Parameter übergeben.

    Rückgabe

    Ein Listener-Handler für den neuen Listener. Mit dem Handler kann dieser Listener später bei Bedarf durch Aufrufen von google.visualization.events.removeListener() entfernt werden.

    Beispiel

    Hier ist ein Beispiel für die Registrierung für die Teilnahme an der Auswahlveranstaltung

    var table = new google.visualization.Table(document.getElementById('table_div'));
    table.draw(data, options);
    
    google.visualization.events.addListener(table, 'select', selectHandler);
    
    function selectHandler() {
      alert('A table row was selected');
    }

    addOneTimeListener()

    Dies ist identisch mit addListener(), ist aber für Ereignisse vorgesehen, die nur einmal überwacht werden sollen. Nachfolgende Auslösen des Ereignisses rufen die Verarbeitungsfunktion nicht auf.

    Ein Beispiel hierfür: Bei jeder Zeichnung wird ein ready-Ereignis ausgelöst. Wenn nur die erste ready Ihren Code ausführen soll, sollten Sie addOneTimeListener anstelle von addListener verwenden.

    removeListener()

    Rufen Sie diese Methode auf, um die Registrierung eines vorhandenen Ereignis-Listeners aufzuheben.

    google.visualization.events.removeListener(listener_handler)
    listener_handler
    Der zu entfernende Listener-Handler, wie von google.visualization.events.addListener() zurückgegeben.

    removeAllListeners()

    Rufen Sie diese Methode auf, um die Registrierung aller Event-Listener einer bestimmten Visualisierungsinstanz aufzuheben.

    google.visualization.events.removeAllListeners(source_visualization)
    source_visualization
    Ein Handle für die Quellvisualisierungsinstanz, aus der alle Ereignis-Listener entfernt werden sollen.

    trigger()

    Wird von Implementern für Visualisierungen aufgerufen. Rufen Sie diese Methode aus Ihrer Visualisierung auf, um ein Ereignis mit einem beliebigen Namen und einer Gruppe von Werten auszulösen.

    google.visualization.events.trigger(source_visualization, event_name,
      event_args)
    source_visualization
    Ein Handle für die Quellvisualisierungsinstanz. Wenn Sie diese Funktion innerhalb einer Methode aufrufen, die von der sendenden Visualisierung definiert ist, können Sie einfach das Schlüsselwort this übergeben.
    event_name
    Ein Stringname zum Aufrufen des Ereignisses. Sie können einen beliebigen Stringwert auswählen.
    event_args
    [optional] Eine Zuordnung von Name/Wert-Paaren, die an die empfangende Methode übergeben werden sollen. Beispiel: {message: „Hello there!“, Wert: 10, name: "Fred"}. Sie können null übergeben, wenn keine Ereignisse erforderlich sind. Der Empfänger sollte in der Lage sein, Null für diesen Parameter zu akzeptieren.

    Beispiel

    Hier sehen Sie ein Beispiel für eine Visualisierung, in der eine Methode namens „select“ ausgelöst wird, wenn die zugehörige „onclick“-Methode aufgerufen wird. Dabei werden keine Werte zurückgegeben.

    MyVisualization.prototype.onclick = function(rowIndex) {
      this.highlightRow(this.selectedRow, false); // Clear previous selection
      this.highlightRow(rowIndex, true); // Highlight new selection
    
      // Save the selected row index in case getSelection is called.
      this.selectedRow = rowIndex;
    
      // Trigger a select event.
      google.visualization.events.trigger(this, 'select', null);
    }

    Standardvisualisierungsmethoden und -eigenschaften

    Jede Visualisierung sollte die folgenden erforderlichen und optionalen Methoden und Attribute enthalten. Beachten Sie jedoch, dass es keine Typprüfung zur Durchsetzung dieser Standards gibt. Daher sollten Sie die Dokumentation für jede Visualisierung lesen.

    Hinweis : Diese Methoden befinden sich im Namespace der Visualisierung, nicht im Namespace „google.visualization“.

    Konstruktor

    Der Konstruktor sollte den Namen der Visualisierungsklasse haben und eine Instanz dieser Klasse zurückgeben.

    visualization_class_name(dom_element)
    dom_element
    Ein Zeiger auf ein DOM-Element, in das die Visualisierung eingebettet werden soll.

    Beispiel

    var org = new google.visualization.OrgChart(document.getElementById('org_div')); 

    draw()

    Zeichnet die Visualisierung auf die Seite. Im Hintergrund kann dies zum Beispiel das Abrufen einer Grafik von einem Server oder das Erstellen der Grafik auf der Seite mithilfe des verknüpften Visualisierungscodes sein. Sie sollten diese Methode jedes Mal aufrufen, wenn sich die Daten oder Optionen ändern. Das Objekt sollte innerhalb des DOM-Elements gezeichnet werden, das an den Konstruktor übergeben wird.

    draw(data[, options])
    Daten
    Ein DataTable oder DataView mit den Daten, die zum Zeichnen des Diagramms verwendet werden sollen. Es gibt keine Standardmethode zum Extrahieren einer DataTable aus einem Diagramm.
    options
    [Optional] Eine Zuordnung von Name/Wert-Paaren benutzerdefinierter Optionen. Beispiele hierfür sind Höhe und Breite, Hintergrundfarben und Untertitel. In der Visualisierungsdokumentation sollten die verfügbaren Optionen aufgeführt sein. Wenn Sie diesen Parameter nicht angeben, sollten die Standardoptionen unterstützt werden. Sie können die JavaScript-Objektliteralsyntax verwenden, um eine Optionszuordnung zu übergeben, z.B. {x:100, y:200, title:'An Example'}

    Beispiel

    chart.draw(myData, {width: 400, height: 240, is3D: true, title: 'My Daily Activities'});

    getAction()

    Dies wird optional durch Visualisierungen angezeigt, die Kurzinfos haben und Aktionen für Kurzinfos ermöglichen.

    Gibt das Kurzinfo-Aktionsobjekt mit dem angeforderten actionID zurück.

    Example:

    // Returns the action object with the ID 'alertAction'.
    chart.getAction('alertAction');

    getSelection()

    Diese wird optional durch Visualisierungen dargestellt, mit denen Sie auf die aktuell ausgewählten Daten in der Grafik zugreifen können.

    selection_array getSelection()

    Rückgabe

    selection_array: Ein Array ausgewählter Objekte, von denen jedes ein Datenelement in der zugrunde liegenden Tabelle beschreibt, die zum Erstellen der Visualisierung verwendet wird (DataView oder DataTable). Jedes Objekt hat die Attribute row und/oder column mit dem Index der Zeile und/oder Spalte des ausgewählten Elements in der zugrunde liegenden DataTable. Wenn das Attribut row null ist, ist die Auswahl eine Spalte. Ist das Attribut column null, ist die Auswahl eine Zeile. Sind beide nicht null, ist es ein bestimmtes Datenelement. Sie können die Methode DataTable.getValue() aufrufen, um den Wert des ausgewählten Elements abzurufen. Das abgerufene Array kann an setSelection() übergeben werden.

    Beispiel

    function myClickHandler(){
      var selection = myVis.getSelection();
      var message = '';
    
      for (var i = 0; i < selection.length; i++) {
        var item = selection[i];
        if (item.row != null && item.column != null) {
          message += '{row:' + item.row + ',column:' + item.column + '}';
        } else if (item.row != null) {
          message += '{row:' + item.row + '}';
        } else if (item.column != null) {
          message += '{column:' + item.column + '}';
        }
      }
      if (message == '') {
        message = 'nothing';
      }
      alert('You selected ' + message);
    }

    removeAction()

    Dies wird optional durch Visualisierungen angezeigt, die Kurzinfos haben und Aktionen für Kurzinfos ermöglichen.

    Entfernt das Kurzinfo-Aktionsobjekt mit dem angeforderten actionID aus Ihrem Diagramm.

    Example:

    // Removes an action from chart with the ID of 'alertAction'.
    chart.removeAction('alertAction');

    setAction()

    Dies wird optional durch Visualisierungen angezeigt, die Kurzinfos haben und Aktionen für Kurzinfos ermöglichen. Dies funktioniert nur für Kerndiagramme (Balken-, Säulen-, Linien-, Flächen-, Streu-, Kombinations-, Blasen-, Kreis-, Ring-, Kerzendiagramme, Histogramme, Stufen-Flächen).

    Legt eine Kurzinfo-Aktion fest, die ausgeführt werden soll, wenn der Nutzer auf den Aktionstext klickt.

    setAction(action object)

    Die Methode setAction verwendet ein Objekt als Aktionsparameter. Für dieses Objekt müssen drei Attribute angegeben werden: id für die ID der festgelegten Aktion, text für den Text, der in der Kurzinfo für die Aktion angezeigt werden soll, und action für die Funktion, die ausgeführt wird, wenn ein Nutzer auf den Aktionstext klickt.

    Alle Kurzinfo-Aktionen sollten vor dem Aufrufen der draw()-Methode des Diagramms festgelegt werden.

    Example:

    // Sets a tooltip action which will pop an alert box on the screen when triggered.
    chart.setAction({
      id: 'alertAction',
      text: 'Trigger Alert',
      action: function() {
        alert('You have triggered an alert');
      }
    });

    Mit der Methode setAction können auch zwei zusätzliche Attribute definiert werden: visible und enabled. Diese Attribute sollten Funktionen sein, die boolean-Werte zurückgeben, die angeben, ob die Kurzinfo-Aktion sichtbar und/oder aktiviert ist.

    Example:

    // The visible/enabled functions can contain any logic to determine their state
    // as long as they return boolean values.
    chart.setAction({
      id: 'alertAction',
      text: 'Trigger Alert',
      action: function() {
        alert('You have triggered an alert');
      },
      visible: function() {
        return true;
      },
      enabled: function() {
        return true;
      }
    });

    setSelection()

    Wählt optional einen Dateneintrag in der Visualisierung aus, z. B. einen Punkt in einem Flächendiagramm oder einen Balken in einem Balkendiagramm. Wenn diese Methode aufgerufen wird, sollte in der Visualisierung visuell dargestellt werden, um welche neue Auswahl es sich handelt. Durch die Implementierung von setSelection() sollte kein „select“-Ereignis ausgelöst werden. In Visualisierungen wird möglicherweise ein Teil der Auswahl ignoriert. Beispielsweise kann eine Tabelle, die nur ausgewählte Zeilen enthalten kann, Zellen- oder Spaltenelemente in ihrer setSelection()-Implementierung ignorieren oder die gesamte Zeile auswählen.

    Bei jedem Aufruf dieser Methode wird die Auswahl aller ausgewählten Elemente aufgehoben und die neue übergebene Auswahlliste wird angewendet. Es gibt keine explizite Möglichkeit, die Auswahl einzelner Elemente aufzuheben. Wenn Sie die Auswahl einzelner Elemente aufheben möchten, rufen Sie setSelection() mit den Elementen auf, die ausgewählt bleiben. Wenn Sie die Auswahl aller Elemente aufheben möchten, rufen Sie setSelection(), setSelection(null) oder setSelection([]) auf.

    setSelection(selection_array)
    selection_array
    Ein Array von Objekten, die jeweils ein numerisches Zeilen- und/oder Spaltenattribut haben. row und column sind die nullbasierte Zeilen- oder Spaltennummer eines auszuwählenden Elements in der Datentabelle. Wenn Sie eine ganze Spalte auswählen möchten, setzen Sie row auf null. Wenn Sie eine ganze Zeile auswählen möchten, setzen Sie column auf null. Beispiel: Mit setSelection([{row:0,column:1},{row:1, column:null}]) werden die Zelle bei (0,1) und die gesamte Zeile 1 ausgewählt.

    Verschiedene statische Methoden

    Dieser Abschnitt enthält verschiedene nützliche Methoden, die im Namespace google.visualization verfügbar gemacht werden.

    arrayToDataTable()

    Diese Methode verwendet ein zweidimensionales Array und wandelt es in eine DataTable um.

    Die Datentypen der Spalten werden automatisch anhand der bereitgestellten Daten bestimmt. Spaltendatentypen können auch mit der Objektliteral-Notation in der ersten Zeile (der Zeile mit den Spaltenüberschriften) des Arrays angegeben werden (z.B. {label: 'Start Date', type: 'date'}). Optionale Datenrollen können ebenfalls verwendet werden, müssen jedoch explizit mit der Objektliteralnotation definiert werden. Die Objektliteral-Notation kann auch für jede Zelle verwendet werden, sodass Sie Zellenobjekte definieren können.

    Syntax

    google.visualization.arrayToDataTable(twoDArray, opt_firstRowIsData)
    twoDArray
    Ein zweidimensionales Array, wobei jede Zeile für eine Zeile in der Datentabelle steht. Wenn opt_firstRowIsData auf „false“ gesetzt ist (Standardeinstellung), wird die erste Zeile als Kopfzeilenlabels interpretiert. Die Datentypen der einzelnen Spalten werden automatisch aus den gegebenen Daten interpretiert. Wenn eine Zelle keinen Wert hat, geben Sie einen Null- oder leeren Wert an.
    opt_firstRowIsData
    Gibt an, ob die erste Zeile eine Kopfzeile definiert. Falls wahr, wird angenommen, dass es sich bei allen Zeilen um Daten handelt. Bei „false“ wird davon ausgegangen, dass die erste Zeile eine Kopfzeile ist. Die Werte werden als Spaltenlabels zugewiesen. Der Standardwert ist „false“.

    Rückgabe

    Ein neues DataTable.

    Beispiele

    Der folgende Code zeigt drei Möglichkeiten zum Erstellen desselben DataTable-Objekts:

    // Version 1: arrayToDataTable method
    var data2 = google.visualization.arrayToDataTable([
      [{label: 'Country', type: 'string'},
       {label: 'Population', type: 'number'},
       {label: 'Area', type: 'number'},
       {type: 'string', role: 'annotation'}],
      ['CN', 1324, 9640821, 'Annotated'],
      ['IN', 1133, 3287263, 'Annotated'],
      ['US', 304, 9629091, 'Annotated'],
      ['ID', 232, 1904569, 'Annotated'],
      ['BR', 187, 8514877, 'Annotated']
    ]);
    
    // Version 2: DataTable.addRows
    var data3 = new google.visualization.DataTable();
    data3.addColumn('string','Country');
    data3.addColumn('number','Population');
    data3.addColumn('number','Area');
    data3.addRows([
      ['CN', 1324, 9640821],
      ['IN', 1133, 3287263],
      ['US', 304, 9629091],
      ['ID', 232, 1904569],
      ['BR', 187, 8514877]
    ]);
    
    // Version 3: DataTable.setValue
    var data = new google.visualization.DataTable();
    data.addColumn('string','Country');
    data.addColumn('number', 'Population');
    data.addColumn('number', 'Area');
    data.addRows(5);
    data.setValue(0, 0, 'CN');
    data.setValue(0, 1, 1324);
    data.setValue(0, 2, 9640821);
    data.setValue(1, 0, 'IN');
    data.setValue(1, 1, 1133);
    data.setValue(1, 2, 3287263);
    data.setValue(2, 0, 'US');
    data.setValue(2, 1, 304);
    data.setValue(2, 2, 9629091);
    data.setValue(3, 0, 'ID');
    data.setValue(3, 1, 232);
    data.setValue(3, 2, 1904569);
    data.setValue(4, 0, 'BR');
    data.setValue(4, 1, 187);
    data.setValue(4, 2, 8514877);

    drawChart()

    Mit dieser Methode wird in einem einzelnen Aufruf ein Diagramm erstellt. Der Vorteil dieser Methode besteht darin, dass sie etwas weniger Code erfordert. Außerdem können Sie Visualisierungen zur Wiederverwendung als Textstrings serialisieren und speichern. Diese Methode gibt keinen Handle für das erstellte Diagramm zurück. Daher können Sie keine Methoden-Listener zuweisen, um Diagrammereignisse abzufangen.

    Syntax

    google.visualization.drawChart(chart_JSON_or_object)
    chart_JSON_or_object
    Entweder ein JSON-Literalstring oder ein JavaScript-Objekt mit den folgenden Attributen (unter Berücksichtigung der Groß- und Kleinschreibung):
    Attribut Typ Erforderlich Standard Beschreibung
    chartType String Erforderlich keine Der Klassenname der Visualisierung. Der Paketname google.visualization kann für Google-Diagramme weggelassen werden. Wenn die entsprechende Visualisierungsbibliothek noch nicht geladen wurde, wird sie über diese Methode geladen, falls es sich um eine Google-Visualisierung handelt. Sie müssen Visualisierungen von Drittanbietern explizit laden. Beispiele: Table, PieChart, example.com.CrazyChart.
    containerId String Erforderlich keine Die ID des DOM-Elements auf Ihrer Seite, auf dem die Visualisierung gehostet wird.
    Optionen Objekt Optional keine Ein Objekt, das die Optionen für die Visualisierung beschreibt. Sie können entweder die JavaScript-Literal-Notation verwenden oder ein Handle für das Objekt angeben. Beispiel: "options": {"width": 400, "height": 240, "is3D": true, "title": "Company Performance"}
    dataTable Objekt Optional Ohne Ein DataTable, der zum Füllen der Visualisierung verwendet wird. Dies kann eine literale JSON-Stringdarstellung einer DataTable, wie oben beschrieben, oder ein Handle für ein ausgefülltes google.visualization.DataTable-Objekt oder ein zweidimensionales Array wie das von arrayToDataTable(opt_firstRowIsData=false) akzeptierte sein. Du musst entweder dieses Attribut oder das Attribut dataSourceUrl angeben.
    dataSourceUrl String Optional Ohne Eine Datenquellenabfrage zum Füllen der Diagrammdaten (z. B. eine Google-Tabelle). Sie müssen entweder dieses Attribut oder das Attribut dataTable angeben.
    Abfrage String Optional Ohne Bei Angabe von dataSourceUrl können Sie optional mit der Abfragesprache für die Visualisierung einen SQL-ähnlichen Abfragestring angeben, um die Daten zu filtern oder zu bearbeiten.
    refreshInterval Zahl Optional Ohne Wie oft in Sekunden die Abfragequelle der Visualisierung aktualisiert werden soll. Verwenden Sie dies nur, wenn Sie dataSourceUrl angeben.
    Ansicht Objekt ODER Array Optional Ohne Legt ein DataView-Initialisierungsobjekt fest, das als Filter für die zugrunde liegenden Daten dient, wie durch den dataTable- oder dataSourceUrl-Parameter definiert. Sie können entweder einen String oder ein DataView-Initialisierungsobjekt übergeben, wie das von dataview.toJSON() zurückgegeben wird. Beispiel: "view": {"columns": [1, 2]} Sie können auch ein Array von DataView-Initialisierungsobjekten übergeben. In diesem Fall wird der erste DataView im Array auf die zugrunde liegenden Daten angewendet, um eine neue Datentabelle zu erstellen. Die zweite DataView wird auf die Datentabelle angewendet, die sich aus der Anwendung des ersten DataView ergibt, usw.

    Beispiele

    Erstellt ein Tabellendiagramm basierend auf der Datenquelle einer Tabellenkalkulation mit der Abfrage SELECT A,D WHERE D > 100 ORDER BY D

    <script type="text/javascript">
      google.charts.load('current');  // Note: No need to specify chart packages.
      function drawVisualization() {
        google.visualization.drawChart({
          "containerId": "visualization_div",
          "dataSourceUrl": "https://spreadsheets.google.com/a/google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1",
          "query":"SELECT A,D WHERE D > 100 ORDER BY D",
          "refreshInterval": 5,
          "chartType": "Table",
          "options": {
            "alternatingRowStyle": true,
            "showRowNumber" : true
          }
       });
     }
    google.charts.setOnLoadCallback(drawVisualization);
    </script>

    Im nächsten Beispiel wird dieselbe Tabelle, aber lokal ein DataTable erstellt:

    <script type='text/javascript'>
      google.charts.load('current');
      function drawVisualization() {
        var dataTable = [
          ["Country", "Population Density"],
          ["Indonesia", 117],
          ["China", 137],
          ["Nigeria", 142],
          ["Pakistan", 198],
          ["India", 336],
          ["Japan", 339],
          ["Bangladesh", 1045]
        ];
        google.visualization.drawChart({
          "containerId": "visualization_div",
          "dataTable": dataTable,
          "refreshInterval": 5,
          "chartType": "Table",
          "options": {
            "alternatingRowStyle": true,
            "showRowNumber" : true,
          }
        });
      }
      google.charts.setOnLoadCallback(drawVisualization);
    </script>

    In diesem Beispiel wird eine JSON-Stringdarstellung des Diagramms übergeben, die Sie möglicherweise aus einer Datei geladen haben:

    <script type="text/javascript">
      google.charts.load('current');
      var myStoredString = '{"containerId": "visualization_div",' +
        '"dataSourceUrl": "https://spreadsheets.google.com/a/google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1",' +
        '"query":"SELECT A,D WHERE D > 100 ORDER BY D",' +
        '"refreshInterval": 5,' +
        '"chartType": "Table",' +
        '"options": {' +
        '   "alternatingRowStyle": true,' +
        '   "showRowNumber" : true' +
        '}' +
      '}';
      function drawVisualization() {
        google.visualization.drawChart(myStoredString);
      }
      google.charts.setOnLoadCallback(drawVisualization);
    </script>

    drawToolbar()

    Dies ist der Konstruktor für das Symbolleistenelement, das an viele Visualisierungen angehängt werden kann. Mit dieser Symbolleiste können Nutzer die Visualisierungsdaten in verschiedene Formate exportieren oder eine einbettbare Version der Visualisierung zur Verwendung an verschiedenen Orten zur Verfügung stellen. Weitere Informationen und ein Codebeispiel findest du auf der Toolbar-Seite.