Referenz zur Google Visualisation API

Auf dieser Seite sind die von der Google Visualization API bereitgestellten Objekte und die von allen Visualisierungen bereitgestellten Standardmethoden aufgeführt.

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

1. DataTable-Klasse
2. DataView-Klasse
3. ChartWrapper-Klasse
4. ChartEditor-Klasse
5. Methoden zur Datenbearbeitung
   1. group()
   2. join()
6. Formatierer
   1. Pfeilformat
   2. BarFormat
   3. Farbformat
   4. Datumsformat
   5. Zahlenformat
   6. Musterformat
7. GadgetHelper-Klasse
8. Abfrageklassen
   1. Suchanfrage
   2. Suchantwort
9. Fehleranzeigeklasse
10. Ereignisse
    1. google.visualization.events.addListener()
    2. google.visualization.events.addOneTimeListener()
    3. google.visualization.events.removeListener()
    4. google.visualization.events.removeAllListeners().
    5. google.visualization.events.trigger()
11. Standardmethoden und -eigenschaften für die Visualisierung
    1. Konstruktor
    2. Draw()
    3. getAction()
    4. getSelection()
    5. removeAction()
    6. setAction()
    7. setSelection()
12. Verschiedene statische Methoden
    1. ArrayToDataTable()
    2. DrawChart()
    3. drawToolbar()

Hinweis zu Arrays

Einige Kommas in JavaScript-Arrays werden in einigen Browsern nicht richtig verarbeitet und sollten daher nicht verwendet werden. Leere Werte in der Mitte eines Arrays sind zulässig. 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

Eine zweidimensionale, veränderliche Tabelle mit Werten Erstellen Sie eine DataView, um eine schreibgeschützte Kopie einer DataTable zu erstellen (optional gefiltert, um bestimmte Werte, Zeilen oder Spalten anzuzeigen).

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

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

Weitere Informationen: QueryResponse.getDataTable

Konstruktor

Syntax

DataTable(opt_data, opt_version)

opt_data

[Optional] Daten, die zum Initialisieren der Tabelle verwendet werden. Dies kann entweder der JSON-Code sein, der durch Aufrufen von DataTable.toJSON() für eine Tabelle oder ein JavaScript-Objekt mit Daten zum Initialisieren der Tabelle zurückgegeben wird. Die Struktur des JavaScript-Literalobjekts wird hier beschrieben. Wenn dieser Parameter nicht angegeben ist, wird eine neue, leere Datentabelle zurückgegeben.

opt_version

[Optional] Ein numerischer Wert, der die Version des verwendeten Wire-Protokolls angibt. Dies wird nur von Data-Source-Implementierungstools von Chart Tools verwendet. Die aktuelle Version ist 0.6.

Details

Das Objekt DataTable wird verwendet, um die an eine Visualisierung übergebenen Daten zu speichern. DataTable ist eine einfache zweidimensionale Tabelle. Alle Daten in jeder Spalte müssen denselben Datentyp haben. Jede Spalte hat einen Deskriptor mit dem Datentyp, einem Label für die Spalte (das möglicherweise von einer Visualisierung angezeigt wird) und einer ID, mit der auf eine bestimmte Spalte verwiesen werden kann (anstelle der Verwendung von Spaltenindexen). Das DataTable-Objekt unterstützt auch eine Zuordnung beliebiger Attribute, die einem bestimmten Wert, einer Zeile, einer Spalte oder der gesamten DataTable zugewiesen sind. In Visualisierungen können diese zusätzlichen Features unterstützt werden. In der Tabellenvisualisierung können Sie beispielsweise benutzerdefinierte Klassennamen oder Stile einzelnen Zellen zuweisen.

Jede Zelle in der Tabelle enthält einen Wert. Zellen können einen Nullwert oder einen Wert des Typs haben, der in der zugehörigen Spalte angegeben ist. Zellen können optional eine „formatierte“ Version der Daten akzeptieren. Das ist eine Stringversion der Daten, die zur Visualisierung formatiert ist. In einer Visualisierung kann die formatierte Version für die Anzeige verwendet werden, dies ist jedoch nicht erforderlich. Die Daten selbst werden jedoch bei allen Sortierungen oder Berechnungen verwendet, die vorgenommen werden, z. B. wo ein Punkt in einer Grafik platziert werden soll. Ein Beispiel: Weisen Sie den numerischen Zellenwerten 1, 2 und 3 die Werte "niedrig", "mittel" und "hoch" als formatierte Werte zu.

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 durch Aufrufen der addColumn()-Methoden Spalten hinzufügen. Es gibt auch Methoden zum Entfernen von Zeilen und Spalten. Statt Zeilen oder Spalten zu entfernen, können Sie auch eine DataView-Ansicht mit selektiver DataTable-Ansicht erstellen.

Wenn Sie Werte in einer DataTable ändern, nachdem sie an die Methode draw() einer Visualisierung übergeben wurde, wird das Diagramm nicht sofort geändert. Sie müssen draw() noch einmal aufrufen, damit die Änderungen übernommen werden.

Hinweis: Google Charts führt keine Validierungen für Datentabellen durch. Andernfalls wäre das Rendern des Diagramms länger. Wenn Sie eine Zahl angeben, die in der Spalte einen String erwartet, oder umgekehrt, werden die Werte in Google Charts am besten so interpretiert, wie es sinnvoll ist. Fehler werden jedoch nicht gemeldet.

Beispiele

Das folgende Beispiel zeigt, wie ein DataTable mit einem literalen String mit den gleichen Daten wie im obigen JavaScript-Beispiel instanziiert und ausgefüllt wird:

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 ein neuer, leerer DataTable erstellt und dann manuell mit denselben Daten wie oben ausgefü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'}]
]);

Sollte ich meine DataTable in JavaScript oder als Objektliteral erstellen?

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

