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.*
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'}] ]);
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()
undaddRows()
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 |
---|---|---|
ODER
|
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 Die erste Signatur hat die folgenden Parameter:
Die zweite Signatur hat einen einzelnen Objektparameter mit den folgenden Mitgliedern:
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.
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).
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.
Bei Datentabellen, die über Abfragen abgerufen werden, wird das Spaltenmuster von der Datenquelle oder der |
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
|
getColumnProperty(columnIndex, name)
|
Automatisch |
Gibt den Wert einer benannten Property oder
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
|
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.
Der zurückgegebene Spaltentyp kann einer der folgenden sein: |
getDistinctValues(columnIndex) |
Objekt-Array |
Gibt die eindeutigen Werte in einer bestimmten Spalte in aufsteigender Reihenfolge zurück.
Der Typ der zurückgegebenen Objekte ist derselbe wie der, der von der Methode |
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
Ein weiteres optionales Attribut (
Beispiel: |
getFormattedValue(rowIndex, columnIndex)
|
String |
Gibt den formatierten Wert der Zelle in den angegebenen Zeilen- und Spaltenindexen zurück.
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
|
getProperty(rowIndex, columnIndex, name)
|
Automatisch |
Gibt den Wert einer benannten Property oder
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
|
getRowProperty(rowIndex, name)
|
Automatisch |
Gibt den Wert einer benannten Property oder
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
Der zurückgegebene Wert ist ein Array von Zahlen. Jede Zahl ist ein Index einer
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. 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
Weitere Informationen: setTableProperties setTableProperty |
getValue(rowIndex, columnIndex) |
Objekt |
Gibt den Wert der Zelle in den angegebenen Zeilen- und Spaltenindexen zurück.
Der Typ des zurückgegebenen Werts hängt vom Spaltentyp ab (siehe getColumnType):
|
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.
Weitere Informationen: addColumn |
insertRows(rowIndex, numberOrArray) |
– |
Fügt die angegebene Anzahl von Zeilen im angegebenen Zeilenindex ein.
Weitere Informationen: addRows |
removeColumn(columnIndex) |
– |
Entfernt die Spalte beim angegebenen Index.
Weitere Informationen: removeColumns |
removeColumns(columnIndex, numberOfColumns)
|
– |
Entfernt die angegebene Anzahl von Spalten ab der Spalte im angegebenen Index.
Weitere Informationen: removeColumn |
removeRow(rowIndex) |
– |
Entfernt die Zeile beim angegebenen Index.
Weitere Informationen: removeRows |
removeRows(rowIndex, numberOfRows) |
– |
Entfernt die angegebene Anzahl von Zeilen ab der Zeile im angegebenen Index.
Weitere Informationen: removeRow |
setCell(rowIndex, columnIndex [, value [, formattedValue [, properties]]])
|
– |
Legt den Wert, den formatierten Wert und/oder die Eigenschaften einer Zelle fest.
Weitere Informationen: setValue(), setFormattedValue(), setProperty(), setProperties() |
setColumnLabel(columnIndex, label)
|
– |
Legt das Label einer Spalte fest.
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.
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.
Weitere Informationen: setColumnProperty getColumnProperty |
setFormattedValue(rowIndex, columnIndex, formattedValue)
|
– |
Legt den formatierten Wert einer Zelle fest.
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.
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.
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.
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.
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.
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.
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.
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]
-
Boolescher Wert: boolescher JavaScript-Wert ("true" oder "false"). Beispielwert:
-
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 dieDataTable
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'}]
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.
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 Propertyv
null sein, aber sie kann weiterhin die Attributef
undp
haben. -
f
[optional] Eine Stringversion desv
-Werts, die zur Anzeige formatiert ist. In der Regel stimmen die Werte überein. Dies ist jedoch nicht erforderlich. Wenn Sie alsoDate(2008, 0, 1)
fürv
angeben, sollten Sie „1. Januar 2008“ oder einen ähnlichen String für diese Property angeben. Dieser Wert wird nicht mit dem Wertv
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 Stringversionv
automatisch mit der Standardformatierung generiert. Dief
-Werte können mit Ihrem eigenen Formatierer geändert, mitsetFormattedValue()
odersetCell()
festgelegt oder mitgetFormattedValue()
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 MethodengetProperty()
undgetProperties()
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 derDataTable
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 dersetRows() 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 neueDataView
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 Änderungdraw()
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
oderDataView
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 Methodenset...()
oderhide...()
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 desDataView
verwendet haben, für das SieDataView.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 |
---|---|---|
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.
Beispiel: Wenn |
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.
Beispiel: Wenn |
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.
Beispiel: Wenn |
getViewColumns() |
Array von Zahlen |
Gibt die Spalten in dieser Ansicht in der angegebenen Reihenfolge zurück Wenn Sie also |
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.
Beispiel: Wenn |
getViewRows() |
Array von Zahlen |
Gibt die Zeilen in dieser Ansicht in der angegebenen Reihenfolge zurück Wenn Sie |
hideColumns(columnIndexes) |
keine |
Blendet die angegebenen Spalten aus der aktuellen Ansicht aus.
Beispiel: Wenn Sie eine Tabelle mit 10 Spalten haben und |
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) |
– |
Blendet die angegebenen Zeilen aus der aktuellen Ansicht aus.
Beispiel: Wenn Sie eine Tabelle mit 10 Zeilen haben und |
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.
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) |
– |
Legt die sichtbaren Zeilen in dieser Ansicht basierend auf Indexnummern aus der zugrunde liegenden Tabelle/Ansicht fest.
Beispiel: So erstellen Sie eine Ansicht mit den Zeilen 3 und 0 einer zugrunde liegenden Tabelle/Ansicht: |
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.
|
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
Alle Änderungen, die Sie am zurückgegebenen Objekt vornehmen, werden beim nächsten Aufruf von |
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
|
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:
-
Laden Sie das Paket
charteditor
. Laden Sie ingoogle.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. -
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. -
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. -
Rufen Sie
ChartEditor.openDialog()
auf und übergeben Sie dieChartWrapper
. Das Dialogfeld wird geöffnet. Mit den Dialogfeld-Schaltflächen kann der Nutzer den Editor schließen. Die InstanzChartEditor
ist verfügbar, solange sie im Geltungsbereich ist. Sie wird nicht automatisch gelöscht, nachdem der Nutzer das Dialogfeld geschlossen hat. - 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
|
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 |
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:
|
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 vongroup()
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 [[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.
- Ruft das befüllte
DataTable
-Objekt ab. - Gehen Sie für jede Spalte, die Sie neu formatieren möchten, so vor:
- 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.)
- Erstellen Sie den Formatierer und übergeben Sie das Optionsobjekt.
-
Rufen Sie
formatter
.format(table, colIndex)
auf und übergeben Sie die SpaltennummerDataTable
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 OptionallowHtml
unterstützt, sollten Sie sie auf „true“ setzen.
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:
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.
// 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.
|
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 | BeispielBeschreibung |
---|---|
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.
|
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
|
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:
Sie können nicht sowohl |
pattern |
Ein benutzerdefiniertes Formatmuster, das auf den Wert angewendet wird, ähnlich dem Datums- und Uhrzeitformat der ICU.
Beispiel:
Sie können nicht sowohl |
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 |
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:
|
„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“:
|
„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
Der Formatstring ist eine Teilmenge des ITC-Mustersatzes.
Zum Beispiel führt |
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 |
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
BeispielcodeDas folgende Beispiel zeigt einen Konstruktor für ein Muster, das ein Anchor-Element erstellt, wobei das erste und das zweite Element aus der Methode var formatter = new google.visualization.PatternFormat( '<a href="mailto:{1}">{0}</a>'); |
format(dataTable, srcColumnIndices,
opt_dstColumnIndex)
|
Der Standardformatierungsaufruf mit einigen zusätzlichen Parametern:
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', 'john@beatles.co.uk'], ['Paul McCartney', 'paul@beatles.co.uk'], ['George Harrison', 'george@beatles.co.uk'], ['Ringo Starr', 'ringo@beatles.co.uk'] ]); var table = new google.visualization.Table(document.getElementById('patternformat_div')); var formatter = new google.visualization.PatternFormat( '<a href="mailto:{1}">{0}</a>'); // Apply formatter and set the formatted value of the first column. formatter.format(data, [0, 1]); var view = new google.visualization.DataView(data); view.setColumns([0]); // Create a view with the first column only. table.draw(view, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});
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.
|
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“. Wenntqrt
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.
-
sendMethod – [optional, String]: Gibt die Methode an, die zum Senden der Abfrage verwendet werden soll. Wählen Sie einen der folgenden Stringwerte aus:
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 Wenn Sie diese Methode verwenden, sollten Sie sie aufrufen, bevor Sie die Methode
Brechen Sie diese Methode ab, indem Sie sie noch einmal mit null (Standardeinstellung) aufrufen oder |
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:
|
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.
|
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
|
removeError(id) |
Boolesch: „wahr“, wenn der Fehler entfernt wurde; andernfalls „falsch“. |
Entfernt den durch die ID angegebenen Fehler von der Seite.
|
removeAll(container) |
– |
Entfernt alle Fehlerblöcke aus einem angegebenen Container. Wenn der angegebene Container nicht vorhanden ist, wird ein Fehler ausgegeben.
|
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.
|
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
oderDataView
mit den Daten, die zum Zeichnen des Diagramms verwendet werden sollen. Es gibt keine Standardmethode zum Extrahieren einerDataTable
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
undcolumn
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 Sierow
auf null. Zum Auswählen einer ganzen Zeile setzen Siecolumn
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.