• Das Erstellen und Ausfüllen einer Tabelle in JavaScript durch Aufrufen von addColumn(), addRow() und addRows() ist sehr lesbarer Code. Diese Methode ist nützlich, wenn Sie Code manuell eingeben. Sie ist langsamer als die Verwendung der Objektliteralschreibweise (siehe unten), aber in kleineren Tabellen (z. B. 1.000 Zellen) bemerken Sie wahrscheinlich keine großen Unterschiede.
• Die direkte Deklaration des DataTable-Objekts mit Objekt-Literal-Notation ist in großen Tabellen erheblich schneller. Es kann jedoch schwierig sein, die richtige Syntax zu verwenden. Verwenden Sie diese Methode, wenn Sie die Objektliteralsyntax im Code generieren können, wodurch die Fehlerwahrscheinlichkeit reduziert wird.

 

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 hat zwei Signaturen: Die erste Signatur hat die folgenden Parameter: type: ein String mit dem Datentyp der Werte der Spalte. Es gibt folgende Typen: 'string', 'number', 'boolean', 'date', 'datetime', und 'timeofday'. opt_label: [optional] ein String mit dem Label der Spalte Das Spaltenlabel wird normalerweise als Teil 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 Datentyp der Spalte beschreibt. Dieselben Werte wie 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 Zahlen- oder Datumsformatstring, der angibt, wie der Spaltenwert angezeigt wird Weitere Informationen: 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 im JavaScript-Format, das die Daten für die neue Zeile angibt. Wenn dieser Parameter nicht enthalten ist, wird mit dieser Methode einfach eine neue, leere Zeile am Ende der Tabelle hinzugefügt. Dieser Parameter ist ein Array mit Zellenwerten: Wenn Sie nur einen Wert für eine Zelle angeben möchten, geben Sie einfach den Zellenwert an (z.B. 55 oder „hello“), wenn Sie einen formatierten Wert und/oder Eigenschaften für die Zelle angeben möchten, verwenden Sie ein Zellenobjekt (z.B. {v:55, f:'Fünfundfünfzig'}). Sie können in einem Methodenaufruf einfache Werte und Zellenobjekte kombinieren. 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 der Datentabelle neue Zeilen 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 (siehe unten). numOrArray – entweder eine Zahl oder ein Array: Zahl: Diese Zahl gibt an, wie viele neue, nicht gefüllte Zeilen hinzugefügt werden sollen. Array: Ein Array von Zeilenobjekten, die zum Füllen neuer Zeilen verwendet werden. Jede Zeile ist ein Objekt, wie in addRow() beschrieben. Verwenden Sie null oder einen leeren Arrayeintrag für eine leere Zelle. Beispiel: 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. ]); Weitere Informationen: insertRows
clone()	DataTable	Gibt einen Klon der Datentabelle zurück. Das Ergebnis ist eine tiefe Kopie der Datentabelle mit Ausnahme der Zellenattribute, Zeileneigenschaften, Tabelleneigenschaften und Spalteneigenschaften, die keine flachen Kopien sind. Das bedeutet, dass nicht primitive Attribute durch Referenz kopiert werden, während primitive Eigenschaften nach Wert kopiert werden.
getColumnId(columnIndex)	String	Gibt die ID einer bestimmten Spalte zurück, die im Spaltenindex der zugrunde liegenden Tabelle angegeben ist. Bei Datentabellen, die über Abfragen abgerufen werden, wird die Spaltenkennung von der Datenquelle festgelegt und kann in der Abfragesprache verwendet werden, um auf Spalten zu verweisen. Weitere Informationen: Query.setQuery
getColumnIndex(columnIdentifier)	String, Zahl	Gibt den Index einer bestimmten Spalte zurück, die durch den Spaltenindex, die ID oder das Label angegeben wird, wenn 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 dem Label gesucht. Weitere Informationen: getColumnId, getColumnLabel
getColumnLabel(columnIndex)	String	Gibt das Label einer bestimmten Spalte zurück, die im Spaltenindex der zugrunde liegenden Tabelle angegeben ist. Das Spaltenlabel 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 über Abfragen abgerufen werden, wird das Spaltenlabel von der Datenquelle oder der label-Klausel der Abfragesprache festgelegt. Weitere Informationen:setColumnLabel
getColumnPattern(columnIndex)	String	Gibt das Formatierungsmuster zurück, mit dem die Werte der angegebenen Spalte formatiert 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 werden. Bei Datentabellen, die über 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. Das Attributobjekt wird durch Verweise zurückgegeben. Wenn Sie Werte im abgerufenen Objekt ändern, werden sie auch in DataTable geändert. columnIndex ist der numerische Index der Spalte, für die Attribute abgerufen werden.
getColumnProperty(columnIndex, name)	Automatisch	Gibt den Wert einer benannten Property oder null zurück, wenn keine entsprechende Property 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 werden. name ist der Attributname als String. Weitere Informationen: setColumnProperty setColumnProperties
getColumnRange(columnIndex)	Objekt	Gibt die Mindest- und Höchstwerte 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 werden.
getColumnRole(columnIndex)	String	Gibt die role der angegebenen Spalte zurück.
getColumnType(columnIndex)	String	Gibt den Typ einer bestimmten Spalte zurück, die im Spaltenindex angegeben ist. columnIndex muss eine Zahl größer oder gleich null und kleiner als die Anzahl der Spalten sein, die von der Methode getNumberOfColumns() zurückgegeben werden. Der zurückgegebene Spaltentyp kann einer der folgenden sein: 'string', 'number', 'boolean', 'date', 'datetime', und 'timeofday'.
getDistinctValues(columnIndex)	Objekt-Array	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 werden. Der Typ der zurückgegebenen Objekte ist derselbe wie der, der von der Methode getValue zurückgegeben wird.
getFilteredRows(filters)	Objekt-Array	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 Satz von Zeilen in einer Visualisierung zu ändern. filters: ein Array von Objekten, die einen akzeptablen Zellenwert beschreiben. Ein Zeilenindex wird von dieser Methode zurückgegeben, wenn er allen angegebenen Filtern entspricht. Jeder Filter ist ein Objekt mit einem numerischen column-Attribut, das den Index der Spalte in der zu bewertenden Zeile sowie einen der folgenden Werte angibt: Ein value-Attribut 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 Eine oder beide der folgenden Properties, die denselben Typ wie die gefilterte Spalte haben: 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 nicht definierter 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 und der Datentabelle aufgerufen. 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, für die 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 in 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 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 werden. 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. Das Attributobjekt wird durch Verweise zurückgegeben. Wenn Sie 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)	Automatisch	Gibt den Wert einer benannten Property oder null zurück, wenn keine entsprechende Property 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 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 werden. 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. Das Attributobjekt wird durch Verweise zurückgegeben. Wenn Sie Werte im abgerufenen Objekt ändern, werden sie auch in DataTable geändert. rowIndex ist der Index der Zeile, für die Attribute abgerufen werden sollen.
getRowProperty(rowIndex, name)	Automatisch	Gibt den Wert einer benannten Property oder null zurück, wenn keine entsprechende Property 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 wird. name ist ein String mit dem Attributnamen. Weitere Informationen: setRowProperty setRowProperties
getSortedRows(sortColumns)	Array von Zahlen	Gibt eine sortierte Version der Tabelle zurück, ohne die Reihenfolge der zugrunde liegenden Daten zu ändern. Rufen Sie sort() auf, um die zugrunde liegenden Daten dauerhaft zu sortieren. Sie können die Sortierung je nach Typ, den Sie an den Parameter sortColumns übergeben, auf verschiedene Arten festlegen: Eine einzelne Zahl gibt den Index der Spalte an, nach der sortiert wird. Die Sortierung erfolgt in aufsteigender Reihenfolge. Beispiel: sortColumns(3) wird in aufsteigender Reihenfolge nach der vierten Spalte sortiert. Ein einzelnes Objekt, das die Nummer des Spaltenindex, nach dem sortiert werden soll, und ein optionales boolesches Attribut desc enthält. Wenn desc auf „true“ gesetzt ist, wird die spezifische Spalte in absteigender Reihenfolge sortiert. Andernfalls wird die Reihenfolge in aufsteigender Reihenfolge sortiert. Beispiele: sortColumns({column: 3}) sortiert in aufsteigender Reihenfolge nach der 4. Spalte. sortColumns({column: 3, desc: true}) sortiert die Tabelle nach 4. Spalte in absteigender Reihenfolge. Ein Array von Zahlen der Spaltenindexe, nach denen sortiert werden soll. Die erste Zahl ist die primäre Spalte, nach der sortiert werden soll, die zweite Spalte ist die sekundäre und so weiter. Wenn also zwei Werte in der ersten Spalte gleich sind, werden die Werte in der nächsten Spalte verglichen usw. Beispiel: sortColumns([3, 1, 6]) sortiert zuerst nach der vierten Spalte (in aufsteigender Reihenfolge), dann nach der zweiten Spalte (in aufsteigender Reihenfolge) und dann nach der siebten Spalte (in aufsteigender Reihenfolge). Ein Array von Objekten mit einem Objekt, das die Nummer des Spaltenindex enthält, nach dem sortiert werden soll, und ein optionales boolesches Attribut desc. Wenn desc auf „true“ gesetzt ist, wird die spezifische Spalte in absteigender Reihenfolge sortiert (Standard ist aufsteigend). Das erste Objekt ist die primäre Spalte, nach der sortiert wird, das zweite ist die sekundäre Spalte usw. Wenn also zwei Werte in der ersten Spalte gleich sind, werden die Werte in der nächsten Spalte verglichen usw. Beispiel: sortColumn([{column: 3}, {column: 1, desc: true}, {column: 6, desc: true}]) sortiert zuerst nach der vierten Spalte (in aufsteigender Reihenfolge), dann nach Spalte 2 in absteigender Reihenfolge und dann in Spalte 7 in absteigender Reihenfolge. Der zurückgegebene Wert ist ein Array von Zahlen. Jede Zahl ist ein Index einer DataTable-Zeile. Durch Iterieren in den DataTable-Zeilen nach der Reihenfolge des zurückgegebenen Arrays werden die Zeilen nach dem angegebenen sortColumns sortiert. Die Ausgabe kann als Eingabe für DataView.setRows() verwendet werden, um die angezeigten Zeilen in einer Visualisierung schnell zu ändern. Beachten Sie, dass die Sortierung garantiert stabil ist. Wenn Sie also nach denselben Werten zweier Zeilen sortieren, werden für die Sortierung jedes Mal dieselbe Zeile zurückgegeben. Weitere Informationen: sort Beispiel: Verwenden Sie folgenden Code, um nach den Zeilen der dritten Spalte zu iterieren: 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 für die Tabelle zurück.
getTableProperty(name)	Automatisch	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 in 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 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 werden. 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 „Datum“ oder „Datum/Uhrzeit“ ist, ist der Wert ein Datumobjekt. 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]])	–	Fügt im Datenindex eine neue Spalte in die Datentabelle ein. Alle vorhandenen Spalten am oder nach dem angegebenen Index werden zu einem höheren Index verschoben. columnIndex ist eine Zahl mit dem erforderlichen Index der neuen Spalte. type sollte ein String mit dem Datentyp der Werte der Spalte sein. Es gibt folgende Typen: 'string', 'number', 'boolean', 'date', 'datetime', und 'timeofday'. label sollte ein String mit dem Label der Spalte sein. Das Spaltenlabel wird normalerweise als Teil 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. Weitere Informationen: addColumn
insertRows(rowIndex, numberOrArray)	–	Fügt die angegebene Anzahl von Zeilen im angegebenen Zeilenindex ein. rowIndex ist die Indexnummer, in die die neuen Zeilen eingefügt werden sollen. 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. Unter addRows() finden Sie die Syntax zum Hinzufügen eines Arrays von Zeilenobjekten. Weitere Informationen: addRows
removeColumn(columnIndex)	–	Entfernt die Spalte beim angegebenen Index. columnIndex muss eine Zahl mit einem gültigen Spaltenindex sein. Weitere Informationen: removeColumns
removeColumns(columnIndex, numberOfColumns)	–	Entfernt die angegebene Anzahl von Spalten ab der Spalte im angegebenen Index. numberOfColumns ist die Anzahl der zu entfernenden Spalten. columnIndex muss eine Zahl mit einem gültigen Spaltenindex sein. Weitere Informationen: removeColumn
removeRow(rowIndex)	–	Entfernt die Zeile beim angegebenen Index. rowIndex muss eine Zahl mit einem gültigen Zeilenindex sein. Weitere Informationen: removeRows
removeRows(rowIndex, numberOfRows)	–	Entfernt die angegebene Anzahl von Zeilen ab der Zeile im angegebenen Index. numberOfRows ist die Anzahl der zu entfernenden Zeilen. rowIndex muss eine Zahl mit einem gültigen Zeilenindex sein. Weitere Informationen: removeRow
setCell(rowIndex, columnIndex [, value [, formattedValue [, properties]]])	–	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 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 werden. value [optional] ist der Wert, der der angegebenen Zelle zugewiesen ist. Wenn Sie verhindern möchten, dass dieser Wert überschrieben wird, legen Sie den Parameter auf undefined fest. Um den Wert zu löschen, 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, muss der Wert eine Zahl sein. Wenn der Spaltentyp „boolesch“ ist, sollte der Wert ein boolescher Wert sein. Wenn der Spaltentyp „Datum“ oder „Datum/Uhrzeit“ ist, sollte der Wert ein Objekt vom Typ „Datum“ sein. Wenn der Spaltentyp „timeofday“ ist, sollte der Wert ein Array mit vier Zahlen sein: [Stunde, Minute, Sekunde, Millisekunden]. formattedValue [optional] ist ein String, dessen Wert als String formatiert ist. Wenn Sie diesen Wert nicht überschreiben möchten, legen Sie diesen Parameter auf undefined fest. Wenn Sie diesen Wert löschen und die API die Standardformatierung auf value anwenden möchten, legen Sie den Wert auf null fest. Falls 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 verwendet, um Wertlabels anzuzeigen. Der formatierte Wert kann beispielsweise als Labeltext in einem Kreisdiagramm erscheinen. properties [optional] ist ein Object (eine Name-Wert-Zuordnung) mit zusätzlichen Properties für diese Zelle. Wenn Sie verhindern möchten, dass dieser Wert überschrieben wird, legen Sie den Parameter auf undefined fest. Um ihn zu löschen, setzen Sie ihn auf null. Einige Visualisierungen unterstützen Zeilen-, Spalten- oder Zelleneigenschaften, mit denen Sie die Darstellung oder das Verhalten ändern können. In der Dokumentation zur Visualisierung sehen Sie, welche Eigenschaften unterstützt werden. Weitere Informationen: setValue(), setFormattedValue(), setProperty(), setProperties()
setColumnLabel(columnIndex, label)	–	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 werden. label ist ein String mit dem Label, das der Spalte zugewiesen werden soll. Das Spaltenlabel 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. Weitere Informationen: getColumnLabel
setColumnProperty(columnIndex, name, value)	–	Legt eine einzelne Spalteneigenschaft fest. Einige Visualisierungen unterstützen Zeilen-, Spalten- oder Zelleneigenschaften, mit denen Sie die Darstellung oder das Verhalten ändern können. In der Visualisierungsdokumentation können Sie nachlesen, welche Eigenschaften unterstützt 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 werden. 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. Weitere Informationen:setColumnProperties getColumnProperty
setColumnProperties(columnIndex, properties)	–	Legt mehrere Spalteneigenschaften fest. Einige Visualisierungen unterstützen Zeilen-, Spalten- oder Zelleneigenschaften, mit denen Sie die Darstellung oder das Verhalten ändern können. In der Visualisierungsdokumentation können Sie nachlesen, welche Eigenschaften unterstützt 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 werden. 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. Weitere Informationen: setColumnProperty getColumnProperty
setFormattedValue(rowIndex, columnIndex, formattedValue)	–	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 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 werden. formattedValue ist ein String mit dem für die Anzeige formatierten Wert. Wenn Sie diesen Wert löschen und die API die Standardformatierung auf den Zellenwert anwenden lassen möchten, setzen Sie ihn auf formattedValue null. Um einen leeren formatierten Wert explizit festzulegen, setzen Sie ihn auf einen leeren String. Weitere Informationen: getFormattedValue
setProperty(rowIndex, columnIndex, name, value)	–	Legt eine Zelleneigenschaft fest. Einige Visualisierungen unterstützen Zeilen-, Spalten- oder Zelleneigenschaften, mit denen Sie die Darstellung oder das Verhalten ändern können. In der Visualisierungsdokumentation können Sie nachlesen, welche Eigenschaften unterstützt werden. rowIndex muss eine Zahl größer oder gleich null und kleiner als die Anzahl der Zeilen sein, die von der Methode getNumberOfRows() zurückgegeben 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 werden. 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. Weitere Informationen: setCell setProperties getProperty
setProperties(rowIndex, columnIndex, properties)	–	Legt mehrere Zelleneigenschaften fest. Einige Visualisierungen unterstützen Zeilen-, Spalten- oder Zelleneigenschaften, mit denen Sie die Darstellung oder das Verhalten ändern können. In der Visualisierungsdokumentation können Sie nachlesen, welche Eigenschaften unterstützt werden. rowIndex muss eine Zahl größer oder gleich null und kleiner als die Anzahl der Zeilen sein, die von der Methode getNumberOfRows() zurückgegeben 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 werden. properties ist eine Object (Name/Wert-Zuordnung) mit zusätzlichen Properties für diese Zelle. Wenn null angegeben ist, werden alle zusätzlichen Properties der Zelle entfernt. Weitere Informationen: setCell setProperty getProperty
setRowProperty(rowIndex, name, value)	–	Legt eine Zeileneigenschaft fest. Einige Visualisierungen unterstützen Zeilen-, Spalten- oder Zelleneigenschaften, mit denen Sie die Darstellung oder das Verhalten ändern können. In der Visualisierungsdokumentation können Sie nachlesen, welche Eigenschaften unterstützt werden. rowIndex muss eine Zahl größer oder gleich null und kleiner als die Anzahl der Zeilen sein, die von der Methode getNumberOfRows() zurückgegeben wird. 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. Weitere Informationen: setRowProperties getRowProperty
setRowProperties(rowIndex, properties)	–	Legt mehrere Zeileneigenschaften fest. Einige Visualisierungen unterstützen Zeilen-, Spalten- oder Zelleneigenschaften, mit denen Sie die Darstellung oder das Verhalten ändern können. In der Visualisierungsdokumentation können Sie nachlesen, welche Eigenschaften unterstützt werden. rowIndex muss eine Zahl größer oder gleich null und kleiner als die Anzahl der Zeilen sein, die von der Methode getNumberOfRows() zurückgegeben wird. properties ist eine Object (Name/Wert-Zuordnung) mit zusätzlichen Attributen für diese Zeile. Wenn null angegeben ist, werden alle zusätzlichen Attribute der Zeile entfernt. Weitere Informationen: setRowProperty getRowProperty
setTableProperty(name, value)	–	Legt eine einzelne Tabelleneigenschaft fest. Einige Visualisierungen unterstützen Tabellen-, Zeilen-, Spalten- oder Zelleneigenschaften, mit denen sich die Darstellung oder das Verhalten ändern lässt. In der Dokumentation zur Visualisierung sehen Sie, welche Eigenschaften unterstützt werden. 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)	–	Legt mehrere Tabellenattribute fest. Einige Visualisierungen unterstützen Tabellen-, Zeilen-, Spalten- oder Zelleneigenschaften, mit denen sich die Darstellung oder das Verhalten ändern lässt. In der Dokumentation zur Visualisierung sehen Sie, welche Eigenschaften unterstützt werden. 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. Weitere Informationen: setTableProperty getTableProperty
setValue(rowIndex, columnIndex, value)	–	Legt den Wert einer Zelle fest. Mit dieser Methode werden nicht nur alle vorhandenen Zellenwerte überschrieben, sondern auch alle formatierten 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 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 werden. Mit dieser Methode können Sie keinen formatierten Wert für diese 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, muss der Wert eine Zahl sein. Wenn der Spaltentyp „boolesch“ ist, sollte der Wert ein boolescher Wert sein. Wenn der Spaltentyp „Datum“ oder „Datum/Uhrzeit“ ist, sollte der Wert ein Objekt vom Typ „Datum“ sein. Wenn der Spaltentyp „timeofday“ ist, sollte der Wert ein Array mit vier Zahlen sein: [Stunde, Minute, Sekunde, Millisekunden]. Für jeden Spaltentyp kann der Wert auf null gesetzt werden. Siehe auch setCell, setFormattedValue, setProperty, setProperties
sort(sortColumns)	–	Sortiert die Zeilen anhand der angegebenen Sortierspalten. DataTable wird durch diese Methode geändert. Eine Beschreibung der Sortierdetails finden Sie unter getSortedRows(). Bei dieser Methode werden die sortierten Daten nicht zurückgegeben. Weitere Informationen: getSortedRows Beispiel: Wenn Sie nach der dritten Spalte und dann nach der zweiten Spalte sortieren möchten, verwenden Sie: data.sort([{column: 2}, {column: 1}]);
toJSON()	String	Gibt eine JSON-Darstellung der 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 data-Parameters des JavaScript-Literals Konstruktor

Sie können ein DataTable initialisieren, indem Sie ein JavaScript-Stringliteral-Objekt an den data-Parameter übergeben. Wir nennen dieses Objekt das Datenobjekt. Sie können dieses Objekt gemäß der folgenden Beschreibung manuell codieren oder eine Python-Hilfsbibliothek verwenden, wenn Sie wissen, wie Python verwendet wird, und Ihre Website es verwenden kann. Wenn Sie das Objekt jedoch manuell erstellen möchten, wird in diesem Abschnitt die Syntax beschrieben.

Sehen wir uns zuerst ein Beispiel für ein einfaches JavaScript-Objekt an, das eine Tabelle mit drei Zeilen und drei Spalten (String-, Zahlen- und Datumstypen) 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!'}
}

Sehen wir uns jetzt die Syntax an:

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

Hinweis: Bei allen angezeigten Attributnamen und Stringkonstanten wird die Groß- und Kleinschreibung beachtet. Bei Attributen, die als Stringwert verwendet werden, sollte der Wert in Anführungszeichen gesetzt werden. Wenn Sie beispielsweise die Typeigenschaft als Zahl angeben möchten, muss der Wert type: 'number' lauten, der Wert selbst aber so: v: 42

cols-Property

cols ist ein Array von Objekten, die die ID und den Typ der einzelnen Spalten beschreiben. Jedes Attribut ist ein Objekt mit den folgenden Attributen (Groß-/Kleinschreibung beachten):

• type [erforderlich]: Datentyp der Daten in der Spalte. Unterstützt die folgenden Stringwerte (Beispiele: v:-Eigenschaft, die weiter unten beschrieben wird):
  • Boolescher Wert: boolescher JavaScript-Wert ("true" oder "false"). Beispielwert: v:'true'
  • "number": JavaScript-Zahlwert Beispielwerte: v:7, v:3.14, v:-55
  • „string“ – JavaScript-Stringwert Beispielwert: v:'hello'
  • „date“ – JavaScript-Datumsobjekt (Monat mit Null), wobei die Zeit abgeschnitten wird. Beispielwert: v:new Date(2008, 0, 15)
  • „Datum und Uhrzeit“ – JavaScript-Datumsobjekt, einschließlich der Uhrzeit Beispielwert: v:new Date(2008, 0, 15, 14, 30, 45)
  • „timeofday“ – Array aus drei Ziffern und einer optionalen vierten Zahl, die die Stunde (0) um Mitternacht, Minute, Sekunde und optional Millisekunden angibt. Beispielwerte: v:[8, 15, 0], v: [6, 12, 1, 144]
• id [optional]: String-ID der Spalte. Muss in der Tabelle eindeutig sein. Verwenden Sie einfache alphanumerische Zeichen, damit die Hostseite keine Escape-Sequenzen benötigt, um auf die Spalte in JavaScript zuzugreifen. Achten Sie darauf, kein JavaScript-Keyword zu wählen. Beispiel: id:'col_1'
• label [optional] Stringwert, der von einigen Visualisierungen für diese Spalte angezeigt wird. Beispiel: label:'Height'
• pattern [optional] Stringmuster, das von einer Datenquelle zum Formatieren numerischer, Datums- oder Zeitspaltenwerte verwendet wird. Dies dient nur als Referenz. Sie müssen das Muster wahrscheinlich nicht lesen und es ist nicht vorhanden. Der Google Visualization-Client verwendet diesen Wert nicht (der formatierte Wert der Zelle wird gelesen). Wenn die 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. Empfohlene Musterstandards sind das ICU- DecimalFormat und das SimpleDateFormat.
• p [Optional] Ein Objekt, das eine Zuordnung von benutzerdefinierten Werten auf die Zelle ist. Diese Werte können einen beliebigen JavaScript-Typ haben. Wenn Ihre Visualisierung Eigenschaften auf Zellenebene unterstützt, werden diese beschrieben. Andernfalls wird diese Property ignoriert. Beispiel: p:{style: 'border: 1px solid green;'}.

cols-Beispiel

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, die ein Array von Zellen in dieser Zeile ist. Außerdem hat es ein optionales p-Attribut, mit dem eine Zuordnung willkürlicher benutzerdefinierter Werte definiert wird, die der gesamten Zeile zugewiesen werden sollen. Wenn Ihre Visualisierung Eigenschaften auf Zeilenebene unterstützt, werden diese beschrieben. Andernfalls wird diese Property ignoriert.

Zellenobjekte

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

• v [optional]: Zellenwert Der Datentyp sollte dem Datentyp der Spalte entsprechen. Wenn die Zelle null ist, sollte die Property v null sein, aber sie kann weiterhin die Attribute f und p haben.
• f [optional] Eine Stringversion des v-Werts, die zur Anzeige formatiert ist. In der Regel stimmen die Werte überein. Dies ist jedoch nicht erforderlich. Wenn Sie also Date(2008, 0, 1) für v angeben, sollten Sie „1. Januar 2008“ oder einen ähnlichen String für diese Property angeben. Dieser Wert wird nicht mit dem Wert v verglichen. In der Visualisierung wird dieser Wert nicht zur Berechnung, sondern nur als Label für die Anzeige verwendet. Wenn nichts angegeben ist, wird die Stringversion v automatisch mit der Standardformatierung generiert. Die f-Werte können mit Ihrem eigenen Formatierer geändert, mit setFormattedValue() oder setCell() festgelegt oder mit getFormattedValue() abgerufen werden.
• p [Optional] Ein Objekt, das eine Zuordnung von benutzerdefinierten Werten auf die Zelle ist. 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 in derselben Reihenfolge wie die Spaltenbeschreibungen in cols sein. Wenn Sie eine Nullzelle angeben möchten, können Sie null angeben, das Feld für eine Zelle in einem Array leer lassen oder nachgestellte Array-Elemente weglassen. Um eine Zeile mit null für die ersten beiden Zellen anzugeben, können Sie also [ , , {cell_val}] oder [null, null, {cell_val}] angeben.

Hier sehen Sie ein Beispiel für ein Tabellenobjekt mit drei Spalten und drei Datenzeilen:

{
  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-Property

Das Attribut p auf Tabellenebene ist eine Zuordnung von benutzerdefinierten Werten, die auf das gesamte DataTable angewendet wird. Diese Werte können einen beliebigen JavaScript-Typ haben. Wenn Ihre Visualisierung Eigenschaften auf Datenebene unterstützt, werden diese beschrieben. Andernfalls steht diese Property der Anwendung zur Verfügung. Beispiel: p:{className: 'myDataTable'}.

DataView-Klasse

Eine schreibgeschützte Ansicht einer zugrunde liegenden DataTable. Mit DataView können Sie nur eine Teilmenge der Spalten und/oder Zeilen auswählen. Außerdem können Spalten und Zeilen neu angeordnet und Spalten/Zeilen dupliziert werden.

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

• 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 in die Ansicht übernommen. Sie müssen jedoch nach jeder Änderung draw() aufrufen, damit die neue Zeile gerendert wird. Hinweis: Wenn die Ansicht Zeilen durch Aufrufen einer der setRows() or hideRows()-Methoden herausgefiltert hat und Sie der zugrunde liegenden Tabelle Zeilen hinzufügen oder daraus entfernen, kommt es zu unerwartetem Verhalten. Sie müssen eine neue DataView erstellen, um die neue Tabelle widerzuspiegeln.
• Das Ändern von Zellenwerten in vorhandenen Zellen ist sicher und Änderungen werden sofort an DataView weitergegeben. Allerdings müssen Sie nach jeder Änderung draw() für alle Visualisierungen 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 dies auf die Ebene unmittelbar unterhalb dieser Ebene. Mit anderen Worten: es bezieht sich auf das Datenobjekt, mit dem dieser DataView erstellt wird.

DataView unterstützt auch berechnete Spalten. Dabei handelt es sich um Spalten, deren Werte mit einer von Ihnen angegebenen Funktion dynamisch berechnet werden. Sie können beispielsweise eine Spalte einfügen, die die Summe von zwei vorangehenden 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 ein- oder ausblenden, wirkt sich das nicht auf die Visualisierung aus, bis 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

DataTable oder DataView zum Initialisieren der Ansicht. Standardmäßig enthält die Ansicht alle Spalten und Zeilen in der zugrunde liegenden Datentabelle oder Ansicht in der ursprünglichen Reihenfolge. Um Zeilen oder Spalten in dieser Ansicht ein- oder auszublenden, rufen Sie die entsprechenden Methoden set...() oder hide...() auf.

Weitere Informationen

setColumn(), hideColumn(), setRows(), hideRows().

 

Konstruktor 2

Dieser Konstruktor erstellt einen neuen DataView, indem er einem DataTable ein serialisiertes DataView zuweist. Sie können damit DataView, die Sie mit DataView.toJSON() serialisiert haben, neu erstellen.

var myView = google.visualization.DataView.fromJSON(data, viewAsJson)

Daten

Das DataTable-Objekt, das Sie zum Erstellen des DataView verwendet haben, für das Sie DataView.toJSON() aufgerufen haben. Wenn sich diese Tabelle von der ursprünglichen Tabelle unterscheidet, erhalten Sie unvorhersehbare Ergebnisse.

viewAsJson

Der von DataView.toJSON() zurückgegebene JSON-String. Hier sehen Sie, welche Zeilen in der Datentabelle data ein- oder ausgeblendet werden.

Methoden

Methode	Rückgabewert	Beschreibung
getColumnId getColumnLabel getColumnPattern getColumnProperty getColumnRange getColumnType getDistinctValues getFilteredRows getFormattedValue getNumberOfColumns getNumberOfRows getProperty getProperties getRowProperty getSortedRows getTableProperty getValue	Beschreibungen finden Sie unter DataTable.	Wie die entsprechenden DataTable-Methoden, außer dass sich die Zeilen-/Spaltenindexe auf den Index in der Ansicht und nicht auf die zugrunde liegende Tabelle/Ansicht beziehen.
getTableColumnIndex(viewColumnIndex)	Zahl	Gibt den Index in der zugrunde liegenden Tabelle oder Ansicht einer bestimmten Spalte zurück, die durch den Index in dieser Ansicht angegeben wird. viewColumnIndex muss eine Zahl größer oder gleich null und kleiner als die Anzahl der Spalten sein, die von der Methode getNumberOfColumns() zurückgegeben werden. Gibt -1 zurück, wenn es eine generierte Spalte ist. Beispiel: Wenn setColumns([3, 1, 4]) zuvor aufgerufen wurde, gibt getTableColumnIndex(2) den Wert 4 zurück.
getTableRowIndex(viewRowIndex)	Zahl	Gibt den Index in der zugrunde liegenden Tabelle oder Ansicht einer bestimmten Zeile zurück, die durch den Index in dieser Ansicht angegeben wird. viewRowIndex muss eine Zahl größer oder gleich null und kleiner als die Anzahl der Zeilen sein, die von der Methode getNumberOfRows() zurückgegeben wird. Beispiel: Wenn setRows([3, 1, 4]) zuvor aufgerufen wurde, gibt getTableRowIndex(2) den Wert 4 zurück.
getViewColumnIndex(tableColumnIndex)	Zahl	Gibt den Index in dieser Ansicht zurück, der einer bestimmten Spalte zugeordnet ist, die durch den Index in der zugrunde liegenden Tabelle (oder Ansicht) angegeben ist. Wenn mehr als ein solcher Index vorhanden ist, wird der erste (kleinste) zurückgegeben. Wenn kein solcher Index vorhanden ist (die angegebene Spalte befindet sich nicht in der Ansicht), 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) den Wert 2 zurück.
getViewColumns()	Array von Zahlen	Gibt die Spalten in dieser Ansicht in der angegebenen Reihenfolge zurück Wenn Sie also setColumns mit einem Array aufrufen und dann getViewColumns() aufrufen, erhalten Sie ein identisches Array.
getViewRowIndex(tableRowIndex)	Zahl	Gibt den Index in dieser Ansicht zurück, der einer bestimmten Zeile zugeordnet ist, die durch den Index in der zugrunde liegenden Tabelle (oder Ansicht) angegeben ist. Wenn mehr als ein solcher Index vorhanden ist, wird der erste (kleinste) zurückgegeben. Wenn kein solcher Index vorhanden ist (die angegebene Zeile ist nicht in der Ansicht vorhanden), wird -1 zurückgegeben. tableRowIndex muss eine Zahl größer oder gleich null und kleiner als die Anzahl der Zeilen sein, die von der Methode getNumberOfRows() der zugrunde liegenden Tabelle/Ansicht zurückgegeben wird. Beispiel: Wenn setRows([3, 1, 4]) zuvor aufgerufen wurde, gibt getViewRowIndex(4) den Wert 2 zurück.
getViewRows()	Array von Zahlen	Gibt die Zeilen in dieser Ansicht in der angegebenen Reihenfolge zurück Wenn Sie setRows mit einem Array aufrufen und dann getViewRows() aufrufen, erhalten Sie ein identisches Array.
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 der Reihenfolge entsprechen (d. h. [3,4,1] ist in Ordnung). Die verbleibenden Spalten behalten ihre Indexreihenfolge bei der Iteration. 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 oder Ansicht nicht vorhanden ist, wird ein Fehler ausgegeben. Wenn Sie Spalten einblenden möchten, rufen Sie setColumns() auf. Beispiel: Wenn Sie eine Tabelle mit 10 Spalten haben und setColumns([2,7,1,7,9]) und dann hideColumns([7,9]) aufrufen, lauten die Spalten in der Ansicht [2,1].
hideRows(min, max)	–	Blendet alle Zeilen mit Indexen aus, die zwischen Mindest- und Höchstwert (einschließlich) liegen. Dies ist eine vereinfachte Syntax für hideRows(rowIndexes) oben. hideRows(5, 10) entspricht beispielsweise hideRows([5, 6, 7, 8, 9, 10]).
hideRows(rowIndexes)	–	Blendet die angegebenen Zeilen aus der aktuellen Ansicht aus. rowIndexes ist ein Array von Zahlen, die die Indexe der zu verbergenden Zeilen darstellen. Diese Indexe sind die Indexnummern in der zugrunde liegenden Tabelle/Ansicht. Die Zahlen in rowIndexes müssen nicht der Reihenfolge entsprechen (d. h. [3,4,1] ist in Ordnung). Die verbleibenden Zeilen behalten ihre Indexreihenfolge. Die Eingabe einer Indexnummer für eine Zeile, die bereits ausgeblendet ist, ist kein Fehler. Die Eingabe eines Index, der in der zugrunde liegenden Tabelle/Ansicht nicht vorhanden ist, führt jedoch zu einem Fehler. Rufen Sie zum Einblenden von Zeilen setRows() auf. Beispiel: Wenn Sie eine Tabelle mit 10 Zeilen haben und setRows([2,7,1,7,9]) und dann hideRows([7,9]) aufrufen, lauten die Zeilen in der Ansicht dann [2,1].
setColumns(columnIndexes)	–	Gibt an, welche Spalten in dieser Ansicht sichtbar sind. Nicht angegebene Spalten werden ausgeblendet. Dies ist ein Array von Spaltenindexen in der zugrunde liegenden Tabelle/Ansicht oder berechneten Spalten. Wenn Sie diese Methode nicht aufrufen, werden standardmäßig alle Spalten angezeigt. Das Array kann auch Duplikate enthalten, damit dieselbe Spalte mehrmals angezeigt wird. Die Spalten werden in der angegebenen Reihenfolge angezeigt. columnIndexes: ein Array von Zahlen und/oder Objekten (kann gemischt sein): Zahlen gibt den Index der Spalte mit Quelldaten an, die in der Ansicht enthalten sein soll. Die Daten werden unverändert übertragen. Wenn Sie Rollen oder zusätzliche Spaltenattribute explizit definieren müssen, geben Sie ein Objekt mit dem Attribut sourceColumn an. Objekte geben eine berechnete Spalte an. In berechneten Spalten wird für jede Zeile dynamisch ein Wert erstellt und der Ansicht hinzugefügt. Das Objekt muss die folgenden Attribute 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 in type angegebenen Typs zurückgeben. type [String]: Der JavaScript-Typ des Werts, den die calc-Funktion zurückgibt. label [optional, string]: Ein optionales Label, das dieser generierten Spalte zugewiesen werden soll. Wenn sie nicht angegeben ist, hat die Ansichtsspalte 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. Geben Sie entweder calc oder type nicht an. Dies ähnelt der Übergabe einer Zahl anstelle eines Objekts, ermöglicht Ihnen aber, eine Rolle und Attribute für die neue Spalte anzugeben. properties [optional, Objekt]: ein Objekt, das beliebige Attribute enthält, die dieser Spalte zugewiesen werden sollen. Wenn sie nicht angegeben ist, hat die Spalte „Datenansicht“ 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)	–	Legt fest, dass die Zeilen in dieser Ansicht alle Indexe (in der zugrunde liegenden Tabelle/Ansicht) liegen, die zwischen min und maximal (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)	–	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 sollen. Das Array gibt die Reihenfolge an, in der die Zeilen angezeigt werden sollen. 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 effektiv dupliziert wird (z. B. führt setRows([3, 4, 3, 2]) dazu, dass Zeile 3 in dieser Ansicht zweimal angezeigt wird). Das Array ermöglicht daher eine Zuordnung der Zeilen aus der zugrunde liegenden Tabelle bzw. Ansicht zu dieser Ansicht. Sie können getFilteredRows() oder getSortedRows() verwenden, um Eingaben 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()	Datentabelle	Gibt ein DataTable-Objekt mit den sichtbaren Zeilen und Spalten von DataView zurück.
toJSON()	String	Gibt eine Stringdarstellung dieses DataView zurück. Dieser String enthält nicht die tatsächlichen 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 sind davon ausgenommen.

ChartWrapper-Klasse

Mit der Klasse ChartWrapper wird das Diagramm umschlossen und alle Lade-, Zeichnungs- und Datenquellenabfragen für das Diagramm verarbeitet. Die Klasse stellt Convenience-Methoden zum Festlegen von Werten im Diagramm und zum Zeichnen bereit. Diese Klasse vereinfacht das Lesen aus einer Datenquelle, da Sie keinen Abfrage-Callback-Handler erstellen müssen. Außerdem können Sie damit Diagramme ganz einfach wiederverwenden.

Ein weiterer Vorteil von ChartWrapper besteht darin, dass Sie die Anzahl der Bibliothekslasten durch dynamisches Laden reduzieren können. Außerdem müssen Sie die Pakete nicht explizit laden, da ChartWrapper die Pakete automatisch für Sie abruft und lädt. Weitere Informationen finden Sie in den Beispielen unten.

ChartWrapper verteilt derzeit jedoch nur einen Teil der Ereignisse, die von Diagrammen ausgelöst werden: 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 auf dem 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, in dem das Diagramm definiert ist, oder eine serialisierte Stringversion dieses Objekts. Das Format dieses Objekts wird in der DrawChart()-Dokumentation gezeigt. Wenn keine Angabe erfolgt, müssen Sie alle entsprechenden Attribute mithilfe der von diesem Objekt bereitgestellten set...-Methoden festlegen.

Methoden

ChartWrapper bietet die folgenden zusätzlichen Methoden:

Methode	Rückgabetyp	Beschreibung
draw(opt_container_ref)	–	Zeichnet das Diagramm. Sie müssen diese Methode nach allen Änderungen aufrufen, die Sie am Diagramm oder an den Daten vornehmen, damit die Änderungen angezeigt werden. opt_container_ref [optional]: ein Verweis auf ein gültiges Containerelement auf der Seite. Falls angegeben, wird das Diagramm dort gezeichnet. Wenn nicht, wird das Diagramm im Element mit der von containerId angegebenen ID gezeichnet.
toJSON()	String	Gibt eine Stringversion der JSON-Darstellung des Diagramms zurück.
clone()	ChartWrapper	Gibt eine tiefe Kopie des Diagramm-Wrappers zurück.
getDataSourceUrl()	String	Wenn das Diagramm seine Daten aus einer Datenquelle bezieht, wird die URL für diese Datenquelle zurückgegeben. Andernfalls wird null zurückgegeben.
getDataTable()	google.visualization.DataTable	Wenn dieses Diagramm seine Daten aus einem lokal definierten DataTable erhält, wird ein Verweis auf das DataTable des Diagramms zurückgegeben. Wenn dieses Diagramm seine Daten aus einer Datenquelle erhält, gibt es null zurück. Alle Änderungen, die Sie am zurückgegebenen Objekt vornehmen, werden beim nächsten Aufruf von ChartWrapper.draw() im Diagramm widergespiegelt.
getChartType()	String	Der Klassenname des umschlossenen Diagramms. Wenn es sich um ein Google-Diagramm handelt, wird der Name nicht mit google.visualization qualifiziert. Wenn es sich beispielsweise um ein Strukturkartendiagramm handelt, wird „Treemap“ und nicht „google.visualization.treemap“ zurückgegeben.
getChartName()	String	Gibt den von setChartName() zugewiesenen Diagrammnamen zurück.
getChart()	Referenz für Diagrammobjekt	Gibt einen Verweis auf das von diesem ChartWrapper erstellte Diagramm zurück, z. B. google.visualization.BarChart oder google.visualization.ColumnChart . Dadurch wird null zurückgegeben, bis Sie draw() für das ChartWrapper-Objekt aufgerufen haben, und es wird ein Ereignis vom Typ „Ready“ ausgelöst. Auf dem zurückgegebenen Objekt aufgerufene Methoden werden auf der Seite wiedergegeben.
getContainerId()	String	Die ID des DOM-Containerelements des Diagramms.
getQuery()	String	Der Abfragestring für dieses Diagramm, falls vorhanden, und es wird eine Datenquelle abgefragt.
getRefreshInterval()	Zahl	Jedes Aktualisierungsintervall für dieses Diagramm, wenn eine Datenquelle abgefragt wird. Null bedeutet, dass keine Aktualisierung erfolgt.
getOption(key, opt_default_val)	Alle Typen	Gibt den angegebenen Wert für die Diagrammoption zurück key – Name der abzurufenden Option. Kann ein qualifizierter Name sein, z. B. 'vAxis.title'. opt_default_value [optional]: Wenn der angegebene Wert nicht definiert oder null ist, wird dieser Wert zurückgegeben.
getOptions()	Objekt	Gibt das Optionsobjekt für dieses Diagramm zurück.
getView()	Objekt ODER Array	Gibt das Initialisierungsobjekt DataView im selben Format wie dataview.toJSON() oder ein Array dieser Objekte zurück.
setDataSourceUrl(url)	–	Legt die URL einer Datenquelle fest, die für dieses Diagramm verwendet werden soll. Wenn Sie für dieses Objekt auch eine Datentabelle festlegen, wird die Datenquellen-URL ignoriert.
setDataTable(table)	–	Legt die DataTable für das Diagramm fest. Übergeben Sie eines der folgenden Elemente: null; ein DataTable-Objekt; eine JSON-Darstellung einer DataTable; oder ein Array gemäß der Syntax von arrayToDataTable().
setChartType(type)	–	Legt den Diagrammtyp fest. Übergeben Sie den Klassennamen des umschlossenen Diagramms. Wenn dies ein Google-Diagramm ist, qualifizieren Sie es nicht mit google.visualization. Übergeben Sie beispielsweise für ein Kreisdiagramm „PieChart“.
setChartName(name)	–	Legt einen beliebigen Namen für das Diagramm fest. Diese Information wird nirgendwo im Diagramm angezeigt, es sei denn, ein benutzerdefiniertes Diagramm ist explizit darauf ausgelegt.
setContainerId(id)	–	Legt die ID des beinhaltenden DOM-Elements für das Diagramm fest.
setQuery(query_string)	–	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)	–	Legt das Aktualisierungsintervall für dieses Diagramm fest, wenn eine Datenquelle abgefragt wird. Wenn Sie diesen Wert angeben, müssen Sie auch die URL einer Datenquelle festlegen. Null zeigt an, dass keine Aktualisierung erfolgt.
setOption(key, value)	–	Legt einen einzelnen Diagrammoptionswert fest, wobei key der Optionsname und value der Wert ist. Übergeben Sie als Wert null, um die Festlegung einer Option aufzuheben. Beachten Sie, dass key ein qualifizierter Name sein kann, z. B. 'vAxis.title'.
setOptions(options_obj)	–	Legt ein vollständiges Optionsobjekt für ein Diagramm fest.
setView(view_spec)	–	Legt ein DataView-Initialisierungsobjekt fest, das als Filter für die zugrunde liegenden Daten dient. Der Diagramm-Wrapper muss zugrunde liegende Daten aus einer DataTable oder einer Datenquelle haben, auf die diese Ansicht angewendet werden soll. Sie können entweder einen String oder ein DataView-Initialisiererobjekt übergeben, das von dataview.toJSON() zurückgegeben wurde. 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, und die zweite DataView wird auf die Datentabelle angewendet, die sich aus der Anwendung der ersten DataView ergibt usw.

Events

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

Name	Beschreibung	Attribute
error	Wird ausgelöst, wenn beim Rendern des Diagramms ein Fehler auftritt	ID, Nachricht
ready	Das Diagramm ist bereit für externe Methodenaufrufe. Wenn Sie mit dem Diagramm interagieren und Methoden nach dem Zeichnen aufrufen möchten, richten Sie einen Listener für dieses Ereignis ein, bevor Sie die Methode draw aufrufen. Sie sollten sie erst aufrufen, nachdem das Ereignis ausgelöst wurde.	–
select	Wird ausgelöst, wenn der Nutzer auf eine Leiste oder Legende klickt Wenn ein Diagrammelement ausgewählt ist, wird die entsprechende Zelle in der Datentabelle ausgewählt. Wenn eine Legende ausgewählt ist, wird auch die entsprechende Spalte in der Datentabelle ausgewählt. Rufen Sie ChartWrapper.getChart(). getSelection() auf, um zu erfahren, was ausgewählt wurde. Beachten Sie, dass dies nur ausgelöst wird, wenn der zugrunde liegende Diagrammtyp ein Auswahlereignis auslöst.	–

Beispiel

Mit den folgenden beiden Snippets wird ein entsprechendes Liniendiagramm erstellt. Im ersten Beispiel wird die JSON-Literalschreibweise verwendet, um das Diagramm zu definieren. Im zweiten Beispiel werden diese Werte mithilfe von ChartWrapper-Methoden festgelegt.

<!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

Mit der Klasse ChartEditor wird ein In-Page-Dialogfeld geöffnet, mit dem ein Nutzer die Visualisierung spontan anpassen kann.

So verwenden Sie 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 alle Pakete nach Bedarf.
2. Erstellen Sie ein ChartWrapper-Objekt, mit dem das Diagramm für den Nutzer angepasst werden kann. 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 das „ok“-Ereignis zu beobachten. 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 die ChartWrapper. Das Dialogfeld wird geöffnet. Mit den Dialogfeld-Schaltflächen kann der Nutzer den Editor schließen. Die Instanz ChartEditor ist verfügbar, solange sie im Geltungsbereich ist. 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	Der Diagrammeditor wird als eingebettetes Dialogfeld auf der Seite geöffnet. Die Funktion wird sofort zurückgegeben. Sie wartet nicht darauf, dass das Dialogfeld geschlossen wird. Wenn Sie den Bereich der Instanz nicht verlieren, können Sie openDialog() noch einmal aufrufen, um das Dialogfeld wieder zu öffnen. Sie müssen jedoch noch einmal ein ChartWrapper-Objekt übergeben. chartWrapper – Ein ChartWrapper-Objekt, das das im Diagramm zu rendernde Anfangsdiagramm definiert. Das Diagramm muss entweder eine DataTable enthalten oder mit einer gültigen Datenquelle verbunden sein. Dieser Wrapper wird intern in den Diagrammeditor kopiert. Alle späteren Änderungen, die Sie an Ihrem ChartWrapper-Handle vornehmen, werden also nicht in der Kopie des Diagrammeditors widergespiegelt. opt_options – [optional] Ein Objekt mit allen Optionen für den Diagrammeditor. Weitere Informationen finden Sie in der Tabelle unten.
getChartWrapper()	ChartWrapper	Gibt eine ChartWrapper zurück, die das Diagramm mit Nutzeränderungen darstellt.
setChartWrapper(chartWrapper)	null	Verwenden Sie diese Methode, um das gerenderte Diagramm im Editor zu aktualisieren. chartWrapper – Ein ChartWrapper-Objekt für das neue darzustellende Diagramm. Das Diagramm muss entweder eine DataTable enthalten oder mit einer gültigen Datenquelle verbunden sein.
closeDialog()	null	Schließt das Dialogfeld mit dem Diagrammeditor.

Optionen

Der Diagrammeditor unterstützt die folgenden Optionen:

Name	Typ	Standard	Beschreibung
dataSourceInput	Element-Ziehpunkt oder „urlbox“	null	Hiermit können Nutzer eine Datenquelle für das Diagramm angeben. Dieses Attribut kann einen von zwei Werten sein: 'urlbox': Zeigt die URL der Datenquelle des Diagramms in einem bearbeitbaren Textfeld im Dialogfeld an. Der Nutzer kann dies ändern. Das Diagramm wird dann entsprechend der neuen Datenquelle neu gezeichnet. DOM-Element: Hiermit können Sie ein benutzerdefiniertes HTML-Element angeben, um eine Datenquelle auszuwählen. Übergib ein Handle an ein HTML-Element, das entweder im Code erstellt oder von der Seite kopiert wurde. Dieses Element wird im Dialogfeld angezeigt. Damit kann der Nutzer die Datenquelle des Diagramms auswählen. Sie können beispielsweise eine Liste mit mehreren Datenquellen-URLs oder nutzerfreundlichen Namen erstellen, aus denen der Nutzer auswählen kann. Mit dem Element muss ein Auswahl-Handler implementiert und zum Ändern der Datenquelle des Diagramms verwendet werden. Sie können beispielsweise entweder das zugrunde liegende DataTable oder das Feld dataSourceUrl des Diagramms ändern.

Events

Im Diagrammeditor werden die folgenden Ereignisse ausgelöst:

Name	Beschreibung	Attribute
ok	Wird ausgelöst, wenn der Nutzer im Dialogfeld auf die Schaltfläche „OK“ klickt. Nach dem Empfang dieser Methode 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>

Methoden zur Datenbearbeitung

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

Der Namespace google.visualization.data bietet die folgenden Methoden:

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

group()

Nimmt ein befülltes DataTable-Objekt auf und führt einen SQL-ähnlichen GROUP BY-Vorgang aus. Dabei wird eine Tabelle mit Zeilen zurückgegeben, die nach den angegebenen Spaltenwerten gruppiert sind. Die Eingabe-DataTable wird dadurch 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 weitere Spalte mit einem aggregierten Spaltenwert über alle Zeilen, die der Schlüsselkombination entsprechen (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), aber Sie können auch eigene Werte definieren (z. B. standardDeviation oder secondHighest). Eine Anleitung dazu, wie Sie Ihren eigenen Aggregator definieren, finden Sie nach der Methodenbeschreibung.

Syntax

google.visualization.data.group(data_table, keys, columns)

Datentabelle

Die Eingabe DataTable. Dies wird durch den Aufruf von group() nicht geändert.

keys

Ein Array aus Zahlen und/oder Objekten, das angibt, nach welchen Spalten gruppiert werden soll. Die Ergebnistabelle enthält jede Spalte in diesem Array sowie jede Spalte in Spalten. Bei einer Zahl ist dies ein Spaltenindex der Eingabe-DataTable, nach der gruppiert werden soll. Wenn ein Objekt enthalten ist, enthält es eine Funktion, die die angegebene Spalte ändern kann (z. B. 1 zum Wert in dieser Spalte hinzufügen). 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 akzeptiert (den Zellenwert in dieser Spalte für jede Zeile) und den geänderten Wert zurückgibt. Diese Funktion wird verwendet, um den Spaltenwert für die Gruppierung zu ändern, z. B. durch Aufrufen einer WhatQuarter-Funktion, die ein Quartal aus einer Datumsspalte 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 inline innerhalb dieses Objekts deklariert werden oder an einer anderen Stelle in Ihrem Code definiert werden (sie muss innerhalb des aufrufenden Bereichs liegen). Die API bietet eine einfache Modifikatorfunktion. Hier findest du eine Anleitung dazu, wie du deine eigenen nützlicheren Funktionen erstellst. 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 sie im nächsten type-Attribut deklarieren.
• Typ: Der von der Funktion modifier zurückgegebene Typ. Dies sollte ein JavaScript-Stringtypname sein, z. B. „Zahl“ oder „Boolescher Wert“.
• label – [optional] Ein Stringlabel, das dieser Spalte im zurückgegebenen DataTable zugewiesen wird.
• id – [optional] Eine String-ID zum Zuweisen dieser Spalte in der zurückgegebenen DataTable.

Beispiele: [0], [0,2], [0,{column:1, modifier:myPlusOneFunc, type:'number'},2]

Spalten

[Optional] Gibt an, welche Spalten zusätzlich zu den Schlüsselspalten in die Ausgabetabelle aufgenommen werden sollen. Da alle Zeilen in der Zeilengruppe zu einer einzigen Ausgabezeile komprimiert sind, müssen Sie festlegen, welcher Wert für diese Zeilengruppe angezeigt werden soll. Sie können beispielsweise auswählen, dass der Spaltenwert aus der ersten Zeile im Satz oder ein Durchschnitt aller Zeilen in dieser Gruppe angezeigt wird. columns ist ein Array von Objekten mit den folgenden Eigenschaften:

• Spalte: Eine Zahl, die den Index der anzuzeigenden Spalte angibt.
• aggregation – Eine Funktion, die ein Array aller Werte dieser Spalte in dieser Zeilengruppe akzeptiert und einen einzelnen Wert zurückgibt, der in der Ergebniszeile angezeigt werden soll. Der Rückgabewert muss dem Typ entsprechen, der in der Eigenschaft type des Objekts angegeben ist. Details zum Erstellen einer eigenen Aggregationsfunktion finden Sie weiter unten. Sie müssen wissen, welche Datentypen für diese Methode zulässig sind, und diese nur in Spalten des entsprechenden Typs aufrufen. Die API bietet mehrere nützliche Aggregationsfunktionen. Unter Bereitgestellte Aggregationsfunktionen finden Sie unten eine Liste. Unter Aggregationsfunktion erstellen erfahren Sie, wie Sie Ihre eigene Aggregationsfunktion schreiben.
• Typ – Rückgabetyp der Aggregationsfunktion Dies sollte ein JavaScript-Stringtypname sein, z. B. „Zahl“ oder „Boolescher Wert“.
• label – [optional] Ein Stringlabel, das in der zurückgegebenen Tabelle auf diese Spalte angewendet werden soll.
• id – [optional] Eine String-ID, die auf diese Spalte in der zurückgegebenen Tabelle angewendet werden soll.

Rückgabewert

Eine DataTable mit einer Spalte für jede Spalte, die in keys aufgeführt ist, und einer Spalte für jede Spalte, die in Spalten aufgeführt ist. Die Tabelle ist nach Schlüsselzeilen von links nach rechts 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, um das Gruppierungsverhalten anzupassen.

Funktion	Eingabearraytyp	Rückgabetyp	Beschreibung
google.visualization.data.month	Datum	Zahl	Bei einem 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-Parameterarray.

Funktion	Eingabearraytyp	Rückgabetyp	Beschreibung
google.visualization.data.avg	Zahl	Zahl	Der Durchschnittswert des übergebenen Arrays.
google.visualization.data.count	Alle Typen	Zahl	Die Anzahl der Zeilen in der Gruppe. Null- und doppelte Werte werden gezählt.
google.visualization.data.max	Zahl, String, Datum	Zahl, String, Datum, null	Der Höchstwert im Array. Bei Strings ist dies das erste Element in einer lexikografisch sortierten Liste. Für Datumswerte ist es das letzte Datum. Nullwerte werden ignoriert. Gibt null zurück, wenn es kein Maximum gibt.
google.visualization.data.min	Zahl, String, Datum	Zahl, String, Datum, null	Der Mindestwert im Array. Bei Strings ist dies das letzte Element in einer lexikografisch sortierten Liste. Für Datumswerte ist es das früheste Datum. Nullwerte werden ignoriert. Gibt null zurück, wenn es keinen Mindestwert gibt.
google.visualization.data.sum	Zahl	Zahl	Die Summe aller Werte im Array.

Modifikatorfunktion erstellen

Sie können eine Modifikatorfunktion erstellen, um einfache Transformationsschlüsselwerte auszuführen, bevor die Funktion group() Ihre Zeilen gruppiert. Diese Funktion verwendet einen einzelnen Zellenwert, führt eine Aktion mit dem Wert aus (z. B. 1) und gibt ihn zurück. Die Eingabe- und Rückgabetypen müssen nicht gleich sein, aber der Aufrufer muss die Eingabe- und Ausgabetypen kennen. Hier ein Beispiel für eine Funktion, die ein Datum akzeptiert und das Quartal zurückgibt:

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

Zusammenfassungsfunktion erstellen

Sie können eine Aggregationsfunktion erstellen, die eine Reihe von Spaltenwerten in einer Zeilengruppe akzeptiert und eine einzelne Zahl zurückgibt. Beispielsweise kann eine Anzahl oder ein Durchschnitt von Werten zurückgegeben werden. Im Folgenden sehen Sie eine Implementierung der bereitgestellten Funktion für die Aggregation der 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()

Bei dieser Methode werden zwei Datentabellen (DataTable- oder DataView-Objekte) zu einer einzigen Ergebnistabelle zusammengeführt, ähnlich wie eine SQL-JOIN-Anweisung. Sie geben ein oder mehrere Spaltenpaare (key-Spalten) zwischen den beiden Tabellen an und die Ausgabetabelle enthält die Zeilen gemäß der von Ihnen angegebenen Join-Methode: nur Zeilen, in 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 und zusätzliche Spalten, die Sie angeben. Beachten Sie, dass dt2 keine doppelten Schlüssel haben darf, dt1 jedoch schon. Der Begriff „Schlüssel“ bedeutet die Kombination aller Schlüsselspaltenwerte und nicht einer bestimmten Schlüsselspaltenwert. Wenn eine Zeile also die Zellenwerte A | B | C und die Spalten 0 und 1 Schlüsselspalten haben, ist der Schlüssel für diese Zeile AB.

Syntax

google.visualization.data.join(dt1, dt2, joinMethod,
                                 keys, dt1Columns, dt2Columns);

dt1

Hat DataTable, um mit dt2 teilzunehmen.

dt2

Ein ausgefülltes DataTable zur Verknüpfung mit dt1. Diese Tabelle kann nicht mehrere identische Schlüssel haben, wobei ein Schlüssel eine Kombination von 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“: Die Ausgabetabelle enthält alle Zeilen aus beiden Tabellen, unabhängig davon, ob Schlüssel übereinstimmen. Nicht übereinstimmende Zeilen haben null Zelleneinträge. Übereinstimmende Zeilen werden zusammengeführt.
• inner
• „left“: Die Ausgabetabelle enthält alle Zeilen von dt1, unabhängig davon, ob übereinstimmende Zeilen von dt2 vorhanden sind oder nicht.
• „right“: Die Ausgabetabelle enthält alle Zeilen von dt2, unabhängig davon, ob es übereinstimmende Zeilen aus dt1 gibt.

keys

Ein Array von Schlüsselspalten, die aus beiden Tabellen verglichen werden sollen. Jedes Paar besteht aus einem Array mit zwei Elementen. Das erste ist ein Schlüssel in dt1, das zweite ein Schlüssel in dt2. In diesem Array können Spalten anhand ihres Index, ihrer ID oder ihres Labels angegeben werden (siehe getColumnIndex).
Spalten müssen in beiden Tabellen denselben Typ haben. Alle angegebenen Schlüssel müssen der Regel entsprechen, die von joinMethod angegeben wird, um eine Zeile aus der Tabelle einzufügen. Schlüsselspalten sind immer in der Ausgabetabelle enthalten. Nur die linke Tabelle dt1 kann doppelte Schlüssel enthalten. Schlüssel in dt2 müssen eindeutig sein. Der Begriff „Schlüssel“ bezieht sich hier auf einen eindeutigen Satz von Schlüsselspalten, nicht auf einzelne Spaltenwerte. Wenn die Schlüsselspalten beispielsweise A und B waren, hätte die folgende Tabelle nur eindeutige Schlüssel/Wert-Paare und kann daher als dt2 verwendet werden:

A	B
Jens	Rot
Jens	Blau
Fred	Rot

Beispiel: [[0,0], [2,1]] vergleicht die Werte der ersten Spalte in beiden Tabellen sowie die dritte Spalte von dt1 mit der zweiten Spalte von dt2.

dt1Spalten

Ein Spaltenarray von dt1, das zusätzlich zu den Schlüsselspalten von dt1 in die Ausgabetabelle aufgenommen werden soll. In diesem Array können Spalten anhand ihres Index, ihrer ID oder ihres Labels angegeben werden (siehe getColumnIndex).

dt2Spalten

Ein Spaltenarray von dt2, das zusätzlich zu den Schlüsselspalten von dt2 in die Ausgabetabelle aufgenommen werden soll. In diesem Array können Spalten anhand ihres Index, ihrer ID oder ihres Labels angegeben werden (siehe getColumnIndex).

Rückgabewert

Ein DataTable mit den Schlüsselspalten dt1Spalten und dt2Spalten Diese Tabelle ist nach den Schlüsselspalten von links nach rechts sortiert. Wenn joinMethod „inner“ ist, sollten alle Schlüsselzellen ausgefüllt werden. Wenn bei anderen Join-Methoden kein übereinstimmender Schlüssel gefunden wird, hat die Tabelle für alle nicht übereinstimmenden Schlüsselzellen eine Null.

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 Formatierungsprogramme, mit denen sich Daten in einer Visualisierung neu formatieren lassen. 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 ist beispielsweise „1.000, 00 €“, der zugrunde liegende Wert jedoch „1.000“.
• Formatierer wirken sich immer nur auf eine Spalte auf. Wenn Sie mehrere Spalten neu formatieren möchten, wenden Sie auf jede zu ändernde Spalte einen Formatierer an.
• Wenn Sie auch benutzerdefinierte Formatierer verwenden, werden bestimmte benutzerdefinierte Formatierer überschrieben.

Die tatsächliche Formatierung der 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 Formatierungsschritte:

1. Ruft das befüllte DataTable-Objekt ab.
2. Gehen Sie für jede Spalte, die Sie neu formatieren möchten, so vor:
   1. Erstellen Sie ein Objekt, das alle Optionen für Ihren Formatierer angibt. Dies ist ein einfaches JavaScript-Objekt mit einer Reihe von Attributen und Werten. Welche Attribute unterstützt werden, erfahren Sie in der Dokumentation des Formatierungsprogramms. (Optional können Sie ein Objektliteral-Notationsobjekt übergeben, in dem die Optionen angegeben sind.)
   2. Erstellen Sie den Formatierer und übergeben Sie das Optionsobjekt.
   3. Rufen Sie formatter.format(table, colIndex) auf und übergeben Sie die Spaltennummer DataTable und die (nullbasierte) Spaltennummer der Daten, die neu formatiert werden sollen. Beachten Sie, dass Sie nur einen einzelnen Formatierer auf jede Spalte anwenden können. Wenn Sie einen zweiten Formatierer anwenden, werden die Auswirkungen der ersten Spalte überschrieben.
      Wichtig:Bei vielen Formatierern müssen HTML-Tags eine bestimmte Formatierung haben. Wenn Ihre Visualisierung die Option allowHtml unterstützt, sollten Sie sie auf „true“ setzen.

Hier sehen Sie ein Beispiel dafür, wie Sie die formatierten Datumswerte einer Datumsspalte so ändern, dass diese ein langes Datumsformat verwenden ("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 stellen die folgenden zwei Methoden bereit:

Methode	Beschreibung
google.visualization.formatter_name(options)	Konstruktor, wobei formatter_name ein bestimmter Formatterclass-Name ist. options – Ein generisches JavaScript-Objekt, das die Optionen für diesen Formatierer angibt. Dieses Objekt ist ein generisches Objekt mit Property/Wert-Paaren mit spezifischen Properties für diesen Formatierer. Welche Optionen unterstützt werden, erfahren Sie in der Dokumentation des jeweiligen Formatierers. Hier zwei Beispiele für den Aufruf des Konstruktors für das DateFormat-Objekt mit zwei Eigenschaften: // 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 – DataTable mit den neu zu formatierenden Daten. Sie können hier keine DataView verwenden. colIndex: Der nullbasierte 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 folgende Formatierer:

Formatierer	Beschreibung
Pfeilformat	Fügt einen Auf- 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 angeben, ob der Zellenwert über oder unter einem bestimmten Wert liegt.
Farbformat	Fällt eine Zelle entsprechend dem angegebenen Bereich aus.
Datumsformat	Formatiert einen Datum- oder Datum/Uhrzeit-Wert auf verschiedene Arten, z. B. "1. Januar 2009", "01.01.2009" oder "1. Januar 2009".
Zahlenformat	Formatiert verschiedene Aspekte numerischer Werte.
Musterformat	Verkettet Zellenwerte in derselben Zeile mit willkürlichem Text zu einer bestimmten Zelle.

Pfeilformat

Fügt einer numerischen Zelle einen Auf- oder Abwärtspfeil hinzu, je nachdem, ob der Wert über oder unter einem bestimmten Basiswert liegt. Wenn der Wert dem Basiswert entspricht, wird kein Pfeil angezeigt.

Optionen

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

Option	Beschreibung
base	Zahl, die den Basiswert angibt, der mit dem Zellwert verglichen wird Wenn der Zellenwert höher ist, enthält die Zelle einen grünen Aufwärtspfeil. Wenn der Zellenwert niedriger ist, enthält er einen roten Abwärtspfeil. Wenn dies der Fall ist, wird kein Pfeil angezeigt.

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 bestimmten Basiswert liegt.

Optionen

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

Option	Beispiel Beschreibung
base	Zahl, die der Basiswert ist, mit dem der Zellenwert verglichen wird. Ist der Zellenwert höher, wird er rechts von der Basis dargestellt, bei niedrigerem Wert nach links. Der Standardwert ist 0.
colorNegative	Ein String, der den Bereich mit negativen Werten für Balken angibt. Mögliche Werte sind „red“, „green“ und „blue“. Der Standardwert ist „red“.
colorPositive	Ein String, der die Farbe des Abschnitts mit positiven Werten für Balken angibt. Mögliche Werte sind „red“, „green“ und „blue“. Der Standardwert ist „blau“.
drawZeroLine	Boolescher Wert, der angibt, ob eine 1 Pixel dunkle Basislinie gezeichnet werden soll, wenn negative Werte vorhanden sind Die dunkle Linie dient dazu, das visuelle Scannen der Balken zu verbessern. Der Standardwert ist „false“.
max	Der maximale Wert für den Balkenbereich. Der Standardwert ist der höchste Wert in der Tabelle.
min	Der Mindestwert für den Balkenbereich. Der Standardwert ist der niedrigste Wert in der Tabelle.
showValue	Bei „true“ werden Werte und Balken angezeigt. Bei „false“ werden nur Balken angezeigt. Der Standardwert ist "true".
width	Breite jedes Balkens, in Pixel 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%'});

Farbformat

Weist dem Vordergrund oder Hintergrund einer numerischen Zelle Farben zu, je nach Zellenwert. Dieser Formatierer ist ein Sonderfall, da er seine Optionen im Konstruktor nicht übernimmt. Stattdessen sollten Sie addRange() oder addGradientRange() so oft aufrufen, wie Sie möchten, 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 die Vordergrund- und/oder Hintergrundfarbe einer Zelle an, je nach Zellenwert. Jede Zelle mit einem Wert im angegebenen Bereich von from bis to wird color und bgcolor zugewiesen. Beachten Sie, dass der Bereich nicht inklusive ist, da durch das Erstellen eines Bereichs von 1 bis 1.000 und einem zweiten von 1.000 bis 2.000 der Wert von 1.000 nicht abgedeckt wird. from – [String, Number, Date, DateTime, oder TimeOfDay] Die untere Grenze (einschließlich) des Bereichs oder null. Bei Null entspricht er -∞. Stringgrenzen werden alphabetisch mit Stringwerten verglichen. to – [String, Number, Date, DateTime, oder TimeOfDay] Die Obergrenze (nicht einschließlich) des Bereichs oder null. Bei Null entspricht er +∞. Stringgrenzen werden alphabetisch mit Stringwerten verglichen. Farbe: die Farbe, die auf Text in übereinstimmenden Zellen angewendet werden soll. 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. Werte können entweder „#RRGGBB“-Werte oder definierte Farbkonstanten sein (z. B. „#FF0000“ oder „red“).
addGradientRange(from, to, color, fromBgColor, toBgColor)	Weist anhand eines Zellenwerts eine Hintergrundfarbe aus einem Bereich zu. Die Farbe wird so skaliert, dass sie dem Wert der Zelle innerhalb eines Bereichs von einer unteren Begrenzungsfarbe bis zu einer oberen Begrenzungsfarbe entspricht. Beachten Sie, dass diese Methode Stringwerte nicht wie addRange() vergleichen kann. Tipp: Farbbereiche sind für die Betrachter oft schwer zu messen. Der einfachste und am einfachsten zu lesende Bereich reicht von einer vollen Farbe bis hin zu Weiß (z. B. #FF0000—FFFFFF). from – [Number, Date, DateTime, oder TimeOfDay] Die untere Grenze (einschließlich) des Bereichs oder null. Wenn er null ist, entspricht er -∞. to – [Number, Date, DateTime, or TimeOfDay] Die obere Grenze (nicht einschließlich) des Bereichs oder null. Wenn er null ist, entspricht er +∞. Farbe: die Farbe, die auf Text in übereinstimmenden Zellen angewendet werden soll. Diese Farbe ist für alle Zellen gleich, unabhängig vom Wert. fromBgColor: Die Hintergrundfarbe für Zellen, die Werte am unteren Ende des Farbverlaufs enthalten. Werte können entweder „#RRGGBB“-Werte oder definierte Farbkonstanten sein (z. B. „#FF0000“ oder „red“). toBgColor: Die Hintergrundfarbe für Zellen, die Werte am oberen Ende des Farbverlaufs halten. Werte können entweder „#RRGGBB“-Werte oder definierte Farbkonstanten sein (z. B. „#FF0000“ oder „red“).
format(dataTable, columnIndex)	Die Standardmethode format(), um die Formatierung 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%'});

Datumsformat

Formatiert einen JavaScript-Date-Wert auf verschiedene Arten, darunter „1. Januar 2016“, „01.01.2016“ und „1. Januar 2016“.

Optionen

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

Option	Beschreibung
formatType	Eine kurze Formatierungsoption für das Datum. Folgende Stringwerte werden unterstützt, sodass das Datum vom 28. Februar 2016 neu formatiert wird: „short“ – Kurzformat: z.B. „28.02.2016“ „medium“ – mittleres Format, z.B. „28. Februar 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 wird, ähnlich dem Datums- und Uhrzeitformat 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 Informationen 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 dieser Wert in einer anderen Zeitzone angezeigt. Wenn Sie beispielsweise ein Date-Objekt von 17:00 Uhr auf einem Computer in Greenwich, England, erstellen und für die Zeitzone „-5“ (options['timeZone'] = -5, oder Eastern Pacific Time in den USA) angeben, wird der Wert 12:00 Uhr angezeigt.

Methoden

DateFormat unterstützt die folgenden Methoden:

Methode	Beschreibung
google.visualization.DateFormat(options)	Konstruktor. Weitere Informationen finden Sie oben im Abschnitt „Optionen“.
format(dataTable, columnIndex)	Die Standardmethode format(), um die Formatierung 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 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, mit Ausnahme des einfachen Anführungszeichens, das verdoppelt werden muss, z.B. "K 'o''clock.'".

Muster	Beschreibung	Beispielausgabe
GG	Kennzeichnung als Ära.	ANZEIGE
JJ oder JJJJ	Jahr.	1996
M	Monat für Jahr. Für Januar: M produziert 1 MM produziert 01 MMM produziert Jan MMMM produziert im Januar	„Juli“ „07“
t	Tag im Monat. Durch zusätzliche „d“-Werte werden führende Nullen hinzugefügt.	10
h	Stunde im 12-Stunden-Format. Durch zusätzliche „h“-Werte werden führende Nullen hinzugefügt.	12
H	Stunde im 24-Stunden-Format. Zusätzliche Hk-Werte führen zu Nullen.	0
m	Minute. Durch zusätzliche M-Werte werden führende Nullen hinzugefügt.	30
s	Sekunde in Minute. Die zusätzlichen Werte von „s“ addieren führende Nullen.	55
S	Sekundenbruchteil. Zusätzliche 'S'-Werte werden rechts mit Nullen aufgefüllt.	978
E	Wochentag Folgende Ausgaben für „Dienstag“: E produziert T EE oder EEE produzieren Tu oder Di EEEE erstellt Dienstag	„Di.“ „Dienstag“
aa	AM/PM	"PM"
k	Stunde am Tag (1~24). Zusätzliche k-Werte führen zu Nullen.	24
$	Stunde in AM/PM (0~11). Zusätzliche k-Werte führen zu Nullen.	0
z	Zeitzone. Für die 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 weitere Produkte produzieren „GMT -05:00“	„-0800“ „GMT -05:00“
v	Zeitzone (allgemein).	„ETC/GMT-5“
'	Escapezeichen für Text	„Date='
''	Einfaches Anführungszeichen	„JJ“

Zahlenformat

Beschreibt, wie numerische Spalten formatiert werden sollen. Zu den Formatierungsoptionen gehören das Vorgeben eines Präfixsymbols (z. B. ein Dollarzeichen) oder das Satzzeichen, das als Tausendermarkierung verwendet werden soll.

Optionen

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

Option	Beschreibung
decimalSymbol	Ein Zeichen, das als Dezimalmarkierung verwendet werden soll. Der Standardwert ist ein Punkt (.).
fractionDigits	Eine Zahl, die angibt, wie viele Ziffern nach dem Dezimaltrennzeichen angezeigt werden sollen. 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 (fünf aufgerundet).
groupingSymbol	Ein Zeichen, das verwendet wird, um Ziffern links vom Dezimaltrennzeichen in Dreiergruppen zu gruppieren. Der Standardwert ist ein Komma (,).
negativeColor	Die Textfarbe für negative Werte. Kein Standardwert. Werte können ein beliebiger zulässiger HTML-Farbwert sein, z. B. „red“ oder „#FF0000“.
negativeParens	Ein boolescher Wert, wobei "true" bedeutet, dass negative Werte in Klammern gesetzt werden sollen. Der Standardwert ist „true“.
pattern	Ein Formatstring. Alle anderen Optionen werden ignoriert, mit Ausnahme von negativeColor. Der Formatstring ist eine Teilmenge des ITC-Mustersatzes. Zum Beispiel führt {pattern:'#,###%'} zu den Ausgabewerten „1000 %“, „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 String-Suffix 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 „Optionen“.
format(dataTable, columnIndex)	Die Standardmethode format(), um die Formatierung 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

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%'});

Musterformat

Ermöglicht es Ihnen, die Werte der angegebenen Spalten zusammen mit beliebigen Texten in einer einzigen Spalte zusammenzuführen. Wenn Sie beispielsweise eine Spalte für den Vornamen und eine Spalte für den Nachnamen haben, können Sie eine dritte Spalte mit {Nachname}, {Vorname} füllen. Dieser Formatierer entspricht nicht den Konventionen für den Konstruktor und die Methode format(). Eine Anleitung finden Sie unten im Abschnitt „Methoden“.

Methoden

PatternFormat unterstützt die folgenden Methoden:

Methode	Beschreibung
google.visualization.PatternFormat(pattern)	Konstruktor. Akzeptiert kein Optionsobjekt. Stattdessen wird ein pattern-Stringparameter verwendet. Dies ist ein String, mit dem beschrieben wird, welche Spaltenwerte zusammen mit einem beliebigen Text in die Zielspalte eingefügt werden sollen. Betten Sie Platzhalter in den String ein, um den Wert aus einer anderen Spalte anzugeben, die eingebettet werden soll. Die Platzhalter sind {#}, wobei # der Index einer zu verwendenden Quellspalte ist. Der Index ist ein Index im Array srcColumnIndices aus der Methode format(). Wenn Sie ein literales { oder } Zeichen verwenden möchten, maskieren Sie es so: \{ or \}. Wenn Sie ein literales \-Zeichen einfügen möchten, maskieren Sie es als \\. Beispielcode Das folgende Beispiel zeigt einen Konstruktor für ein Muster, das ein Anchor-Element erstellt, 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)	Der Standardformatierungsaufruf mit einigen zusätzlichen Parametern: dataTable – Die DataTable, an der der Vorgang ausgeführt werden soll. srcColumnIndices – Array mit mindestens einem (nullbasierten) Spaltenindex, der als Quellen aus der zugrunde liegenden DataTable abgerufen werden soll Sie wird als Datenquelle für den Parameter pattern im Konstruktor verwendet. Die Spaltennummern müssen nicht sortiert sein. opt_dstColumnIndex: [optional] Die Zielspalte, auf der die Ausgabe der Musterbearbeitung platziert werden soll. Wenn nicht angegeben, wird das erste Element in srcColumIndices als Ziel verwendet. Sehen Sie sich die Formatierungsbeispiele nach der Tabelle an.

Im Folgenden finden Sie einige Beispieleingaben und -ausgaben für eine Tabelle mit vier Spalten.

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 Sie Daten aus zwei Spalten kombinieren, um eine E-Mail-Adresse zu erstellen. Dabei werden die ursprünglichen Quellspalten mit dem Objekt DataView ausgeblendet:

var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Email');
data.addRows([
  ['John Lennon', '[e-mail]'],
  ['Paul McCartney', '[e-mail]'],
  ['George Harrison', '[e-mail]'],
  ['Ringo Starr', '[e-mail]']
]);

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%'});

Gadget-Hilfe

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 ihre Eigenschaften gemäß den Werten aus den Gadget-Einstellungen fest. Der Typ des Parameters prefs ist _IG_Prefs. Mit der Einstellung _table_query_url wird die Datenquellen-URL für die Abfrage festgelegt. Mit der Einstellung _table_query_refresh_interval wird das Aktualisierungsintervall für Abfragen in Sekunden festgelegt.
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, wird bei dieser Methode eine Fehlermeldung angezeigt.

Abfrageklassen

Die folgenden Objekte sind verfügbar, um Datenabfragen an eine externe Datenquelle wie Google Tabellen zu senden.

• Abfrage: Umschließt die ausgehende Datenanfrage.
• QueryResponse – Behandelt die Antwort aus 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 finden Sie in der Dokumentation zu Tabellen und Tabellen für Google 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 Properties 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 Sie die Abfrage mit XmlHttpRequest.
  • 'scriptInjection': Die Abfrage wird mit einer Skriptinjektion gesendet.
  • 'makeRequest' – [Nur für Gadgets verfügbar, die eingestellt wurden] Senden Sie die Anfrage über die Methode makeRequest(). Wenn dieses Flag angegeben ist, sollten Sie auch makeRequestParams angeben.
  • auto: Die Methode, die durch den URL-Parameter tqrt aus der Datenquellen-URL angegeben wird. tqrt kann die folgenden Werte haben: „xhr“, „scriptInjection“ oder „makeRequest“. Wenn tqrt fehlt oder einen ungültigen Wert hat, lautet der Standardwert „xhr“ für Anfragen derselben Domain und „scriptInjection“ für domainübergreifende Anfragen.
• makeRequestParams – [Objekt] Eine Zuordnung von Parametern für eine makeRequest()-Abfrage. Wird nur benötigt, wenn sendMethod "makeRequest" ist.

Methoden

Methode	Rückgabewert	Beschreibung
abort()	–	Stoppt das Senden der automatischen Abfrage, die mit setRefreshInterval() gestartet wurde.
setRefreshInterval(seconds)	–	Legt fest, dass die Abfrage die send-Methode automatisch ab einer bestimmten Dauer (in Sekunden) ab dem ersten expliziten Aufruf von send aufruft. seconds ist eine Zahl größer oder gleich null. Wenn Sie diese Methode verwenden, sollten Sie sie aufrufen, bevor Sie die Methode send aufrufen. Brechen Sie diese Methode ab, indem Sie sie noch einmal mit null (Standardeinstellung) aufrufen oder abort() aufrufen.
setTimeout(seconds)	–	Legt fest, wie viele Sekunden auf eine Antwort gewartet werden soll, bevor ein Zeitüberschreitungsfehler ausgegeben wird. seconds ist eine Zahl größer null. Das standardmäßige Zeitlimit beträgt 30 Sekunden. Diese Methode sollte, falls verwendet, vor dem Aufrufen der Methode send aufgerufen werden.
setQuery(string)	–	Legt den Abfragestring fest. Der Wert des Parameters string sollte eine gültige Abfrage sein. Diese Methode sollte aufgerufen werden, bevor die Methode send aufgerufen wird. Weitere Informationen zur Abfragesprache
send(callback)	–	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.

Suchantwort

Stellt eine Antwort auf eine Abfrageausführung dar, 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 richtet sich an Entwickler und kann technische Informationen enthalten, z. B. „Spalte {salary} ist nicht vorhanden“.
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 mit 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 ist nicht berechtigt, auf die Datenquelle zuzugreifen. invalid_query Die angegebene Abfrage weist einen Syntaxfehler auf. data_truncated Mindestens eine Datenzeile, die mit der Abfrageauswahl übereinstimmt, wurde aufgrund von Ausgabegrößenlimits nicht zurückgegeben. (Warnung). timeout Die Abfrage hat nicht innerhalb der erwarteten Zeit geantwortet.
hasWarning()	Boolesch	Gibt true zurück, wenn die Abfrageausführung Warnmeldungen enthält.
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 Abfrageausführung erfolgreich war und die Antwort eine Datentabelle enthält.

Fehleranzeige

Die API bietet verschiedene Funktionen, mit denen Sie Ihren Nutzern benutzerdefinierte Fehlermeldungen anzeigen können. Wenn Sie diese Funktionen verwenden möchten, geben Sie ein Containerelement auf der Seite an (in der Regel ein <div>), in das die API eine formatierte Fehlermeldung zeichnet. Dieser Container kann entweder das Visualisierungscontainerelement oder ein Container nur für Fehler sein. Wenn Sie das Visualisierungs-Include-Element 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.

Bei vielen Visualisierungen kann ein Fehlerereignis ausgelöst werden. Weitere Informationen finden Sie unten im Abschnitt zum Fehlerereignis.

Ein Beispiel für einen benutzerdefinierten Fehler finden Sie im Beispiel für einen 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 Sie den Fehler entfernen oder sein enthaltendes Element finden können.	Fügt dem angegebenen Seitenelement einen Fehleranzeigeblock mit festgelegtem Text und festgelegter Formatierung hinzu. container – Das DOM-Element, in das die Fehlermeldung eingefügt werden soll. Wenn der Container nicht gefunden werden kann, gibt die Funktion einen JavaScript-Fehler aus. message – Eine anzuzeigende Stringnachricht. opt_detailedMessage – Ein optionaler String für eine detaillierte Nachricht. Standardmäßig handelt es sich dabei um Mouseover-Text, der jedoch in der opt_options.showInToolTip-Property wie unten beschrieben geändert werden kann. opt_options – Ein optionales Objekt mit Eigenschaften, die verschiedene Anzeigeoptionen für die Nachricht festlegen. Folgende Optionen werden unterstützt: showInTooltip – Ein boolescher Wert, bei dem "true" die detaillierte Nachricht nur als Kurzinfo und "false" die detaillierte Nachricht im Containertext nach der Kurznachricht angibt. Der Standardwert ist "true". type: Ein String, der den Fehlertyp beschreibt. Dieser bestimmt, welche CSS-Stile auf diese Nachricht angewendet werden. Unterstützte Werte sind „error“ und „warning“. Der Standardwert ist „error“. 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 mit einem Mausklick vom Nutzer geschlossen werden kann. Der Standardwert ist "false".
addErrorFromQueryResponse(container, response)	String-ID-Wert, der das erstellte Fehlerobjekt identifiziert oder null, wenn die Antwort keinen Fehler anzeigt. Dies ist ein eindeutiger Wert auf der Seite, mit dem Sie den Fehler entfernen oder sein enthaltendes Element finden können.	Übergeben Sie einen Abfrageantwort- und Fehlermeldungscontainer an diese Methode: Wenn die Abfrageantwort einen Abfragefehler anzeigt, wird eine Fehlermeldung im angegebenen Seitenelement angezeigt. Wenn die Abfrageantwort null ist, löst die Methode einen JavaScript-Fehler aus. Übergeben Sie die im Abfrage-Handler empfangene QueryResponse an diese Nachricht, um einen Fehler anzuzeigen. Außerdem wird der Anzeigestil entsprechend dem Typ festgelegt (Fehler oder Warnung, ähnlich wie addError(opt_options.type)). container – Das DOM-Element, in das die Fehlermeldung eingefügt werden soll. Wenn der Container nicht gefunden werden kann, gibt die Funktion einen JavaScript-Fehler aus. response – Ein QueryResponse-Objekt, das von Ihrem Abfrage-Handler als Antwort auf eine Abfrage empfangen wird. Wenn der Wert null ist, gibt die Methode einen JavaScript-Fehler aus.
removeError(id)	Boolesch: „wahr“, wenn der Fehler entfernt wurde; andernfalls „falsch“.	Entfernt den durch die ID angegebenen Fehler von der Seite. id – Die String-ID eines Fehlers, der mit addError() oder addErrorFromQueryResponse() erstellt wurde.
removeAll(container)	–	Entfernt alle Fehlerblöcke aus einem angegebenen Container. Wenn der angegebene Container nicht vorhanden ist, wird ein Fehler ausgegeben. container – Das DOM-Element, das die zu entfernenden Fehlerstrings enthält. Wenn der Container nicht gefunden wird, gibt die Funktion einen JavaScript-Fehler aus.
getContainer(errorId)	Handle für ein DOM-Element, das den angegebenen Fehler enthält, oder null, wenn es nicht gefunden werden konnte.	Ruft einen Handle für das Containerelement ab, das den von 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 diese Ereignisse oft überwachen. Wenn Sie Ihre eigene Visualisierung codieren, können Sie diese Ereignisse auch selbst auslösen.

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

• google.visualization.events.addListener() und google.visualization.events.addOneTimeListener() überwachen Ereignisse.
• google.visualization.events.removeListener() entfernt vorhandenen Listener
• google.visualization.events.removeAllListeners() entfernt alle Listener eines bestimmten Diagramms
• google.visualization.events.trigger() löst ein Ereignis aus.

addListener()

Rufen Sie diese Methode auf, um Ereignisse zu registrieren, die durch eine auf Ihrer Seite gehostete Visualisierung ausgelöst werden. Dokumentieren Sie gegebenenfalls, welche Ereignisargumente an die Verarbeitungsfunktion übergeben werden.

google.visualization.events.addListener(source_visualization,
  event_name, handling_function)

Quellvisualisierung

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 wird, 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. Der Handler kann verwendet werden, um diesen Listener bei Bedarf durch Aufrufen von google.visualization.events.removeListener() zu entfernen.

Beispiel

Hier ist ein Beispiel für die Registrierung, um das Auswahlereignis zu erhalten

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

Dieser Wert ist mit addListener() identisch, gilt jedoch für Ereignisse, die nur einmal erfasst werden sollen. Die nachfolgenden Funktionen, bei denen das Ereignis ausgelöst wird, rufen die Verarbeitungsfunktion nicht auf.

Ein Beispiel für eine sinnvolle Verwendung: Bei jeder Verlosung wird das Ereignis ready ausgelöst. Wenn nur der erste ready den Code ausführen soll, verwenden Sie addOneTimeListener anstelle von addListener.

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 Ereignis-Listener einer bestimmten Visualisierungsinstanz aufzuheben.

google.visualization.events.removeAllListeners(source_visualization)

Quellvisualisierung

Ein Handle für die Quellvisualisierungsinstanz, aus der alle Ereignis-Listener entfernt werden sollen.

Trigger()

Wird von Implementierern der Visualisierung 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)

Quellvisualisierung

Ein Handle für die Instanz der Quellvisualisierung. Wenn Sie diese Funktion innerhalb einer Methode aufrufen, die durch die sendende Visualisierung definiert wird, 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. Beispiel:{message: "Hello there!", score: 10, name: "Fred"}. Sie können null übergeben, wenn keine Ereignisse erforderlich sind. Der Empfänger muss für diesen Parameter null akzeptieren können.

Beispiel

Im Folgenden sehen Sie ein Beispiel für eine Visualisierung, bei der eine Methode mit dem Namen „select“ ausgelöst wird, wenn ihre onclick-Methode aufgerufen wird. Es 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);
}

Standardmethoden und -eigenschaften für die Visualisierung

Bei jeder Visualisierung sollten die folgenden erforderlichen und optionalen Methoden und Properties angegeben werden. Es gibt jedoch keine Typprüfung, um diese Standards zu erzwingen. Daher sollten Sie die Dokumentation für jede Visualisierung lesen.

• Konstruktor
• Draw()
• getAction() [optional]
• getSelection() [optional]
• removeAction() [optional]
• setAction() [optional]
• setSelection() [optional]

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

Konstruktor

Der Konstruktor sollte den Namen Ihrer 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 der Seite. Im Hintergrund kann dies eine Grafik von einem Server abrufen oder die Grafik auf der Seite mithilfe des verknüpften Visualisierungscodes erstellen. 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

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 Dokumentation zur Visualisierung sollten die verfügbaren Optionen aufgeführt sein und die Standardoptionen unterstützt werden, wenn Sie diesen Parameter nicht angeben. Sie können die Syntax des JavaScript-Objektliterals verwenden, um eine Optionskarte zu übergeben: {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 in Visualisierungen angezeigt, die Kurzinfos enthalten und Kurzinfo-Aktionen zulassen.

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

Beispiel:

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

getSelection()

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

selection_array getSelection()

Rückgabe

selection_array: Ein Array mit ausgewählten Objekten, von denen jedes ein Datenelement in der zugrunde liegenden Tabelle beschreibt (ein DataView oder ein DataTable). Jedes Objekt hat die Properties row und/oder column mit dem Index der Zeile und/oder Spalte des ausgewählten Elements im zugrunde liegenden DataTable. Wenn das Attribut row null ist, ist die Auswahl eine Spalte. Wenn das Attribut column null ist, ist die Auswahl eine Zeile. Wenn beide nicht null sind, handelt es sich um ein spezifisches 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 in Visualisierungen angezeigt, die Kurzinfos enthalten und Kurzinfo-Aktionen zulassen.

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

Beispiel:

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

setAction() festlegen

Dies wird optional in Visualisierungen angezeigt, die Kurzinfos enthalten und Kurzinfo-Aktionen zulassen. Sie funktioniert nur für Kerndiagramme (Balken-, Säulen-, Linien-, Flächen-, Streu-, Kombinations-, Blasen-, Kreis-, Ringdiagramm, Kerzendiagramm, Histogramm, Stufenbereich).

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

setAction(action object)

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

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

Beispiel:

// 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.

Beispiel:

// 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 die Visualisierung visuell die neue Auswahl darstellen. Die Implementierung von setSelection() sollte nicht ein „select“-Ereignis auslösen. In Visualisierungen wird ein Teil der Auswahl möglicherweise 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 Auswahlliste sollte angewendet werden. 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, um ausgewählt zu bleiben. Rufen Sie setSelection(), setSelection(null) oder setSelection([]) auf, um die Auswahl aller Elemente aufzuheben.

setSelection(selection_array)

Auswahlarray

Ein Array von Objekten mit einer numerischen Zeilen- und/oder Spalteneigenschaft. row und column sind die nullbasierte Zeilen- oder Spaltennummer eines Elements in der Datentabelle, das ausgewählt werden kann. Wenn Sie eine ganze Spalte auswählen möchten, setzen Sie row auf null. Zum Auswählen einer ganzen Zeile setzen Sie column auf null. Beispiel:setSelection([{row:0,column:1},{row:1, column:null}]) wählt die Zelle bei (0,1) und die gesamte Zeile 1 aus.

Verschiedene statische Methoden

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

ArrayToDataTable()

Bei dieser Methode wird ein zweidimensionales Array in eine DataTable konvertiert.

Die Datentypen der Spalten werden automatisch anhand der bereitgestellten Daten ermittelt. Spaltendatentypen können auch mit der Objektliteralnotation in der ersten Zeile (der Spaltenüberschriftenzeile) des Arrays (d.h. {label: 'Start Date', type: 'date'}) angegeben werden. Optionale Datenrollen können ebenfalls verwendet werden, müssen jedoch explizit mit der Objektliteralschreibweise definiert werden. Die Objektliteralschreibweise 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 eine Zeile in der Datentabelle darstellt. Wenn opt_firstRowIsData auf „false“ (Standardeinstellung) gesetzt ist, wird die erste Zeile als Headerlabel interpretiert. Die Datentypen der einzelnen Spalten werden automatisch aus den angegebenen 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 oder nicht. Bei „true“ wird davon ausgegangen, 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. Die Standardeinstellung ist „false“.

Rückgabe

Eine neue 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);

DrawingChart()

Mit dieser Methode wird ein Diagramm in einem einzigen Aufruf erstellt. Diese Methode hat den Vorteil, dass sie weniger Code erfordert und Visualisierungen als Textstrings für die Wiederverwendung serialisiert und speichern kann. Diese Methode gibt keinen Handle für das erstellte Diagramm zurück. Daher können Sie keine Methoden-Listener zum Erfassen von Diagrammereignissen zuweisen.

Syntax

google.visualization.drawChart(chart_JSON_or_object)

Diagramm_JSON_oder_Objekt

Entweder ein JSON-Text oder ein JavaScript-Objekt mit folgenden Eigenschaften (Groß-/Kleinschreibung beachten):

Attribut	Typ	Erforderlich	Standard	Beschreibung
Diagrammtyp	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 diese Methode bei einer Google-Visualisierung geladen. 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, das die Visualisierung hostet.
Optionen	Objekt	Optional	keine	Ein Objekt, das die Optionen für die Visualisierung beschreibt. Sie können entweder die JavaScript-Literalschreibweise verwenden oder einen Handle für das Objekt angeben. Beispiel:"options": {"width": 400, "height": 240, "is3D": true, "title": "Company Performance"}
Datentabelle	Objekt	Optional	–	Ein DataTable zum Füllen der Visualisierung. Dies kann eine literale JSON-Stringdarstellung einer DataTable sein, wie oben beschrieben, ein Handle für ein ausgefülltes google.visualization.DataTable-Objekt oder ein zweidimensionales Array, wie von arrayToDataTable(opt_firstRowIsData=false) akzeptiert. Du musst entweder diese Property oder die Property dataSourceUrl angeben.
dataSourceUrl (Datenquellen-URL)	String	Optional	–	Eine Datenquellenabfrage für die Diagrammdaten, z. B. eine Google-Tabelle Du musst entweder diese Property oder die Property dataTable angeben.
query	String	Optional	–	Wenn Sie dataSourceUrl angeben, können Sie optional einen SQL-ähnlichen Abfragestring mithilfe der Visualisierungsabfragesprache angeben, um die Daten zu filtern oder zu bearbeiten.
updateInterval (Aktualisierungsintervall)	Zahl	Optional	–	Gibt an, wie oft die Abfragequelle in Sekunden aktualisiert wird. Verwenden Sie dies nur, wenn Sie dataSourceUrl angeben.
ansehen	Objekt ODER Array	Optional	–	Legt ein DataView-Initialisierungsobjekt fest, das als Filter für die zugrunde liegenden Daten fungiert, die durch den Parameter dataTable oder dataSourceUrl definiert werden. Sie können entweder einen String oder ein DataView-Initialisiererobjekt übergeben, das von dataview.toJSON() zurückgegeben wurde. Beispiel: "view": {"columns": [1, 2]} Sie können auch ein Array von DataView-Initialisiererobjekten übergeben. In diesem Fall wird das erste DataView im Array auf die zugrunde liegenden Daten angewendet, um eine neue Datentabelle zu erstellen, und das zweite DataView auf die Datentabelle, die sich aus der Anwendung des ersten DataView ergibt, usw.

Beispiele

Ein Tabellendiagramm erstellen, das auf einer Datenquelle für eine Tabelle basiert und die Abfrage SELECT A,D WHERE D > 100 ORDER BY D enthält

<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 erstellt, aber lokal wird 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. Über diese Symbolleiste kann der Nutzer die Visualisierungsdaten in verschiedene Formate exportieren oder eine einbettbare Version der Visualisierung zur Verwendung an verschiedenen Orten bereitstellen. Weitere Informationen und ein Codebeispiel finden Sie auf der Seite der Symbolleiste.