Auf dieser Seite sind die Objekte aufgeführt, die von der Google Visualization API zur Verfügung gestellt werden, sowie die Standardmethoden, die von allen Visualisierungen zur Verfügung gestellt werden.
Hinweis: Der Namespace der Google Visualization API ist google.visualization.*
.
Hinweis zu Arrays
Einige Browser können nachgestellte Kommas in JavaScript-Arrays nicht richtig verarbeiten. Verwenden Sie sie daher nicht. Leere Werte in der Mitte eines Arrays sind in Ordnung. Ein Beispiel:
data = ['a','b','c', ,]; // BAD
data = ['a','b','c']; // OK
data = ['a','b', ,'d']; // Also OK. The third value is undefined.
DataTable-Klasse
Stellt eine zweidimensionale, änderbare Wertetabelle dar. Wenn Sie eine schreibgeschützte Kopie einer DataTable
erstellen möchten (optional gefiltert, um bestimmte Werte, Zeilen oder Spalten anzuzeigen), erstellen Sie eine DataView.
Jeder Spalte wird ein Datentyp sowie mehrere optionale Attribute wie eine ID, ein Label und ein Musterstring zugewiesen.
Darüber hinaus können Sie jeder Zelle, Zeile, Spalte oder der gesamten Tabelle benutzerdefinierte Eigenschaften (Name/Wert-Paare) zuweisen. Einige Visualisierungen unterstützen bestimmte benutzerdefinierte Eigenschaften. Beispielsweise unterstützt die Tabellenvisualisierung die Zelleneigenschaft „style“, mit der Sie der gerenderten Tabellenzelle einen Inline-CSS-Stilstring zuweisen können. In einer Visualisierung sollten in der Dokumentation alle unterstützten benutzerdefinierten Eigenschaften beschrieben werden.
Siehe auch: QueryResponse.getDataTable
Konstruktor
Syntax
DataTable(opt_data, opt_version)
- opt_data
-
[Optional] Daten, die zum Initialisieren der Tabelle verwendet werden. Dies kann entweder die JSON-Datei sein, die durch Aufrufen von
DataTable.toJSON()
für eine ausgefüllte Tabelle zurückgegeben wird, oder ein JavaScript-Objekt mit Daten, die zum Initialisieren der Tabelle verwendet werden. Die Struktur des JavaScript-Literalobjekts wird hier beschrieben. Wenn dieser Parameter nicht angegeben wird, wird eine neue, leere Datentabelle zurückgegeben. - opt_version
- [Optional] Ein numerischer Wert, der die Version des verwendeten Verbindungsprotokolls angibt. Dies wird nur von Datenquellen-Implementierern für Diagrammtools verwendet. Die aktuelle Version ist 0.6.
Details
Das DataTable
-Objekt enthält die an eine Visualisierung übergebenen Daten.
Eine DataTable
ist eine einfache zweidimensionale Tabelle. Alle Daten in den einzelnen Spalten müssen denselben Datentyp haben. Jede Spalte hat einen Deskriptor, der ihren Datentyp, ein Label für diese Spalte (das möglicherweise von einer Visualisierung angezeigt wird) und eine ID, die verwendet werden kann, um auf eine bestimmte Spalte zu verweisen (als Alternative zur Verwendung von Spaltenindexen), enthält. Das DataTable
-Objekt unterstützt auch eine Zuordnung beliebiger Attribute, die einem bestimmten Wert, einer Zeile, einer Spalte oder dem gesamten DataTable
zugewiesen sind. In Visualisierungen können diese zur Unterstützung zusätzlicher Funktionen verwendet werden. Beispielsweise werden in der Tabellenvisualisierung benutzerdefinierte Eigenschaften verwendet, damit Sie einzelnen Zellen beliebige Klassennamen oder Stile zuweisen können.
Jede Zelle in der Tabelle enthält einen Wert. Zellen können einen Nullwert oder einen Wert des durch ihre Spalte angegebenen Typs haben. Die Zellen können optional eine „formatierte“ Version der Daten annehmen. Dies ist eine String-Version der Daten, die zur Anzeige durch eine Visualisierung formatiert ist. Eine Visualisierung kann die formatierte Version zur Anzeige verwenden (ist aber nicht erforderlich). Die Daten selbst werden jedoch immer für das Sortieren oder Berechnungen verwendet, z. B. um zu bestimmen, an welcher Stelle in einem Diagramm ein Punkt platziert werden soll. Ein Beispiel wäre die Zuweisung der Werte "low", "medium" und "high" als formatierte Werte zu numerischen Zellenwerten von 1, 2 und 3.
Wenn Sie nach dem Aufruf des Konstruktors Datenzeilen hinzufügen möchten, können Sie entweder addRow()
für eine einzelne Zeile oder addRows()
für mehrere Zeilen aufrufen. Sie können auch Spalten hinzufügen, indem Sie die addColumn()
-Methoden aufrufen. Es gibt auch Entfernungsmethoden für Zeilen und Spalten. Statt Zeilen oder Spalten zu entfernen, sollten Sie jedoch eine DataView
erstellen, die eine selektive Ansicht der DataTable
ist.
Wenn Sie Werte in einem DataTable
ändern, nachdem es an die draw()
-Methode einer Visualisierung übergeben wurde, wirken sich die Änderungen nicht sofort auf das Diagramm aus. Sie müssen draw()
noch einmal aufrufen, um Änderungen zu übernehmen.
Hinweis: Google Charts führt keine Validierung von Datentabellen durch. (Andernfalls würden Diagramme langsamer gerendert.) Wenn Sie eine Zahl angeben, bei der Ihre Spalte einen String erwartet (oder umgekehrt), versucht Google Charts, den Wert auf eine sinnvolle Weise zu interpretieren. Fehler werden jedoch nicht gekennzeichnet.
Beispiele
Im folgenden Beispiel wird das Instanziieren und Ausfüllen einer DataTable
mit einem literalen String mit denselben Daten wie im JavaScript-Beispiel oben veranschaulicht:
var dt = new google.visualization.DataTable({ cols: [{id: 'task', label: 'Task', type: 'string'}, {id: 'hours', label: 'Hours per Day', type: 'number'}], rows: [{c:[{v: 'Work'}, {v: 11}]}, {c:[{v: 'Eat'}, {v: 2}]}, {c:[{v: 'Commute'}, {v: 2}]}, {c:[{v: 'Watch TV'}, {v:2}]}, {c:[{v: 'Sleep'}, {v:7, f:'7.000'}]}] }, 0.6);
Im folgenden Beispiel wird eine neue, leere DataTable
erstellt und dann manuell mit den oben genannten Daten gefüllt:
var data = new google.visualization.DataTable(); data.addColumn('string', 'Task'); data.addColumn('number', 'Hours per Day'); data.addRows([ ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', {v:7, f:'7.000'}] ]);
Sie können ein DataTable
erstellen, indem Sie entweder den Konstruktor ohne Parameter aufrufen und dann Werte hinzufügen, indem Sie die unten aufgeführten Methoden addColumn()
/addRows()
aufrufen oder ein ausgefülltes JavaScript-Literalobjekt übergeben, um es zu initialisieren. Beide Methoden werden im Folgenden beschrieben. Welche Methode sollten Sie verwenden?
-
Code zum Erstellen und Ausfüllen einer Tabelle in JavaScript durch Aufrufen von
addColumn()
,addRow()
undaddRows()
ist sehr gut lesbar. Diese Methode ist nützlich, wenn Sie Code von Hand eingeben. Dies ist langsamer als die Verwendung der Objektliteral-Notation (siehe unten), aber in kleineren Tabellen (z. B. 1.000 Zellen) werden Sie wahrscheinlich keinen großen Unterschied bemerken. -
Die direkte Deklaration des
DataTable
-Objekts mit der Objektliteral-Notation ist in großen Tabellen erheblich schneller. Die richtige Syntax kann jedoch eine schwierige Syntax sein. Verwenden Sie diese Methode, wenn Sie die Objektliteralsyntax im Code generieren können, um die Wahrscheinlichkeit von Fehlern zu verringern.
Methoden
Methode | Rückgabewert | Beschreibung |
---|---|---|
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:
Siehe auch: getColumnId, getColumnLabel, getColumnType, insertColumn, getColumnRole |
addRow(opt_cellArray) |
Zahl |
Fügt der Datentabelle eine neue Zeile hinzu und gibt den Index der neuen Zeile zurück.
Beispiele: data.addRow(); // Add an empty row data.addRow(['Hermione', new Date(1999,0,1)]); // Add a row with a string and a date value. // Add a row with two cells, the second with a formatted value. data.addRow(['Hermione', {v: new Date(1999,0,1), f: 'January First, Nineteen ninety-nine'} ]); data.addRow(['Col1Val', null, 'Col3Val']); // Second column is undefined. data.addRow(['Col1Val', , 'Col3Val']); // Same as previous. |
addRows(numOrArray) |
Zahl |
Fügt neue Zeilen zur Datentabelle hinzu und gibt den Index der zuletzt hinzugefügten Zeile zurück. Sie können diese Methode aufrufen, um neue leere Zeilen zu erstellen oder mit Daten, die zum Füllen der Zeilen verwendet werden, wie unten beschrieben.
Example: data.addRows([ ['Ivan', new Date(1977,2,28)], ['Igor', new Date(1962,7,5)], ['Felix', new Date(1983,11,17)], ['Bob', null] // No date set for Bob. ]); Siehe auch: insertRows |
clone() |
DataTable | Gibt einen Klon der Datentabelle zurück. Das Ergebnis ist eine detaillierte Kopie der Datentabelle, mit Ausnahme der Zelleneigenschaften, Zeileneigenschaften, Tabelleneigenschaften und Spalteneigenschaften, bei denen es sich um oberflächliche Kopien handelt. Das bedeutet, dass nicht-primitive Eigenschaften durch Verweis kopiert werden, primitive Eigenschaften jedoch nach Wert. |
getColumnId(columnIndex) |
String |
Gibt die Kennzeichnung einer bestimmten Spalte zurück, die durch den Spaltenindex in der zugrunde liegenden Tabelle angegeben wird. Bei Datentabellen, die durch Abfragen abgerufen werden, wird die Spaltenkennung durch die Datenquelle festgelegt und kann bei Verwendung der Abfragesprache zum Verweisen auf Spalten verwendet werden. Siehe auch:Query.setQuery |
getColumnIndex(columnIdentifier) |
String, Zahl |
Gibt den Index einer bestimmten Spalte zurück, der durch den Spaltenindex, die ID oder das Label angegeben wird, sofern er in dieser Tabelle vorhanden ist. Andernfalls wird -1 zurückgegeben. Wenn columnIdentifier ein String ist, wird die Spalte zuerst nach ihrer ID und dann nach ihrem Label gesucht.Siehe auch: getColumnId, getColumnLabel |
getColumnLabel(columnIndex) |
String |
Gibt das Label einer bestimmten Spalte zurück, das durch den Spaltenindex in der zugrunde liegenden Tabelle angegeben wird.
Die Spaltenbeschriftung wird normalerweise als Teil der Visualisierung angezeigt. Das Spaltenlabel kann beispielsweise als Spaltenüberschrift in einer Tabelle oder als Legendenlabel in einem Kreisdiagramm angezeigt werden. Bei Datentabellen, die durch Abfragen abgerufen werden, wird die Spaltenbeschriftung durch die Datenquelle oder durch die label -Klausel der Abfragesprache festgelegt. Siehe auch:setColumnLabel |
getColumnPattern(columnIndex) |
String |
Gibt das Formatierungsmuster zurück, das zur Formatierung der Werte der angegebenen Spalte verwendet wird.
Bei Datentabellen, die durch 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. Beachten Sie, dass das Properties-Objekt über einen Verweis zurückgegeben wird. Wenn Sie also Werte im abgerufenen Objekt ändern, werden sie auch in
|
getColumnProperty(columnIndex, name)
|
Auto |
Gibt den Wert eines benannten Attributs oder
Weitere Informationen: setColumnProperty setColumnProperties |
getColumnRange(columnIndex) |
Objekt |
Gibt die Minimal- und Maximalwerte von Werten in einer bestimmten Spalte zurück. Das zurückgegebene Objekt hat die Attribute
|
getColumnRole(columnIndex) |
String | Gibt die role der angegebenen Spalte zurück. |
getColumnType(columnIndex) |
String |
Gibt den Typ einer bestimmten Spalte zurück, der durch den Spaltenindex angegeben wird.
Es kann einer der folgenden Spaltentypen zurückgegeben werden: |
getDistinctValues(columnIndex) |
Array von Objekten |
Gibt die eindeutigen Werte in einer bestimmten Spalte in aufsteigender Reihenfolge zurück.
Der Typ der zurückgegebenen Objekte entspricht dem Typ, der von der Methode |
getFilteredRows(filters) |
Array von Objekten |
Gibt die Zeilenindexe für Zeilen zurück, die mit allen angegebenen Filtern übereinstimmen. Die Indexe werden in aufsteigender Reihenfolge zurückgegeben. Die Ausgabe dieser Methode kann als Eingabe für
Ein weiteres optionales Attribut,
Beispiel: |
getFormattedValue(rowIndex, columnIndex)
|
String |
Gibt den formatierten Wert der Zelle an 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. Beachten Sie, dass das Properties-Objekt über einen Verweis zurückgegeben wird. Wenn Sie also Werte im abgerufenen Objekt ändern, werden sie auch in
|
getProperty(rowIndex, columnIndex, name)
|
Auto |
Gibt den Wert einer benannten Eigenschaft oder
Weitere Informationen: setCell setProperties setProperty |
getRowProperties(rowIndex)
|
Objekt |
Gibt eine Zuordnung aller Eigenschaften für die angegebene Zeile zurück. Beachten Sie, dass das Properties-Objekt über einen Verweis zurückgegeben wird. Wenn Sie also Werte im abgerufenen Objekt ändern, werden sie auch in
|
getRowProperty(rowIndex, name)
|
Auto |
Gibt den Wert eines benannten Attributs oder
Siehe auch: setRowProperty setRowProperties |
getSortedRows(sortColumns) |
Array von Zahlen |
Gibt eine sortierte Version der Tabelle zurück, ohne die Reihenfolge der zugrunde liegenden Daten zu ändern.
Wenn Sie die zugrunde liegenden Daten dauerhaft sortieren möchten, rufen Sie
Der zurückgegebene Wert ist ein Array aus Zahlen. Jede Zahl ist ein Index einer
Beachten Sie, dass das Sortieren garantiert stabil ist: Wenn Sie also nach den gleichen Werten zweier Zeilen sortieren, gibt die gleiche Sortierung die Zeilen jedes Mal in derselben Reihenfolge zurück. Beispiel: Wenn Sie für Zeilen iterieren möchten, die nach der dritten Spalte sortiert sind, verwenden Sie: var rowInds = data.getSortedRows([{column: 2}]); for (var i = 0; i < rowInds.length; i++) { var v = data.getValue(rowInds[i], 2); } |
getTableProperties
|
Objekt | Gibt eine Zuordnung aller Eigenschaften der Tabelle zurück. |
getTableProperty(name) |
Auto |
Gibt den Wert eines benannten Attributs oder
Weitere Informationen: setTableProperties setTableProperty |
getValue(rowIndex, columnIndex) |
Objekt |
Gibt den Wert der Zelle an 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]])
|
Ohne |
Fügt eine neue Spalte am angegebenen Index in die Datentabelle ein. Alle vorhandenen Spalten am oder nach dem angegebenen Index werden in einen höheren Index verschoben.
Siehe auch: addColumn |
insertRows(rowIndex, numberOrArray) |
Ohne |
Fügt die angegebene Anzahl von Zeilen am angegebenen Zeilenindex ein.
Siehe auch: addRows |
removeColumn(columnIndex) |
Ohne |
Entfernt die Spalte am angegebenen Index.
Siehe auch: removeColumns |
removeColumns(columnIndex, numberOfColumns)
|
Ohne |
Entfernt die angegebene Anzahl von Spalten beginnend bei der Spalte am angegebenen Index.
Siehe auch: removeColumn |
removeRow(rowIndex) |
Ohne |
Entfernt die Zeile im angegebenen Index.
Siehe auch: removeRows |
removeRows(rowIndex, numberOfRows) |
Ohne |
Entfernt die angegebene Anzahl von Zeilen beginnend bei der Zeile im angegebenen Index.
Siehe auch: removeRow |
setCell(rowIndex, columnIndex [, value [, formattedValue [, properties]]])
|
Ohne |
Legt den Wert, den formatierten Wert und/oder die Eigenschaften einer Zelle fest.
Weitere Informationen:setValue(), setFormattedValue(), setProperty(), setProperties(). |
setColumnLabel(columnIndex, label)
|
Ohne |
Legt das Label einer Spalte fest.
Siehe auch: getColumnLabel |
setColumnProperty(columnIndex, name, value)
|
Ohne |
Legt ein Spaltenattribut fest. Einige Visualisierungen unterstützen Zeilen-, Spalten- oder Zelleneigenschaften, um ihre Anzeige oder ihr Verhalten zu ändern. Informationen zu den unterstützten Eigenschaften finden Sie in der Visualisierungsdokumentation.
Siehe auch:setColumnProperties getColumnProperty |
setColumnProperties(columnIndex, properties)
|
Ohne |
Legt mehrere Spaltenattribute fest. Einige Visualisierungen unterstützen Zeilen-, Spalten- oder Zelleneigenschaften, um ihre Anzeige oder ihr Verhalten zu ändern. Informationen zu den unterstützten Eigenschaften finden Sie in der Visualisierungsdokumentation.
Siehe auch: setColumnProperty getColumnProperty |
setFormattedValue(rowIndex, columnIndex, formattedValue)
|
Ohne |
Legt den formatierten Wert einer Zelle fest.
Siehe auch: getFormattedValue |
setProperty(rowIndex, columnIndex, name, value)
|
Ohne |
Legt eine Zelleneigenschaft fest. Einige Visualisierungen unterstützen Zeilen-, Spalten- oder Zelleneigenschaften, um ihre Anzeige oder ihr Verhalten zu ändern. Informationen zu den unterstützten Eigenschaften finden Sie in der Visualisierungsdokumentation.
Siehe auch: setCell setProperties getProperty |
setProperties(rowIndex, columnIndex, properties)
|
Ohne |
Legt mehrere Zelleneigenschaften fest. Einige Visualisierungen unterstützen Zeilen-, Spalten- oder Zelleneigenschaften, um ihre Anzeige oder ihr Verhalten zu ändern. Informationen zu den unterstützten Eigenschaften finden Sie in der Visualisierungsdokumentation.
Siehe auch: setCell setProperty getProperty |
setRowProperty(rowIndex, name, value)
|
Ohne |
Legt ein Zeilenattribut fest. Einige Visualisierungen unterstützen Zeilen-, Spalten- oder Zelleneigenschaften, um ihre Anzeige oder ihr Verhalten zu ändern. Informationen zu den unterstützten Eigenschaften finden Sie in der Visualisierungsdokumentation.
Siehe auch: setRowProperties getRowProperty |
setRowProperties(rowIndex, properties)
|
Ohne |
Legt mehrere Zeileneigenschaften fest. Einige Visualisierungen unterstützen Zeilen-, Spalten- oder Zelleneigenschaften, um ihre Anzeige oder ihr Verhalten zu ändern. Informationen zu den unterstützten Eigenschaften finden Sie in der Visualisierungsdokumentation.
Siehe auch: setRowProperty getRowProperty |
setTableProperty(name, value)
|
Ohne |
Legt ein einzelnes Tabellenattribut fest. Einige Visualisierungen unterstützen Tabellen-, Zeilen-, Spalten- oder Zelleneigenschaften, um ihre Anzeige oder ihr Verhalten zu ändern. Informationen zu den unterstützten Eigenschaften finden Sie in der Visualisierungsdokumentation.
Weitere Informationen: setTableProperties getTableProperty |
setTableProperties(properties) |
Ohne |
Legt mehrere Tabelleneigenschaften fest. Einige Visualisierungen unterstützen Tabellen-, Zeilen-, Spalten- oder Zelleneigenschaften, um ihre Anzeige oder ihr Verhalten zu ändern. Informationen zu den unterstützten Eigenschaften finden Sie in der Visualisierungsdokumentation.
Siehe auch: setTableProperty getTableProperty |
setValue(rowIndex, columnIndex, value) |
Ohne |
Legt den Wert einer Zelle fest. Mit dieser Methode werden nicht nur vorhandene Zellenwerte überschrieben, sondern auch formatierte Werte und Eigenschaften der Zelle gelöscht.
Siehe auch: setCell, setFormattedValue, setProperty, setProperties |
sort(sortColumns) |
Ohne |
Sortiert die Zeilen entsprechend den angegebenen Sortierspalten. Der DataTable wird durch diese Methode geändert. Eine Beschreibung der Details zum Sortieren finden Sie unter getSortedRows() . Bei dieser Methode werden die sortierten Daten nicht zurückgegeben.Siehe auch: getSortedRows Beispiel: Um nach der dritten Spalte und dann nach der zweiten Spalte zu sortieren, verwenden Sie: data.sort([{column: 2}, {column: 1}]);
|
toJSON() |
String |
Gibt eine JSON-Darstellung von DataTable zurück, die an den Konstruktor DataTable übergeben werden kann. Beispiel: {"cols":[{"id":"Col1","label":"","type":"date"}], "rows":[ {"c":[{"v":"a"},{"v":"Date(2010,10,6)"}]}, {"c":[{"v":"b"},{"v":"Date(2010,10,7)"}]} ] } |
Format des JavaScript-Literalparameters data des Konstruktors
Zum Initialisieren eines DataTable
kannst du ein JavaScript-Stringliteralobjekt an den data-Parameter übergeben. Dieses Objekt nennen wir data. Sie können dieses Objekt gemäß der folgenden Beschreibung manuell codieren oder eine Python-Hilfsbibliothek verwenden, wenn Sie mit Python vertraut sind und diese auf Ihrer Website verwenden kann. Wenn Sie das Objekt jedoch manuell erstellen möchten, finden Sie in diesem Abschnitt eine Beschreibung der Syntax.
Sehen wir uns zuerst ein Beispiel für ein einfaches JavaScript-Objekt an, das eine Tabelle mit drei Zeilen und drei Spalten (String, Zahl und Datum) beschreibt:
{ cols: [{id: 'A', label: 'NEW A', type: 'string'}, {id: 'B', label: 'B-label', type: 'number'}, {id: 'C', label: 'C-label', type: 'date'} ], rows: [{c:[{v: 'a'}, {v: 1.0, f: 'One'}, {v: new Date(2008, 1, 28, 0, 31, 26), f: '2/28/08 12:31 AM'} ]}, {c:[{v: 'b'}, {v: 2.0, f: 'Two'}, {v: new Date(2008, 2, 30, 0, 31, 26), f: '3/30/08 12:31 AM'} ]}, {c:[{v: 'c'}, {v: 3.0, f: 'Three'}, {v: new Date(2008, 3, 30, 0, 31, 26), f: '4/30/08 12:31 AM'} ]} ], p: {foo: 'hello', bar: 'world!'} }
Lassen Sie uns nun die Syntax beschreiben:
Das data -Objekt besteht aus zwei erforderlichen übergeordneten Properties, cols
und rows
, sowie einer optionalen p
-Eigenschaft, die eine Zuordnung beliebiger Werte ist.
Hinweis:Bei allen angezeigten Attributnamen und Stringkonstanten wird die Groß-/Kleinschreibung beachtet. Außerdem muss der Wert bei Attributen, die einen Stringwert annehmen, in Anführungszeichen gesetzt werden.
Wenn Sie beispielsweise die Typeigenschaft als Zahl angeben möchten, würde der Wert so ausgedrückt: type: 'number'
. Der Wert selbst würde jedoch als numerischer Wert so ausgedrückt werden: v: 42
cols
-Property
cols
ist ein Array von Objekten, die die ID und den Typ jeder Spalte beschreiben. Jede Eigenschaft ist ein Objekt mit den folgenden Eigenschaften (unter Berücksichtigung der Groß- und Kleinschreibung):
-
type
[erforderlich] Der Datentyp der Daten in der Spalte. Unterstützt die folgenden Stringwerte (z. B. das Attribut „v:“, das weiter unten beschrieben wird):-
"boolean" - Boolescher JavaScript-Wert ("true" oder "false"). Beispielwert:
v:'true'
-
"number" - der JavaScript-Zahlenwert Beispielwerte:
v:7
,v:3.14
,v:-55
- "string" – JavaScript-Stringwert Beispielwert:
v:'hello'
-
„date“ – JavaScript-Datumsobjekt (Monat auf Nullbasis) mit abgeschnittener Zeit Beispielwert:
v:new Date(2008, 0, 15)
-
"datetime" – JavaScript-Datumsobjekt mit Uhrzeit. Beispielwert:
v:new Date(2008, 0, 15, 14, 30, 45)
-
"timeofday": Array aus drei Zahlen und einer optionalen vierten, die Stunde (0 steht für Mitternacht), Minute, Sekunde und optional Millisekunde steht. Beispielwerte:
v:[8, 15, 0]
,v: [6, 12, 1, 144]
-
"boolean" - Boolescher JavaScript-Wert ("true" oder "false"). Beispielwert:
-
id
[optional] String-ID der Spalte. Darf in der Tabelle nur einmal vorkommen. Verwende einfache alphanumerische Zeichen, damit die Hostseite keine komplizierten Escape-Zeichen für den Zugriff auf die Spalte in JavaScript erfordert. Achten Sie darauf, kein JavaScript-Keyword auszuwählen. Beispiel:id:'col_1'
-
label
[optional] Stringwert, der in einigen Visualisierungen für diese Spalte angezeigt wird. Beispiel:label:'Height'
-
pattern
[optional] Stringmuster, das von einer Datenquelle zum Formatieren numerischer, Datums- oder Uhrzeitspaltenwerte verwendet wurde. Dies dient nur als Referenz. Sie müssen das Muster wahrscheinlich nicht lesen und es ist auch nicht erforderlich. Der Google-Visualisierungsclient verwendet diesen Wert nicht. Er liest den formatierten Wert der Zelle. WennDataTable
als Antwort auf eine Abfrage mit einer format-Klausel aus einer Datenquelle stammt, wird wahrscheinlich das in dieser Klausel angegebene Muster in diesem Wert zurückgegeben. Die empfohlenen Musterstandards sind DecimalFormat und SimpleDateFormat auf der ICU. -
p
[Optional] Ein Objekt, das eine Zuordnung benutzerdefinierter Werte ist, die auf die Zelle angewendet wurden. Diese Werte können einen beliebigen JavaScript-Typ haben. Wenn Ihre Visualisierung Eigenschaften auf Zellenebene unterstützt, werden diese beschrieben. Andernfalls wird sie ignoriert. Beispiel:p:{style: 'border: 1px solid green;'}
.
Beispiel für cols
cols: [{id: 'A', label: 'NEW A', type: 'string'}, {id: 'B', label: 'B-label', type: 'number'}, {id: 'C', label: 'C-label', type: 'date'}]
Das Attribut rows
enthält ein Array von Zeilenobjekten.
Jedes Zeilenobjekt hat eine erforderliche Eigenschaft namens c
. Dabei handelt es sich um ein Array von Zellen in dieser Zeile. Außerdem hat sie die optionale p
-Eigenschaft, mit der eine Zuordnung beliebiger benutzerdefinierter Werte definiert wird, die der gesamten Zeile zugewiesen werden sollen. Wenn in Ihrer Visualisierung Attribute auf Zeilenebene unterstützt werden, werden diese beschrieben. Andernfalls wird sie ignoriert.
Jede Zelle in der Tabelle wird durch ein Objekt mit den folgenden Eigenschaften beschrieben:
-
v
[optional]: Der Zellenwert. Der Datentyp sollte dem Datentyp der Spalte entsprechen. Wenn die Zelle null ist, sollte die Eigenschaftv
null sein, obwohl sie weiterhin die Eigenschaftenf
undp
haben kann. -
f
[optional] Eine Stringversion desv
-Werts, die zur Anzeige formatiert ist. In der Regel stimmen die Werte überein, obwohl dies nicht zwingend erforderlich ist. Wenn Sie alsoDate(2008, 0, 1)
fürv
angeben, sollten Sie für dieses Attribut „1. Januar 2008“ oder einen ähnlichen String angeben. Dieser Wert wird nicht mit dem Wertv
verglichen. Die Visualisierung verwendet diesen Wert nicht für die Berechnung, sondern nur als Beschriftung für die Anzeige. Wenn nichts angegeben ist, wird mit dem Standardformatierer automatisch eine Stringversion vonv
generiert. Dief
-Werte können mit Ihrem eigenen Formatierer geändert oder mitsetFormattedValue()
odersetCell()
festgelegt oder mitgetFormattedValue()
abgerufen werden. -
p
[Optional] Ein Objekt, das eine Zuordnung benutzerdefinierter Werte ist, die auf die Zelle angewendet wurden. Diese Werte können einen beliebigen JavaScript-Typ haben. Wenn Ihre Visualisierung Eigenschaften auf Zellenebene unterstützt, werden diese beschrieben. Diese Attribute können mit den MethodengetProperty()
undgetProperties()
abgerufen werden. Beispiel:p:{style: 'border: 1px solid green;'}
.
Die Zellen im Zeilenarray müssen die gleiche Reihenfolge haben wie die Spaltenbeschreibungen in cols
. Um eine Null-Zelle anzugeben, können Sie null
angeben, eine Zelle in einem Array leer lassen oder nachgestellte Array-Mitglieder weglassen. Um also eine Zeile mit dem Nullwert für die ersten beiden Zellen anzugeben, können Sie [ , , {cell_val}]
oder [null, null, {cell_val}]
angeben.
Hier sehen Sie ein Beispiel für ein Tabellenobjekt mit drei Spalten, das mit drei Datenzeilen gefüllt ist:
{ cols: [{id: 'A', label: 'NEW A', type: 'string'}, {id: 'B', label: 'B-label', type: 'number'}, {id: 'C', label: 'C-label', type: 'date'} ], rows: [{c:[{v: 'a'}, {v: 1.0, f: 'One'}, {v: new Date(2008, 1, 28, 0, 31, 26), f: '2/28/08 12:31 AM'} ]}, {c:[{v: 'b'}, {v: 2.0, f: 'Two'}, {v: new Date(2008, 2, 30, 0, 31, 26), f: '3/30/08 12:31 AM'} ]}, {c:[{v: 'c'}, {v: 3.0, f: 'Three'}, {v: new Date(2008, 3, 30, 0, 31, 26), f: '4/30/08 12:31 AM'} ]} ] }
p-Eigenschaft
Das Attribut p
auf Tabellenebene ist eine Zuordnung benutzerdefinierter Werte, die auf die gesamte DataTable
angewendet werden. Diese Werte können einen beliebigen JavaScript-Typ haben. Wenn Ihre Visualisierung Attribute auf Datentabellenebene unterstützt, werden diese beschrieben. Andernfalls steht sie für die Anwendung zur Verfügung.
Beispiel: p:{className: 'myDataTable'}
.
DataView-Klasse
Eine schreibgeschützte Ansicht einer zugrunde liegenden DataTable Ein DataView
ermöglicht die Auswahl nur einer Teilmenge der Spalten und/oder Zeilen. Außerdem können Spalten/Zeilen neu angeordnet und Spalten/Zeilen dupliziert werden.
Eine Ansicht ist ein Live-Fenster in der zugrunde liegenden DataTable
, kein statischer Snapshot der Daten.
Sie müssen jedoch trotzdem vorsichtig sein, wenn Sie die Struktur der Tabelle selbst wie hier beschrieben ändern:
-
Das Hinzufügen oder Entfernen von Spalten aus der zugrunde liegenden Tabelle wird in der Ansicht nicht berücksichtigt und kann zu unerwartetem Verhalten in der Ansicht führen. Sie müssen eine neue
DataView
aus 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 an die Ansicht weitergegeben. Sie müssen jedoch nach dieser Änderung für alle Visualisierungen
draw()
aufrufen, damit der neue Zeilensatz gerendert wird. Wenn in der Ansicht Zeilen durch Aufrufen einer dersetRows() or hideRows()
-Methoden herausgefiltert wurden und Sie Zeilen in die zugrunde liegende Tabelle einfügen oder daraus entfernen, kommt es zu unerwartetem Verhalten. Sie müssen eine neueDataView
erstellen, die die neue Tabelle widerspiegelt. -
Das Ändern von Zellenwerten in vorhandenen Zellen ist sicher und Änderungen werden sofort an die
DataView
weitergegeben. Sie müssen jedoch nach dieser Änderung für alle Visualisierungendraw()
aufrufen, damit die neuen Zellenwerte gerendert werden.
Es ist auch möglich, ein DataView
aus einem anderen DataView
zu erstellen. Hinweis: Wenn eine zugrunde liegende Tabelle oder Ansicht erwähnt wird, bezieht sich diese auf die Ebene unmittelbar darunter. Mit anderen Worten: Er bezieht sich auf das Datenobjekt, mit dem diese DataView
erstellt wurde.
DataView
unterstützt auch berechnete Spalten. Dies sind Spalten, deren Wert spontan mit einer von Ihnen bereitgestellten Funktion berechnet wird. So können Sie beispielsweise eine Spalte einschließen, die die Summe von zwei vorhergehenden Spalten ist, oder eine Spalte, die das Kalenderquartal eines Datums aus einer anderen Spalte berechnet und anzeigt. Weitere Informationen finden Sie unter setColumns()
.
Wenn Sie ein DataView
ändern, indem Sie Zeilen oder Spalten aus- oder einblenden, wirkt sich dies erst auf die Visualisierung aus, wenn Sie draw()
für die Visualisierung noch einmal aufrufen.
Sie können DataView.getFilteredRows()
mit DataView.setRows()
kombinieren, um eine DataView
mit einer interessanten Teilmenge von Daten zu erstellen, wie hier gezeigt:
var data = new google.visualization.DataTable(); data.addColumn('string', 'Employee Name'); data.addColumn('date', 'Start Date'); data.addRows(6); data.setCell(0, 0, 'Mike'); data.setCell(0, 1, new Date(2008, 1, 28)); data.setCell(1, 0, 'Bob'); data.setCell(1, 1, new Date(2007, 5, 1)); data.setCell(2, 0, 'Alice'); data.setCell(2, 1, new Date(2006, 7, 16)); data.setCell(3, 0, 'Frank'); data.setCell(3, 1, new Date(2007, 11, 28)); data.setCell(4, 0, 'Floyd'); data.setCell(4, 1, new Date(2005, 3, 13)); data.setCell(5, 0, 'Fritz'); data.setCell(5, 1, new Date(2007, 9, 2)); // Create a view that shows everyone hired since 2007. var view = new google.visualization.DataView(data); view.setRows(view.getFilteredRows([{column: 1, minValue: new Date(2007, 0, 1)}])); var table = new google.visualization.Table(document.getElementById('test_dataview')); table.draw(view, {sortColumn: 1});
Konstruktoren
Es gibt zwei Möglichkeiten, eine neue DataView
-Instanz zu erstellen:
Konstruktor 1
var myView = new google.visualization.DataView(data)
data
-
Ein
DataTable
oderDataView
, das zum Initialisieren der Ansicht verwendet wird. Standardmäßig enthält die Ansicht alle Spalten und Zeilen in der zugrunde liegenden Datentabelle oder -ansicht in der ursprünglichen Reihenfolge. Wenn Sie Zeilen oder Spalten in dieser Ansicht ein- oder ausblenden möchten, rufen Sie die entsprechenden Methodenset...()
oderhide...()
auf.
Weitere Informationen
setColumns(), hideColumns(), setRows() und hideRows()
Konstruktor 2
Dieser Konstruktor erstellt eine neue DataView
. Dazu weist er einer DataTable
eine serialisierte DataView
zu.
Sie können damit das DataView
neu erstellen, das Sie mit DataView.toJSON()
serialisiert haben.
var myView = google.visualization.DataView.fromJSON(data, viewAsJson)
- Daten
-
Das
DataTable
-Objekt, mit dem du dieDataView
erstellt hast, auf dem duDataView.toJSON()
aufgerufen hast. Wenn sich diese Tabelle von der ursprünglichen Tabelle unterscheidet, erhalten Sie unvorhersehbare Ergebnisse. - viewAsJson
-
Der von
DataView.toJSON()
zurückgegebene JSON-String. Dies ist eine Beschreibung, welche Zeilen in der Datentabelle data ein- oder ausgeblendet werden.
Methoden
Methode | Rückgabewert | Beschreibung |
---|---|---|
Beschreibungen in DataTable ansehen. |
Wie die entsprechenden DataTable -Methoden, mit dem Unterschied, dass Zeilen-/Spaltenindexe auf den Index in der Ansicht und nicht auf die zugrunde liegende Tabelle/Ansicht verweisen.
|
|
getTableColumnIndex(viewColumnIndex)
|
Zahl |
Gibt den Index in der zugrunde liegenden Tabelle (oder Ansicht) einer bestimmten Spalte zurück, die durch ihren Index in dieser Ansicht angegeben ist.
Beispiel: Wenn |
getTableRowIndex(viewRowIndex) |
Zahl |
Gibt den Index in der zugrunde liegenden Tabelle (oder Ansicht) einer bestimmten Zeile zurück, die durch ihren Index in dieser Ansicht angegeben ist.
Beispiel: Wenn |
getViewColumnIndex(tableColumnIndex)
|
Zahl |
Gibt in dieser Ansicht den Index zurück, der einer bestimmten Spalte zugeordnet ist, die durch ihren Index in der zugrunde liegenden Tabelle (oder Ansicht) angegeben wird. Wenn mehr als ein solcher Index vorhanden ist, wird der erste (kleinste) Index zurückgegeben. Wenn ein solcher Index nicht vorhanden ist (die angegebene Spalte ist nicht in der Ansicht vorhanden), wird -1 zurückgegeben.
Beispiel: Wenn |
getViewColumns() |
Array von Zahlen |
Gibt die Spalten in dieser Ansicht der Reihe nach zurück. Wenn Sie also |
getViewRowIndex(tableRowIndex) |
Zahl |
Gibt in dieser Ansicht den Index zurück, der einer bestimmten Zeile zugeordnet ist, die durch ihren Index in der zugrunde liegenden Tabelle (oder Ansicht) angegeben wird. Wenn mehr als ein solcher Index vorhanden ist, wird der erste (kleinste) Index zurückgegeben. Wenn kein solcher Index vorhanden ist (die angegebene Zeile ist nicht in der Ansicht enthalten), wird -1 zurückgegeben.
Beispiel: Wenn |
getViewRows() |
Array von Zahlen |
Gibt die Zeilen in dieser Ansicht der Reihe nach zurück. Wenn Sie also |
hideColumns(columnIndexes) |
keine |
Blendet die angegebenen Spalten aus der aktuellen Ansicht aus.
Beispiel: Wenn Sie eine Tabelle mit zehn Spalten haben und |
hideRows(min, max) |
Ohne |
Blendet alle Zeilen mit Indexen aus, die zwischen Min und Max (einschließlich) liegen, aus der aktuellen Ansicht.
Dies ist eine praktische Syntax für |
hideRows(rowIndexes) |
Ohne |
Blendet die angegebenen Zeilen aus der aktuellen Ansicht aus.
Beispiel: Wenn Sie eine Tabelle mit 10 Zeilen haben und |
setColumns(columnIndexes) |
Ohne |
Gibt an, welche Spalten in dieser Ansicht sichtbar sind. Alle nicht angegebenen Spalten werden ausgeblendet. Hierbei handelt es sich um ein Array von Spaltenindexen in der zugrunde liegenden Tabelle/Ansicht oder in berechneten Spalten. Wenn Sie diese Methode nicht aufrufen, werden standardmäßig alle Spalten angezeigt. Das Array kann auch Duplikate enthalten, um dieselbe Spalte mehrmals anzuzeigen. Die Spalten werden in der angegebenen Reihenfolge angezeigt.
Beispiele: // Show some columns directly from the underlying data. // Shows column 3 twice. view.setColumns([3, 4, 3, 2]); // Underlying table has a column specifying a value in centimeters. // The view imports this directly, and creates a calculated column // that converts the value into inches. view.setColumns([1,{calc:cmToInches, type:'number', label:'Height in Inches'}]); function cmToInches(dataTable, rowNum){ return Math.floor(dataTable.getValue(rowNum, 1) / 2.54); } |
setRows(min, max) |
Ohne |
Legt fest, dass die Zeilen in dieser Ansicht alle Indexe (in der zugrunde liegenden Tabelle/Ansicht) sind, die zwischen Min und Max (einschließlich) liegen. Dies ist eine praktische Syntax für |
setRows(rowIndexes) |
Ohne |
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() |
DataTable |
Gibt ein DataTable -Objekt zurück, das die sichtbaren Zeilen und Spalten von DataView enthält.
|
toJSON() |
String |
Gibt eine Stringdarstellung dieses DataView zurück. Dieser String enthält nicht die eigentlichen Daten, sondern nur die DataView -spezifischen Einstellungen wie sichtbare Zeilen und Spalten. Sie können diesen String speichern und an den statischen Konstruktor DataView.fromJSON() übergeben, um diese Ansicht neu zu erstellen. Generierte Spalten werden dabei nicht berücksichtigt.
|
ChartWrapper-Klasse
Mit der Klasse ChartWrapper
wird Ihr Diagramm umschlossen und alle Lade-, Zeichen- und Datenquellenabfragen für Ihr Diagramm werden verarbeitet. Die Klasse stellt praktische Methoden zum Festlegen von Werten im Diagramm und zum Zeichnen des Diagramms bereit. Diese Klasse vereinfacht das Lesen aus einer Datenquelle, da kein Callback-Handler für Abfragen erstellt werden muss. Außerdem können Sie damit Diagramme speichern, um sie ganz einfach wiederverwenden zu können.
Ein weiterer Vorteil von ChartWrapper
ist, dass Sie die Anzahl der Bibliotheksaufrufe durch dynamisches Laden reduzieren können. Außerdem musst du die Pakete nicht explizit laden, da ChartWrapper
die Diagrammpakete für dich sucht und lädt.
Weitere Informationen finden Sie in den Beispielen unten.
ChartWrapper
propagiert derzeit jedoch nur eine Teilmenge der von Diagrammen ausgelösten Ereignisse: „select“, „ready“ und „error“. Andere Ereignisse werden nicht über die ChartWrapper-Instanz übertragen. Um andere Ereignisse abzurufen, müssen Sie getChart()
aufrufen und Ereignisse direkt im Diagramm-Handle abonnieren, wie hier gezeigt:
var wrapper; function drawVisualization() { // Draw a column chart wrapper = new google.visualization.ChartWrapper({ chartType: 'ColumnChart', dataTable: [['Germany', 'USA', 'Brazil', 'Canada', 'France', 'RU'], [700, 300, 400, 500, 600, 800]], options: {'title': 'Countries'}, containerId: 'visualization' }); // Never called. google.visualization.events.addListener(wrapper, 'onmouseover', uselessHandler); // Must wait for the ready event in order to // request the chart and subscribe to 'onmouseover'. google.visualization.events.addListener(wrapper, 'ready', onReady); wrapper.draw(); // Never called function uselessHandler() { alert("I am never called!"); } function onReady() { google.visualization.events.addListener(wrapper.getChart(), 'onmouseover', usefulHandler); } // Called function usefulHandler() { alert("Mouseover event!"); } }
Konstruktor
ChartWrapper(opt_spec)
- opt_spec
- [optional]: Entweder ein JSON-Objekt, das das Diagramm definiert, oder eine serialisierte Stringversion dieses Objekts. Das Format dieses Objekts ist in der drawChart()-Dokumentation beschrieben. Wenn nicht angegeben, müssen Sie alle entsprechenden Eigenschaften mit den von diesem Objekt bereitgestellten set...-Methoden festlegen.
Methoden
ChartWrapper stellt die folgenden zusätzlichen Methoden bereit:
Methode | Rückgabetyp | Beschreibung |
---|---|---|
draw(opt_container_ref) |
Ohne |
Zeichnet das Diagramm. Sie müssen diese Methode nach allen Änderungen am Diagramm oder an den Daten aufrufen, damit die Änderungen angezeigt werden.
|
toJSON() |
String | Gibt eine Stringversion der JSON-Darstellung des Diagramms zurück. |
clone() |
ChartWrapper | Gibt eine detaillierte Kopie des Diagramm-Wrappers zurück. |
getDataSourceUrl() |
String | Wenn die Daten dieses Diagramms aus einer Datenquelle stammen, wird die URL für diese Datenquelle zurückgegeben. Andernfalls wird null zurückgegeben. |
getDataTable() |
google.visualization.DataTable |
Wenn dieses Diagramm seine Daten aus einer lokal definierten
Alle Änderungen, die Sie am zurückgegebenen Objekt vornehmen, spiegeln sich 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. Bei einem Strukturkartendiagramm wird also beispielsweise „Treemap“ und nicht „google.visualization.treemap“ zurückgegeben.
|
getChartName() |
String | Gibt den von setChartName() zugewiesenen Diagrammnamen zurück. |
getChart() |
Diagrammobjektreferenz |
Gibt einen Verweis auf das von diesem ChartWrapper erstellte Diagramm zurück, z. B.
google.visualization.BarChart
oder
google.visualization.ColumnChart
.
Dies gibt null zurück, bis Sie draw() für das ChartWrapper-Objekt aufgerufen haben und ein Ready-Ereignis ausgelöst wird. Die für das zurückgegebene Objekt aufgerufenen Methoden werden auf der Seite wiedergegeben.
|
getContainerId() |
String | Die ID des DOM-Containerelements des Diagramms. |
getQuery() |
String | Der Abfragestring für dieses Diagramm, sofern vorhanden und der eine Datenquelle abfragt. |
getRefreshInterval() |
Zahl | Jedes Aktualisierungsintervall für dieses Diagramm, wenn eine Datenquelle abgefragt wird. Null bedeutet, dass keine Aktualisierung erfolgt. |
getOption(key, opt_default_val) |
Beliebiger Typ |
Gibt den angegebenen Wert für die Diagrammoption zurück
|
getOptions() |
Objekt | Gibt das Optionsobjekt für dieses Diagramm zurück |
getView() |
Objekt ODER Array |
Gibt das DataView -Initialisierungsobjekt im selben Format wie dataview.toJSON() oder ein Array solcher Objekte zurück.
|
setDataSourceUrl(url) |
Ohne | Legt die URL einer Datenquelle für dieses Diagramm fest. Wenn Sie auch eine Datentabelle für dieses Objekt festlegen, wird die Datenquellen-URL ignoriert. |
setDataTable(table) |
Ohne | Legt die DataTable für das Diagramm fest. Übergeben Sie einen der folgenden Werte: null, ein DataTable-Objekt, eine JSON-Darstellung einer DataTable oder ein Array gemäß der Syntax von arrayToDataTable(). |
setChartType(type) |
Ohne |
Legt den Diagrammtyp fest. Übergeben Sie den Klassennamen des umschlossenen Diagramms. Wenn es sich um ein Google-Diagramm handelt, können Sie es nicht mit google.visualization qualifizieren. Bei einem Kreisdiagramm übergeben Sie also beispielsweise "Kreisdiagramm".
|
setChartName(name) |
Ohne | Legt einen beliebigen Namen für das Diagramm fest. Dies wird nirgendwo im Diagramm angezeigt, es sei denn, ein benutzerdefiniertes Diagramm ist explizit dafür vorgesehen. |
setContainerId(id) |
Ohne | Legt die ID des beinhaltenden DOM-Elements für das Diagramm fest |
setQuery(query_string) |
Ohne | Legt einen Abfragestring fest, wenn in diesem Diagramm eine Datenquelle abgefragt wird. Wenn Sie diesen Wert angeben, müssen Sie auch die URL der Datenquelle festlegen. |
setRefreshInterval(interval) |
Ohne | Legt das Aktualisierungsintervall für dieses Diagramm fest, wenn eine Datenquelle abgefragt wird. Wenn Sie diesen Wert angeben, müssen Sie auch eine Datenquellen-URL festlegen. Null bedeutet, dass keine Aktualisierung erfolgt. |
setOption(key, value) |
Ohne |
Legt einen einzelnen Diagrammoptionswert fest, wobei key der Optionsname und value der Wert ist. Wenn Sie die Festlegung einer Option aufheben möchten, übergeben Sie als Wert null. key kann ein qualifizierter Name wie 'vAxis.title' sein.
|
setOptions(options_obj) |
Ohne | Legt ein vollständiges Optionsobjekt für ein Diagramm fest. |
setView(view_spec) |
Ohne |
Legt ein DataView -Initialisierungsobjekt fest, das als Filter für die zugrunde liegenden Daten dient. Dem Diagramm-Wrapper müssen Daten aus einer Datentabelle oder einer Datenquelle zugrunde liegen, auf die diese Ansicht angewendet werden kann. Sie können entweder einen String oder ein DataView -Initialisierungsobjekt übergeben, wie das von dataview.toJSON() zurückgegeben wird. Sie können auch ein Array von DataView -Initialisierungsobjekten übergeben. In diesem Fall wird die erste DataView im Array auf die zugrunde liegenden Daten angewendet, um eine neue Datentabelle zu erstellen. Die zweite DataView wird auf die Datentabelle angewendet, die sich aus der Anwendung des ersten DataView ergibt usw.
|
Veranstaltungen
Das ChartWrapper-Objekt gibt die folgenden Ereignisse aus. Sie müssen ChartWrapper.draw()
aufrufen, bevor Ereignisse ausgelöst werden.
Name | Beschreibung | Attribute |
---|---|---|
error |
Wird ausgelöst, wenn beim Versuch, das Diagramm zu rendern, ein Fehler auftritt. | ID, Nachricht |
ready |
Das Diagramm ist bereit für externe Methodenaufrufe. Wenn Sie mit dem Diagramm interagieren und Methoden aufrufen möchten, nachdem Sie es gezeichnet haben, sollten Sie einen Listener für dieses Ereignis einrichten, bevor Sie die Methode draw aufrufen. Dieser Listener muss erst aufgerufen werden, nachdem das Ereignis ausgelöst wurde.
|
Ohne |
select |
Wird ausgelöst, wenn der Nutzer auf eine Leiste oder Legende klickt Bei Auswahl eines Diagrammelements wird die entsprechende Zelle in der Datentabelle ausgewählt. Bei Auswahl einer Legende wird die entsprechende Spalte in der Datentabelle ausgewählt. Wenn Sie wissen möchten, was ausgewählt wurde, rufen Sie
ChartWrapper.getChart().
getSelection() auf. Dies wird nur ausgelöst, wenn der zugrunde liegende Diagrammtyp ein Auswahlereignis auslöst.
|
Ohne |
Beispiel
Mit den folgenden beiden Snippets wird ein äquivalentes Liniendiagramm erstellt. Im ersten Beispiel wird das Diagramm mit der JSON-Literal-Notation definiert. Im zweiten Beispiel werden ChartWrapper-Methoden verwendet, um diese Werte festzulegen.
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Google Visualization API Sample</title> <!-- One script tag loads all the required libraries! --> <script type="text/javascript" src='https://www.gstatic.com/charts/loader.js'></script> <script> google.charts.load('current); google.charts.setOnLoadCallback(drawVisualization); function drawVisualization() { var wrap = new google.visualization.ChartWrapper({ 'chartType':'LineChart', 'dataSourceUrl':'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1', 'containerId':'visualization', 'query':'SELECT A,D WHERE D > 100 ORDER BY D', 'options': {'title':'Population Density (people/km^2)', 'legend':'none'} }); wrap.draw(); } </script> </head> <body> <div id="visualization" style="height: 400px; width: 400px;"></div> </body> </html>
Dasselbe Diagramm, jetzt mit Setter-Methoden:
<!DOCTYPE html> <html> <head> <meta http-equiv='content-type' content='text/html; charset=utf-8'/> <title>Google Visualization API Sample</title> <!-- One script tag loads all the required libraries! --> <script type="text/javascript" src='https://www.gstatic.com/charts/loader.js'></script> <script type="text/javascript"> google.charts.load('current'); google.charts.setOnLoadCallback(drawVisualization); function drawVisualization() { // Define the chart using setters: var wrap = new google.visualization.ChartWrapper(); wrap.setChartType('LineChart'); wrap.setDataSourceUrl('http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1'); wrap.setContainerId('visualization'); wrap.setQuery('SELECT A,D WHERE D > 100 ORDER BY D'); wrap.setOptions({'title':'Population Density (people/km^2)', 'legend':'none'}); wrap.draw(); } </script> </head> <body> <div id='visualization' style='height: 400px; width: 400px;'></div> </body> </html>
ChartEditor-Klasse
Die Klasse ChartEditor
wird verwendet, um ein In-Page-Dialogfeld zu öffnen, mit dem Nutzer eine Visualisierung im Handumdrehen anpassen können.
So verwenden Sie den ChartEditor:
-
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 nach Bedarf jedes Paket für Sie. -
Erstellen Sie ein
ChartWrapper
-Objekt, das das Diagramm für den Nutzer definiert, das angepasst werden soll. Dieses Diagramm wird im Dialogfeld angezeigt und der Nutzer verwendet den Editor, um das Diagramm neu zu gestalten, Diagrammtypen oder sogar die Quelldaten zu ändern. -
Erstellen Sie eine neue ChartEditor-Instanz und registrieren Sie sich, um auf das „ok“-Ereignis zu warten. Dieses Ereignis wird ausgelöst, wenn der Nutzer im Dialogfeld auf die Schaltfläche „OK“ klickt. Nach dem Empfang sollten Sie
ChartEditor.getChartWrapper()
aufrufen, um das vom Nutzer geänderte Diagramm abzurufen. -
Rufen Sie
ChartEditor.openDialog()
auf und übergeben SieChartWrapper
. Das Dialogfeld wird geöffnet. Über die Dialogfeldschaltflächen kann der Nutzer den Editor schließen. Die InstanzChartEditor
ist verfügbar, solange sie im Geltungsbereich liegt. 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 |
Öffnet den Diagrammeditor als eingebettetes Dialogfeld auf der Seite. Die Funktion wird sofort zurückgegeben und wartet nicht darauf, dass das Dialogfeld geschlossen wird. Wenn Sie den Bereich der Instanz nicht verlieren, können Sie noch einmal
|
getChartWrapper() |
ChartWrapper |
Gibt ein ChartWrapper zurück, das das Diagramm mit Nutzeränderungen darstellt. |
setChartWrapper(chartWrapper) |
null |
Mit dieser Methode können Sie das gerenderte Diagramm im Editor aktualisieren.
chartWrapper – Ein |
closeDialog() |
null | Schließt das Dialogfeld des Diagrammeditors. |
Optionen
Der Diagrammeditor unterstützt die folgenden Optionen:
Name | Typ | Standard | Beschreibung |
---|---|---|---|
dataSourceInput |
Element-Handle oder „urlbox“ | null |
Damit kann der Nutzer eine Datenquelle für das Diagramm angeben. Dieses Attribut kann einen von zwei Werten haben:
|
Veranstaltungen
Der Diagrammeditor gibt die folgenden Ereignisse aus:
Name | Beschreibung | Attribute |
---|---|---|
ok |
Wird ausgelöst, wenn der Nutzer im Dialogfeld auf die Schaltfläche „OK“ klickt. Nachdem Sie diese Methode erhalten haben, sollten Sie getChartWrapper() aufrufen, um das vom Nutzer konfigurierte Diagramm abzurufen.
|
keine |
cancel |
Wird ausgelöst, wenn der Nutzer im Dialogfeld auf die Schaltfläche „Abbrechen“ klickt. | keine |
Beispiel
Mit dem folgenden Beispielcode wird ein Diagrammeditor-Dialogfeld mit einem ausgefüllten Liniendiagramm geöffnet. Wenn der Nutzer auf „OK“ klickt, wird das bearbeitete Diagramm im angegebenen <div>
auf der Seite gespeichert.
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title> Google Visualization API Sample </title> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {packages: ['charteditor']}); </script> <script type="text/javascript"> google.charts.setOnLoadCallback(loadEditor); var chartEditor = null; function loadEditor() { // Create the chart to edit. var wrapper = new google.visualization.ChartWrapper({ 'chartType':'LineChart', 'dataSourceUrl':'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1', 'query':'SELECT A,D WHERE D > 100 ORDER BY D', 'options': {'title':'Population Density (people/km^2)', 'legend':'none'} }); chartEditor = new google.visualization.ChartEditor(); google.visualization.events.addListener(chartEditor, 'ok', redrawChart); chartEditor.openDialog(wrapper, {}); } // On "OK" save the chart to a <div> on the page. function redrawChart(){ chartEditor.getChartWrapper().draw(document.getElementById('vis_div')); } </script> </head> <body> <div id="vis_div" style="height: 400px; width: 600px;"></div> </body> </html>
Datenbearbeitungsmethoden
Der Namespace google.visualization.data
enthält statische Methoden, um SQL-ähnliche Vorgänge für DataTable
-Objekte auszuführen, z. B. zum Zusammenführen oder Gruppieren nach Spaltenwert.
Der Namespace google.visualization.data
stellt die folgenden Methoden zur Verfügung:
Methode | Beschreibung |
---|---|
google.visualization.data.group
|
Führt die SQL GROUP BY-Aktion aus, um eine Tabelle zurückzugeben, die nach Werten in bestimmten Spalten gruppiert ist. |
google.visualization.data.join
|
Verbindet zwei Datentabellen mit einer oder mehreren Schlüsselspalten. |
group()
Übernimmt ein ausgefülltes DataTable
-Objekt und führt einen SQL-ähnlichen GROUP BY-Vorgang durch. Dabei wird eine Tabelle mit Zeilen zurückgegeben, die nach den angegebenen Spaltenwerten gruppiert sind. Dadurch wird die Eingabe-DataTable
nicht geändert.
Die zurückgegebene Tabelle enthält eine Zeile für jede Kombination von Werten in den angegebenen Schlüsselspalten. Jede Zeile enthält die Schlüsselspalten sowie eine Spalte mit einem aggregierten Spaltenwert über alle Zeilen, die mit der Schlüsselkombination übereinstimmen (z. B. eine Summe oder Anzahl aller Werte in der angegebenen Spalte).
Der Namespace google.visualization.data
enthält mehrere nützliche Aggregationswerte (z. B. sum und count). Sie können aber auch eigene Werte definieren (z. B. standardDeviation oder secondHighest). Eine Anleitung zum Definieren Ihres eigenen Aggregators finden Sie im Anschluss an die Methodenbeschreibung.
Syntax
google.visualization.data.group(data_table, keys, columns)
- data_table
-
Die Eingabe-
DataTable
. Dies wird nicht durch den Aufruf vongroup()
geändert. - keys
-
Ein Array von Zahlen und/oder Objekten, die angeben, nach welchen Spalten gruppiert werden soll. Die Ergebnistabelle enthält jede Spalte in diesem Array sowie jede Spalte in columns. Bei einer Zahl ist dies ein Spaltenindex der Eingabe-
DataTable
, nach dem gruppiert werden soll. Wenn es sich um ein Objekt handelt, enthält es eine Funktion, mit der die angegebene Spalte geändert werden kann (z. B. 1 zum Wert in dieser Spalte addieren). Das Objekt muss die folgenden Eigenschaften haben:- Spalte: Eine Zahl, die ein Spaltenindex aus dt ist, auf den die Transformation angewendet werden soll.
- modifier: Eine Funktion, die einen Wert annimmt (den Zellenwert in dieser Spalte für jede Zeile) und den geänderten Wert zurückgibt. Diese Funktion wird verwendet, um den Spaltenwert zu ändern, der bei der Gruppierung unterstützt wird. Dazu wird z. B. eine whatQuarter-Funktion aufgerufen, die aus einer Datumsspalte ein Quartal berechnet, damit die API Zeilen nach Quartal gruppieren kann. Der berechnete Wert wird in den Schlüsselspalten der zurückgegebenen Tabelle angezeigt. Diese Funktion kann innerhalb dieses Objekts inline deklariert werden oder eine Funktion sein, die Sie an anderer Stelle in Ihrem Code definieren (sie muss sich innerhalb des aufrufenden Bereichs befinden). Die API bietet eine einfache Modifikatorfunktion. Hier finden Sie eine Anleitung zum Erstellen eigener, nützlicherer Funktionen. Sie müssen den Datentyp kennen, den diese Funktion akzeptieren kann, und ihn nur für Spalten dieses Typs aufrufen. Außerdem müssen Sie den Rückgabetyp dieser Funktion kennen und in der Property type, die als Nächstes beschrieben wird, deklarieren.
- type – Typ, der von der Funktion modifier zurückgegeben wird. Dies sollte ein JavaScript-Stringtyp sein, z. B. „Zahl“ oder „Boolescher Wert“.
-
label – [optional] Ein Stringlabel, um diese Spalte in der zurückgegebenen
DataTable
zuzuweisen. -
id – [optional] Eine String-ID, die dieser Spalte im zurückgegebenen
DataTable
zugewiesen werden soll.
Beispiele:[0]
,[0,2]
,[0,{column:1, modifier:myPlusOneFunc, type:'number'},2]
- Spalten
-
[Optional] Hier können Sie angeben, welche Spalten zusätzlich zu den Schlüsselspalten in die Ausgabetabelle aufgenommen werden sollen. Da alle Zeilen in der Zeilengruppe zu einer einzelnen Ausgabezeile komprimiert werden, müssen Sie festlegen, welcher Wert für diese Zeilengruppe angezeigt werden soll. Sie können beispielsweise den Spaltenwert aus der ersten Zeile in der Gruppe oder einen Durchschnitt aller Zeilen in dieser Gruppe anzeigen.
columns ist ein Array von Objekten mit den folgenden Attributen:
- Spalte: Eine Zahl, die den Index der anzuzeigenden Spalte angibt.
- aggregation: Eine Funktion, die ein Array aller Werte dieser Spalte in dieser Zeilengruppe annimmt und einen einzelnen Wert zur Anzeige in der Ergebniszeile zurückgibt. Der Rückgabewert muss von dem Typ sein, der in der Eigenschaft type des Objekts angegeben ist. Details zum Erstellen einer eigenen Aggregationsfunktion finden Sie unten. Sie müssen wissen, welche Datentypen diese Methode akzeptiert, und sie nur für Spalten des entsprechenden Typs aufrufen. Die API bietet mehrere nützliche Aggregationsfunktionen. Eine Liste finden Sie unten unter Bereitgestellte Aggregationsfunktionen. Unter Aggregationsfunktion erstellen erfahren Sie, wie Sie eine eigene Aggregationsfunktion schreiben.
- type – Rückgabetyp der Aggregationsfunktion. Dies sollte ein JavaScript-Stringtyp sein, z. B. „Zahl“ oder „Boolescher Wert“.
- label – [optional] Ein Stringlabel, das auf diese Spalte in der zurückgegebenen Tabelle angewendet werden soll.
- id – [optional] Eine String-ID, die auf diese Spalte in der zurückgegebenen Tabelle angewendet werden soll.
Rückgabewert
Ein DataTable
mit einer Spalte für jede in keys aufgeführte Spalte und einer Spalte für jede in columns aufgeführte Spalte. Die Tabelle wird von links nach rechts nach Schlüsselzeilen sortiert.
Beispiel
// This call will group the table by column 0 values. // It will also show column 3, which will be a sum of // values in that column for that row group. var result = google.visualization.data.group( dt, [0], [{'column': 3, 'aggregation': google.visualization.data.sum, 'type': 'number'}] ); *Input table* 1 'john' 'doe' 10 1 'jane' 'doe' 100 3 'jill' 'jones' 50 3 'jack' 'jones' 75 5 'al' 'weisenheimer' 500 *Output table* 1 110 3 125 5 500
Bereitgestellte Modifikatorfunktionen
Die API bietet die folgenden Modifikatorfunktionen, die Sie an die Schlüssel übergeben können. modifier an, um das Gruppierungsverhalten anzupassen.
Funktion | Typ des Eingabearrays | Rückgabetyp | Beschreibung |
---|---|---|---|
google.visualization.data.month |
Datum | number | Für ein bestimmtes Datum wird der nullbasierte Monatswert (0, 1, 2 usw.) zurückgegeben. |
Bereitgestellte Aggregationsfunktionen
Die API bietet die folgenden Aggregationsfunktionen, die Sie an die Spalten übergeben können. aggregation.
Funktion | Typ des Eingabearrays | Rückgabetyp | Beschreibung |
---|---|---|---|
google.visualization.data.avg |
number | number | Der Durchschnittswert des übergebenen Arrays. |
google.visualization.data.count |
Alle Typen | number | Die Anzahl der Zeilen in der Gruppe. Null- und doppelte Werte werden gezählt. |
google.visualization.data.max |
Zahl, String, Datum | number, string, Date, null | Höchstwert im Array. Bei Strings ist dies das erste Element in einer lexikografisch sortierten Liste. Bei Datumwerten ist dies das späteste Datum. NULL-Werte werden ignoriert. Gibt null zurück, wenn kein Maximalwert vorhanden ist. |
google.visualization.data.min |
Zahl, String, Datum | number, string, Date, null | Der Minimalwert im Array. Bei Strings ist dies das letzte Element in einer lexikografisch sortierten Liste. Bei Datumwerten ist dies das früheste Datum. NULL-Werte werden ignoriert. Gibt null zurück, wenn es kein Minimum gibt. |
google.visualization.data.sum |
number | number | Die Summe aller Werte im Array. |
Modifikatorfunktion erstellen
Sie können eine Modifikatorfunktion erstellen, um eine einfache Transformation onkey-Werte durchzuführen, bevor die group()
-Funktion die Zeilen gruppiert. Diese Funktion nimmt den Wert einer einzelnen Zelle, führt eine Aktion dafür aus (z. B. addiert den Wert 1) und gibt ihn zurück. Die Eingabe- und Rückgabetypen müssen nicht vom gleichen Typ sein, aber der Aufrufer muss die Ein- und Ausgabetypen kennen. Hier ist ein Beispiel für eine Funktion, die ein Datum annimmt und das Quartal zurückgibt:
// Input type: Date // Return type: number (1-4) function getQuarter(someDate) { return Math.floor(someDate.getMonth()/3) + 1; }
Aggregationsfunktion erstellen
Sie können eine Aggregationsfunktion erstellen, die eine Reihe von Spaltenwerten in einer Zeilengruppe annimmt und eine einzelne Zahl zurückgibt, z. B. die Anzahl oder den Durchschnitt von Werten. Hier sehen Sie eine Implementierung der angegebenen Aggregationsfunktion „Anzahl“, die die Anzahl der Zeilen in der Zeilengruppe zurückgibt:
// Input type: Array of any type // Return type: number function count(values) { return values.length; }
join()
Mit dieser Methode werden zwei Datentabellen (DataTable
- oder DataView
-Objekte) zu einer einzigen Ergebnistabelle zusammengeführt, ähnlich wie bei einer SQL JOIN-Anweisung. Sie geben ein oder mehrere Spaltenpaare (key-Spalten) zwischen den beiden Tabellen an und die Ausgabetabelle enthält die Zeilen gemäß einer von Ihnen angegebenen Join-Methode: nur Zeilen, bei denen beide Schlüssel übereinstimmen, alle Zeilen aus einer Tabelle oder alle Zeilen aus beiden Tabellen, unabhängig davon, ob die Schlüssel übereinstimmen. Die Ergebnistabelle enthält nur die Schlüsselspalten sowie alle zusätzlichen Spalten, die Sie angeben. Beachten Sie, dass dt2 keine Schlüsselduplikate haben kann, dt1 jedoch schon. Der Begriff "Schlüssel" bezeichnet die Kombination aller Schlüsselspaltenwerte und nicht einen bestimmten Schlüsselspaltenwert. Wenn also eine Zeile die Zellenwerte A | B | C hat und die Spalten 0 und 1 Schlüsselspalten sind, dann ist der Schlüssel für diese Zeile AB.
Syntax
google.visualization.data.join(dt1, dt2, joinMethod, keys, dt1Columns, dt2Columns);
- dt1
- Eine ausgefüllte
DataTable
, die mit dt2 zusammengeführt werden soll. - dt2
-
Ein ausgefüllter
DataTable
-Wert für den Join mit dt1. Diese Tabelle darf nicht mehrere identische Schlüssel enthalten (wobei ein Schlüssel eine Kombination aus Schlüsselspaltenwerten ist). - joinMethod
-
Ein String, der den Join-Typ angibt. Wenn dt1 mehrere Zeilen hat, die mit einer dt2-Zeile übereinstimmen, enthält die Ausgabetabelle alle übereinstimmenden dt1-Zeilen. Wählen Sie einen der folgenden Werte aus:
- "full" (vollständig) – Die Ausgabetabelle enthält alle Zeilen aus beiden Tabellen, unabhängig davon, ob die Schlüssel übereinstimmen. Nicht übereinstimmende Zeilen haben keine Zelleneinträge. Übereinstimmende Zeilen werden verknüpft.
- "inner": Der vollständige Join ist so gefiltert, dass nur Zeilen eingeschlossen werden, bei denen die Schlüssel übereinstimmen.
- 'left': Die Ausgabetabelle enthält alle Zeilen aus dt1, unabhängig davon, ob es passende Zeilen aus dt2 gibt.
- „right“: Die Ausgabetabelle enthält alle Zeilen aus dt2, unabhängig davon, ob es passende Zeilen aus dt1 gibt.
- keys
-
Ein Array mit Schlüsselspalten, die aus beiden Tabellen verglichen werden sollen. Jedes Paar ist ein Array mit zwei Elementen. Das erste ist ein Schlüssel in dt1 und das zweite ein Schlüssel in dt2. In diesem Array können Spalten nach Index, ID oder Label angegeben werden (siehe
getColumnIndex
).
Spalten müssen in beiden Tabellen vom gleichen Typ sein. Alle angegebenen Schlüssel müssen gemäß der durch joinMethod angegebenen Regel übereinstimmen, damit eine Zeile aus der Tabelle eingeschlossen wird. Schlüsselspalten sind immer in der Ausgabetabelle enthalten. Nur dt1, die linke Tabelle, kann doppelte Schlüssel enthalten; Schlüssel in dt2 müssen eindeutig sein. Der Begriff "Schlüssel" steht hier für einen eindeutigen Satz von Schlüsselspalten, nicht für einzelne Spaltenwerte. Wenn Ihre Schlüsselspalten beispielsweise A und B wären, würde die folgende Tabelle nur eindeutige Schlüssel/Wert-Paare enthalten (und könnte daher als dt2 verwendet werden):A B Jan Rot Jan Blau Fred Rot [[0,0], [2,1]]
vergleicht Werte aus der ersten Spalte in beiden Tabellen sowie aus der dritten Spalte aus dt1 mit der zweiten Spalte aus dt1. - dt1Columns
-
Ein Array mit Spalten aus dt1, die zusätzlich zu den Schlüsselspalten von dt1 in die Ausgabetabelle aufgenommen werden sollen. In diesem Array können Spalten nach Index, ID oder Label angegeben werden (siehe
getColumnIndex
). - dt2Columns
-
Ein Array mit Spalten aus dt2, die zusätzlich zu den Schlüsselspalten von dt2 in die Ausgabetabelle aufgenommen werden sollen. In diesem Array können Spalten nach Index, ID oder Label angegeben werden (siehe
getColumnIndex
).
Rückgabewert
Ein DataTable
mit den Schlüsselspalten, dt1Columns und dt2Columns. Diese Tabelle wird von links nach rechts nach den Schlüsselspalten sortiert. Wenn joinMethod "inner" ist, sollten alle Schlüsselzellen ausgefüllt werden. Bei anderen Join-Methoden hat die Tabelle einen Nullwert für alle nicht übereinstimmenden Schlüsselzellen, wenn kein übereinstimmender Schlüssel gefunden wird.
Beispiele
*Tables* dt1 dt2 bob | 111 | red bob | 111 | point bob | 111 | green ellyn | 222 | square bob | 333 | orange jane | 555 | circle fred | 555 | blue jane | 777 | triangle jane | 777 | yellow fred | 666 | dodecahedron * Note that right table has duplicate Jane entries, but the key we will use is * columns 0 and 1. The left table has duplicate key values, but that is * allowed. *Inner join* google.visualization.data.join(dt1, dt2, 'inner', [[0,0],[1,1]], [2], [2]); bob | 111 | red | point bob | 111 | green | point jane | 777 | yellow | triangle * Note that both rows from dt1 are included and matched to * the equivalent dt2 row. *Full join* google.visualization.data.join(dt1, dt2, 'full', [[0,0],[1,1]], [2], [2]); bob | 111 | red | point bob | 111 | green | point bob | 333 | orange | null ellyn | 222 | null | square fred | 555 | blue | null fred | 666 | null | dodecahedron jane | 555 | null | circle jane | 777 | yellow | triangle *Left join* google.visualization.data.join(dt1, dt2, 'left', [[0,0],[1,1]], [2], [2]); bob | 111 | red | point bob | 111 | green | point bob | 333 | orange | null fred | 555 | blue | null jane | 777 | yellow | triangle *Right join* google.visualization.data.join(dt1, dt2, 'right', [[0,0],[1,1]], [2], [2]); bob | 111 | red | point bob | 111 | green | point ellyn | 222 | null | square fred | 666 | null | dodecahedron jane | 555 | null | circle jane | 777 | yellow | triangle
Formatierer
Die Google Visualization API bietet Formatierer, mit denen Daten in einer Visualisierung neu formatiert werden können. Diese Formatierer ändern den formatierten Wert der angegebenen Spalte in allen Zeilen. Hinweis:
- Formatierer ändern nur die formatierten Werte, nicht die zugrunde liegenden Werte. Der angezeigte Wert wäre beispielsweise „1.000, 00 $“, der zugrunde liegende Wert wäre aber weiterhin „1.000“.
- Formatierer wirken sich jeweils nur auf eine Spalte aus. Wenn Sie mehrere Spalten neu formatieren möchten, wenden Sie auf jede Spalte, die Sie ändern möchten, einen Formatierer an.
- Wenn Sie auch benutzerdefinierte Formatierer verwenden, überschreiben bestimmte Google-Formatierer für Visualisierungen alle benutzerdefinierten Formatierer.
- Rufen Sie das ausgefüllte
DataTable
-Objekt ab. - Gehen Sie für jede Spalte, die Sie neu formatieren möchten, so vor:
- Erstellen Sie ein Objekt, in dem alle Optionen für die Formatierung angegeben werden. Dies ist ein einfaches JavaScript-Objekt mit einer Reihe von Attributen und Werten. In der Dokumentation des Formatierers erfahren Sie, welche Attribute unterstützt werden. (Optional können Sie ein Objekt-Literal-Notation-Objekt übergeben, mit dem Ihre Optionen festgelegt werden.)
- Erstellen Sie die Formatierung, indem Sie das Optionsobjekt übergeben.
-
Rufen Sie
formatter
.format(table, colIndex)
auf und übergeben SieDataTable
und die (nullbasierte) Spaltennummer der neu zu formatierenden Daten. Sie können auf jede Spalte nur eine Formatierer anwenden. Durch das Anwenden einer zweiten Formatierung werden einfach die Effekte der ersten überschrieben.
Wichtig:Viele Formatierer benötigen HTML-Tags, um eine spezielle Formatierung anzuzeigen. Wenn Ihre Visualisierung die OptionallowHtml
unterstützt, sollten Sie diese auf „true“ setzen.
Die eigentliche Formatierung auf die Daten wird aus dem Gebietsschema abgeleitet, mit dem die API geladen wurde. Weitere Informationen finden Sie unter Diagramme mit einer bestimmten Sprache laden .
Wichtig: Formatierer können nur mit einem DataTable
und nicht mit einem DataView
verwendet werden (DataView
-Objekte sind schreibgeschützt).
Allgemeine Schritte zur Verwendung eines Formatierers:
Hier ist ein Beispiel für das Ändern der formatierten Datumswerte einer Datumsspalte zur Verwendung eines langen Datumsformats („1. Januar 2009“):
var data = new google.visualization.DataTable(); data.addColumn('string', 'Employee Name'); data.addColumn('date', 'Start Date'); data.addRows(3); data.setCell(0, 0, 'Mike'); data.setCell(0, 1, new Date(2008, 1, 28)); data.setCell(1, 0, 'Bob'); data.setCell(1, 1, new Date(2007, 5, 1)); data.setCell(2, 0, 'Alice'); data.setCell(2, 1, new Date(2006, 7, 16)); // Create a formatter. // This example uses object literal notation to define the options. var formatter = new google.visualization.DateFormat({formatType: 'long'}); // Reformat our data. formatter.format(data, 1); // Draw our data var table = new google.visualization.Table(document.getElementById('dateformat_div')); table.draw(data, {showRowNumber: true});
Die meisten Formatierer bieten die folgenden zwei Methoden:
Methode | Beschreibung |
---|---|
google.visualization.formatter_name(options) |
Konstruktor, wobei formatter_name ein bestimmter Formatierklassenname ist.
// 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 die folgenden Formatierer:
Name des Formatierers | Beschreibung |
---|---|
ArrowFormat | Fügt einen Aufwärts- oder Abwärtspfeil hinzu, der angibt, ob der Zellenwert über oder unter einem bestimmten Wert liegt. |
BarFormat | Fügt einen farbigen Balken hinzu, dessen Richtung und Farbe anzeigt, ob der Zellenwert über oder unter einem bestimmten Wert liegt. |
ColorFormat | Färbt eine Zelle entsprechend ein, ob die Werte in einen bestimmten Bereich fallen. |
DateFormat | Formatiert einen Datums- oder Datum/Uhrzeit-Wert auf verschiedene Arten, z. B. „1. Januar 2009“, „1. Januar 2009“ und „1. Januar 2009“. |
NumberFormat | Formatiert verschiedene Aspekte numerischer Werte. |
PatternFormat | Verkettet Zellenwerte aus derselben Zeile in eine angegebene Zelle, zusammen mit beliebigem Text. |
ArrowFormat
Fügt einer numerischen Zelle einen Aufwärts- oder Abwärtspfeil hinzu, je nachdem, ob der Wert über oder unter einem angegebenen Basiswert liegt. Wenn er gleich dem Basiswert ist, wird kein Pfeil angezeigt.
Optionen
ArrowFormat
unterstützt die folgenden Optionen, die an den Konstruktor übergeben werden:
Wahltaste | Beschreibung |
---|---|
base |
Zahl, die den Basiswert angibt und mit dem Zellenwert verglichen wird. Ist der Zellenwert höher, enthält die Zelle einen grünen Aufwärtspfeil. Ist der Zellenwert niedriger, enthält die Zelle einen roten Abwärtspfeil. Ist der Wert gleich, gibt es keinen Pfeil. |
Beispielcode
var data = new google.visualization.DataTable(); data.addColumn('string', 'Department'); data.addColumn('number', 'Revenues Change'); data.addRows([ ['Shoes', {v:12, f:'12.0%'}], ['Sports', {v:-7.3, f:'-7.3%'}], ['Toys', {v:0, f:'0%'}], ['Electronics', {v:-2.1, f:'-2.1%'}], ['Food', {v:22, f:'22.0%'}] ]); var table = new google.visualization.Table(document.getElementById('arrowformat_div')); var formatter = new google.visualization.ArrowFormat(); formatter.format(data, 1); // Apply formatter to second column table.draw(data, {allowHtml: true, showRowNumber: true});
BarFormat
Fügt einer numerischen Zelle einen farbigen Balken hinzu, der angibt, ob der Zellenwert über oder unter einem angegebenen Basiswert liegt.
Optionen
BarFormat
unterstützt die folgenden Optionen, die an den Konstruktor übergeben werden:
Wahltaste | BeispielBeschreibung |
---|---|
base |
Zahl, die der Basiswert ist, mit dem der Zellenwert verglichen werden soll. Ist der Zellenwert höher, wird er rechts von der Basis gezeichnet, andernfalls nach links. Der Standardwert ist 0. |
colorNegative |
Ein String, der den Bereich mit negativen Werten von Balken angibt. Mögliche Werte sind „red“, „green“ und „blue“. Der Standardwert ist „red“. |
colorPositive |
Ein String, der die Farbe des Balkens mit positiven Werten angibt. Mögliche Werte sind „red“, „green“ und „blue“. Der Standardwert ist blau. |
drawZeroLine |
Ein boolescher Wert, der angibt, ob bei negativen Werten eine dunkle Basislinie mit einer Pixelzahl gezeichnet werden soll. Die dunkle Linie soll die visuelle Darstellung der Balken verbessern. Der Standardwert ist „false“. |
max |
Der Maximalwert für den Balkenbereich. Der Standardwert ist der höchste Wert in der Tabelle. |
min |
Der kleinste Zahlenwert für den Balkenbereich. Der Standardwert ist der niedrigste Wert in der Tabelle. |
showValue |
Falls wahr, werden Werte und Balken angezeigt, bei FALSCH werden nur Balken angezeigt. Der Standardwert ist "true". |
width |
Dicke jedes Balkens in Pixeln Der Standardwert ist 100. |
Beispielcode
var data = new google.visualization.DataTable(); data.addColumn('string', 'Department'); data.addColumn('number', 'Revenues'); data.addRows([ ['Shoes', 10700], ['Sports', -15400], ['Toys', 12500], ['Electronics', -2100], ['Food', 22600], ['Art', 1100] ]); var table = new google.visualization.Table(document.getElementById('barformat_div')); var formatter = new google.visualization.BarFormat({width: 120}); formatter.format(data, 1); // Apply formatter to second column table.draw(data, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});
ColorFormat
Weist dem Vorder- oder Hintergrund einer numerischen Zelle abhängig vom Zellenwert Farben zu. Dieser Formatierer ist ungewöhnlich, da er seine Optionen nicht im Konstruktor übernimmt. Stattdessen sollten Sie addRange()
oder addGradientRange()
beliebig oft aufrufen, um Farbbereiche hinzuzufügen, bevor Sie format()
aufrufen. Farben können in jedem zulässigen HTML-Format angegeben werden, z. B. „black“, „#000000“ oder „#000“.
Methoden
ColorFormat
unterstützt die folgenden Methoden:
Methode | Beschreibung |
---|---|
google.visualization.ColorFormat() |
Konstruktor. Nimmt keine Argumente an. |
addRange(from, to, color, bgcolor) |
Gibt eine Vordergrund- und/oder Hintergrundfarbe für eine Zelle an, je nach Zellenwert. Jeder Zelle mit einem Wert im angegebenen Bereich von from bis to werden color und bgcolor zugewiesen. Beachten Sie, dass der Bereich nicht inklusiv ist, da das Erstellen eines Bereichs von 1 bis 1.000 und einer Sekunde zwischen 1.000 und 2.000 den Wert 1.000 nicht deckt.
|
addGradientRange(from, to, color, fromBgColor,
toBgColor)
|
Weist entsprechend dem Zellenwert eine Hintergrundfarbe aus einem Bereich zu. Die Farbe wird so skaliert, dass sie dem Wert der Zelle in einem Bereich von einer Farbe für die untere Begrenzung bis zu einer oberen Begrenzungsfarbe entspricht. Beachten Sie, dass mit dieser Methode im Gegensatz zu
|
format(dataTable, columnIndex) |
Die Standardmethode format() , um Formatierungen auf die angegebene Spalte anzuwenden. |
Beispielcode
var data = new google.visualization.DataTable(); data.addColumn('string', 'Department'); data.addColumn('number', 'Revenues'); data.addRows([ ['Shoes', 10700], ['Sports', -15400], ['Toys', 12500], ['Electronics', -2100], ['Food', 22600], ['Art', 1100] ]); var table = new google.visualization.Table(document.getElementById('colorformat_div')); var formatter = new google.visualization.ColorFormat(); formatter.addRange(-20000, 0, 'white', 'orange'); formatter.addRange(20000, null, 'red', '#33ff33'); formatter.format(data, 1); // Apply formatter to second column table.draw(data, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});
DateFormat
Formatiert einen JavaScript-Date
-Wert auf verschiedene Arten, z. B. „1. Januar 2016“, „1/1/16“ und „1. Januar 2016“.
Optionen
DateFormat
unterstützt die folgenden Optionen, die an den Konstruktor übergeben werden:
Wahltaste | Beschreibung |
---|---|
formatType |
Eine schnelle Formatierungsoption für das Datum. Die folgenden Stringwerte werden unterstützt, wobei das Datum des 28. Februar 2016 so neu formatiert wird:
Sie können nicht sowohl |
pattern |
Ein benutzerdefiniertes Formatmuster, das auf den Wert angewendet werden soll, ähnlich dem Datums- und Uhrzeitformat auf 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 der Wert in einer anderen Zeitzone angezeigt. Wenn Sie beispielsweise ein Datumsobjekt mit 17:00 Uhr auf einem Computer in Greenwich, England, erstellt und für die Zeitzone -5 angegeben haben (options['timeZone'] = -5 oder Eastern Pacific Time in den USA), wird als Wert 12 Uhr angezeigt.
|
Methoden
DateFormat
unterstützt die folgenden Methoden:
Methode | Beschreibung |
---|---|
google.visualization.DateFormat(options) |
Konstruktor. Weitere Informationen finden Sie oben im Abschnitt zu den Optionen. |
format(dataTable, columnIndex) |
Die Standardmethode format() , um Formatierungen auf die angegebene Spalte anzuwenden. |
formatValue(value) |
Gibt den formatierten Wert eines bestimmten Werts zurück.
Für diese Methode ist kein |
Beispielcode
function drawDateFormatTable() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Employee Name'); data.addColumn('date', 'Start Date (Long)'); data.addColumn('date', 'Start Date (Medium)'); data.addColumn('date', 'Start Date (Short)'); data.addRows([ ['Mike', new Date(2008, 1, 28, 0, 31, 26), new Date(2008, 1, 28, 0, 31, 26), new Date(2008, 1, 28, 0, 31, 26)], ['Bob', new Date(2007, 5, 1, 0), new Date(2007, 5, 1, 0), new Date(2007, 5, 1, 0)], ['Alice', new Date(2006, 7, 16), new Date(2006, 7, 16), new Date(2006, 7, 16)] ]); // Create three formatters in three styles. var formatter_long = new google.visualization.DateFormat({formatType: 'long'}); var formatter_medium = new google.visualization.DateFormat({formatType: 'medium'}); var formatter_short = new google.visualization.DateFormat({formatType: 'short'}); // Reformat our data. formatter_long.format(data, 1); formatter_medium.format(data,2); formatter_short.format(data, 3); // Draw our data var table = new google.visualization.Table(document.getElementById('dateformat_div')); table.draw(data, {showRowNumber: true, width: '100%', height: '100%'}); }
Weitere Informationen zu Datumsmustern
Weitere Informationen zu den unterstützten Mustern:
Die Muster ähneln dem Datums- und Uhrzeitformat auf der ICU, die folgenden Muster werden jedoch noch nicht unterstützt: A e D F g Y u w W. Um Konflikte mit Mustern zu vermeiden, sollte jeder Literaltext, der in der Ausgabe angezeigt werden soll, in einfache Anführungszeichen gesetzt werden.Eine Ausnahme bilden einfache Anführungszeichen, die verdoppelt werden sollten. Beispiel:
"K 'o''clock.'"
.
Muster | Beschreibung | Beispielausgabe |
---|---|---|
GG | Ära-Bezeichner. | "Anzeige" |
yy oder yyyy | Jahr. | 1996 |
M |
Monat im Jahr. Für Januar:
|
„Juli“ „07“ |
t | Tag im Monat. Zusätzliche „d“-Werte addieren führende Nullen. | 10 |
Std. | Stunde im 12-Stunden-Skala. Zu zusätzlichen „h“-Werten werden führende Nullen addiert. | 12 |
H | Stunde im 24-Stunden-Format. Zu den zusätzlichen Hk-Werten werden führende Nullen addiert. | 0 |
m | Minute in Stunde. Zu zusätzlichen „M“-Werten werden führende Nullen addiert. | 30 |
s | Sekunde in Minute. Zusätzliche „s“-Werte addieren führende Nullen. | 55 |
S | Sekundenbruchteile Zusätzliche 'S'-Werte werden rechts mit Nullen aufgefüllt. | 978 |
E |
Wochentag. Folgende Ausgaben für "Dienstag":
|
„Di“ „Dienstag“ |
aa | AM/PM | „PM“ |
k | Stunde (1~24). Zu zusätzlichen „k“-Werten werden führende Nullen addiert. | 24 |
K | Stunde in AM/PM (0~11). Zu zusätzlichen „k“-Werten werden führende Nullen addiert. | 0 |
z | Zeitzone Für Zeitzone 5 wird „UTC+5“ ausgegeben. |
„UTC+5“ |
Z |
Zeitzone im RFC 822-Format. Für die Zeitzone -5: Z, ZZ, ZZZ produzieren -0500 ZZZZ und andere produzieren „GMT -05:00“ |
„-0800“ „GMT -05:00“ |
v | Zeitzone (generisch) |
„ usw./GMT-5“ |
' | Esc-Taste für Text | 'Datum=' |
'' | Einfaches Anführungszeichen | „jj“ |
NumberFormat
Beschreibt, wie numerische Spalten formatiert werden sollten. Zu den Formatierungsoptionen gehören die Angabe eines Präfixsymbols (z. B. ein Dollarzeichen) oder des Satzzeichens, das als Tausendertrennzeichen verwendet werden soll.
Optionen
NumberFormat
unterstützt die folgenden Optionen, die an den Konstruktor übergeben werden:
Wahltaste | Beschreibung |
---|---|
decimalSymbol |
Ein Zeichen, das als Dezimalmarkierung verwendet wird. Der Standardwert ist ein Punkt (.). |
fractionDigits |
Zahl, die angibt, wie viele Ziffern nach dem Dezimaltrennzeichen angezeigt werden. Der Standardwert ist 2. Wenn Sie mehr Ziffern angeben, als die Zahl enthält, werden für die kleineren Werte Nullen angezeigt. Abgeschnittene Werte werden gerundet (5 aufgerundet). |
groupingSymbol |
Ein Zeichen, mit dem die Ziffern links vom Dezimaltrennzeichen in Dreiersätze gruppiert werden. Der Standardwert ist ein Komma (,). |
negativeColor |
Die Textfarbe für negative Werte. Kein Standardwert. Die Werte können jeder akzeptable HTML-Farbwert wie „red“ oder „#FF0000“ sein. |
negativeParens |
Ein boolescher Wert, wobei „true“ angibt, dass negative Werte in Klammern gesetzt werden sollen. Standardwert ist True. |
pattern |
Ein Formatstring. Alle anderen Optionen mit Ausnahme von
Der Formatstring ist eine Teilmenge des
ICU-Mustersatzes
.
|
prefix |
Ein Stringpräfix für den Wert, z. B. "$". |
suffix |
Ein Stringsuffix für den Wert, z. B. „%“. |
Methoden
NumberFormat
unterstützt die folgenden Methoden:
Methode | Beschreibung |
---|---|
google.visualization.NumberFormat(options) |
Konstruktor. Weitere Informationen finden Sie oben im Abschnitt zu den Optionen. |
format(dataTable, columnIndex) |
Die Standardmethode format() , um Formatierungen auf die angegebene Spalte anzuwenden. |
formatValue(value) |
Gibt den formatierten Wert eines bestimmten Werts zurück. Diese Methode erfordert keine |
Beispielcode
var data = new google.visualization.DataTable(); data.addColumn('string', 'Department'); data.addColumn('number', 'Revenues'); data.addRows([ ['Shoes', 10700], ['Sports', -15400], ['Toys', 12500], ['Electronics', -2100], ['Food', 22600], ['Art', 1100] ]); var table = new google.visualization.Table(document.getElementById('numberformat_div')); var formatter = new google.visualization.NumberFormat( {prefix: '$', negativeColor: 'red', negativeParens: true}); formatter.format(data, 1); // Apply formatter to second column table.draw(data, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});
PatternFormat
Hiermit können Sie die Werte bestimmter Spalten zusammen mit beliebigem Text in einer einzigen Spalte zusammenführen. Wenn Sie beispielsweise eine Spalte für Vornamen und eine Spalte für Nachnamen haben, könnten Sie eine dritte Spalte mit {last name}, {first name}, füllen. Diese Formatierer folgen nicht den Konventionen für den Konstruktor und die Methode format()
. Eine Anleitung finden Sie im Abschnitt "Methoden" weiter unten.
Methoden
PatternFormat
unterstützt die folgenden Methoden:
Methode | Beschreibung |
---|---|
google.visualization.PatternFormat(pattern) |
Konstruktor. Verwendet kein Optionsobjekt. Stattdessen wird ein Stringparameter pattern verwendet. Dies ist ein String, der beschreibt, welche Spaltenwerte zusammen mit beliebigem Text in die Zielspalte eingegeben werden sollen. Betten Sie Platzhalter in Ihren String ein, um einen Wert aus einer anderen Spalte anzugeben, der eingebettet werden soll. Die Platzhalter sind
BeispielcodeDas folgende Beispiel zeigt einen Konstruktor für ein Muster, mit dem ein Ankerelement erstellt wird, wobei das erste und das zweite Element aus der Methode var formatter = new google.visualization.PatternFormat( '<a href="mailto:{1}">{0}</a>'); |
format(dataTable, srcColumnIndices,
opt_dstColumnIndex)
|
Standardformatierungsaufruf mit einigen zusätzlichen Parametern:
Die Formatierungsbeispiele finden Sie im Anschluss an die Tabelle. |
Hier sind einige Beispiele für Ein- und Ausgaben für eine vierspaltige Tabelle.
Row before formatting (4 columns, last is blank): John | Paul | Jones | [empty] var formatter = new google.visualization.PatternFormat("{0} {1} {2}"); formatter.format(data, [0,1,2], 3); Output: John | Paul | Jones | John Paul Jones var formatter = new google.visualization.PatternFormat("{1}, {0}"); formatter.format(data, [0,2], 3); Output: John | Paul | Jones | Jones, John
Beispielcode
Das folgende Beispiel zeigt, wie Daten aus zwei Spalten zu einer E-Mail-Adresse kombiniert werden können. Dabei wird ein DataView-Objekt verwendet, um die ursprünglichen Quellspalten auszublenden:
var data = new google.visualization.DataTable(); data.addColumn('string', 'Name'); data.addColumn('string', 'Email'); data.addRows([ ['John Lennon', 'john@beatles.co.uk'], ['Paul McCartney', 'paul@beatles.co.uk'], ['George Harrison', 'george@beatles.co.uk'], ['Ringo Starr', 'ringo@beatles.co.uk'] ]); var table = new google.visualization.Table(document.getElementById('patternformat_div')); var formatter = new google.visualization.PatternFormat( '<a href="mailto:{1}">{0}</a>'); // Apply formatter and set the formatted value of the first column. formatter.format(data, [0, 1]); var view = new google.visualization.DataView(data); view.setColumns([0]); // Create a view with the first column only. table.draw(view, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});
GadgetHelper
Eine Hilfsklasse zum Vereinfachen des Schreibens von Gadgets, die die Google Visualization API verwenden.
Konstruktor
google.visualization.GadgetHelper()
Methoden
Methode | Rückgabewert | Beschreibung |
---|---|---|
createQueryFromPrefs(prefs) |
google.visualization.Query |
Statisch. Erstellen Sie eine neue Instanz von google.visualization.Query und legen Sie die Attribute gemäß den Werten aus den Einstellungen des Gadgets fest. Der Typ des Parameters prefs ist _IG_Prefs.
|
validateResponse(response) |
Boolesch |
Statisch. Der Parameter response ist vom Typ google.visualization.QueryResponse. Gibt true zurück, wenn die Antwort Daten enthält. Gibt false zurück, wenn die Abfrageausführung fehlgeschlagen ist und die Antwort keine Daten enthält. Wenn ein Fehler aufgetreten ist, zeigt diese Methode eine Fehlermeldung an.
|
Abfrageklassen
Mit den folgenden Objekten können Datenabfragen an eine externe Datenquelle wie Google Tabellen gesendet werden.
- Abfrage – umschließt die ausgehende Datenanfrage.
- QueryResponse – verarbeitet die Antwort von der Datenquelle.
Abfrage
Stellt eine Abfrage dar, die an eine Datenquelle gesendet wird.
Konstruktor
google.visualization.Query(dataSourceUrl, opt_options)
Parameter
- dataSourceUrl
- [Erforderlich, String] URL, an die die Abfrage gesendet werden soll. Weitere Informationen zu Google Tabellen finden Sie in der Dokumentation zu Diagrammen und Tabellen.
- opt_options
-
[Optional, Objekt] Eine Zuordnung der Optionen für die Anfrage. Hinweis : Wenn Sie auf eine
eingeschränkte Datenquelle
zugreifen, sollten Sie diesen Parameter nicht verwenden. Folgende Attribute werden unterstützt:
-
sendMethod - [Optional, String] Gibt die Methode an, die zum Senden der Abfrage verwendet werden soll. Wählen Sie einen der folgenden Stringwerte aus:
- 'xhr': Senden der Abfrage mit XmlHttpRequest
- 'scriptInjection': Senden Sie die Abfrage mithilfe einer Skripteinschleusung.
-
'makeRequest' – [Nur für Gadgets verfügbar, die verworfen wurden] Die Anfrage wird mithilfe der Gadgets API-Methode
makeRequest()
gesendet. Falls angegeben, sollten Sie auch makeRequestParams angeben. -
'auto': Die im URL-Parameter
tqrt
der Datenquellen-URL angegebene Methode wird verwendet.tqrt
kann die folgenden Werte haben: „xhr“, „scriptInjection“ oder „makeRequest“. Wenntqrt
fehlt oder einen ungültigen Wert hat, ist der Standardwert für Anfragen innerhalb der Domain „xhr“ und für domainübergreifende Anfragen „scriptInjection“.
-
makeRequestParams – [Objekt] Eine Zuordnung von Parametern für eine
makeRequest()
-Abfrage. Wird nur verwendet und ist nur erforderlich, wenn sendMethod den Wert "makeRequest" hat.
-
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() |
Ohne |
Beendet das automatische Senden von Abfragen, das mit setRefreshInterval() gestartet wurde.
|
setRefreshInterval(seconds)
|
Ohne |
Legt die Abfrage so fest, dass die Methode Wenn Sie diese Methode verwenden, sollten Sie sie vor dem Aufrufen der
Brechen Sie diese Methode ab, indem Sie sie noch einmal mit null (Standardeinstellung) aufrufen oder |
setTimeout(seconds) |
Ohne |
Legt fest, wie viele Sekunden auf die Antwort der Datenquelle gewartet werden soll, bevor ein Zeitüberschreitungsfehler ausgelöst wird. seconds ist eine Zahl größer als null. Das Standardzeitlimit beträgt 30 Sekunden. Falls diese Methode verwendet wird, sollte sie vor dem Aufrufen der Methode send aufgerufen werden.
|
setQuery(string) |
Ohne |
Legt den Abfragestring fest. Der Wert des Parameters string sollte eine gültige Abfrage sein. Wenn diese Methode verwendet wird, sollte sie vor dem Aufrufen der Methode send aufgerufen werden.
Weitere Informationen zur Abfragesprache
|
send(callback) |
Ohne |
Sendet die Abfrage an die Datenquelle. callback sollte eine Funktion sein, die aufgerufen wird, wenn die Datenquelle antwortet. Die Callback-Funktion empfängt einen einzelnen Parameter vom Typ google.visualization.QueryResponse.
|
QueryResponse
Eine Antwort auf eine Abfrageausführung, die von der Datenquelle empfangen wurde. Eine Instanz dieser Klasse wird als Argument an die Callback-Funktion übergeben, die beim Aufruf von Query.send festgelegt wurde.
Methoden
Methode | Rückgabewert | Beschreibung |
---|---|---|
getDataTable() |
DataTable |
Gibt die von der Datenquelle zurückgegebene Datentabelle zurück. Gibt null zurück, wenn die Abfrageausführung fehlgeschlagen ist und keine Daten zurückgegeben wurden.
|
getDetailedMessage() |
String | Gibt eine detaillierte Fehlermeldung für fehlgeschlagene Abfragen zurück. Wenn die Abfrage erfolgreich ausgeführt wurde, gibt diese Methode einen leeren String zurück. Die zurückgegebene Nachricht ist für Entwickler bestimmt und kann technische Informationen enthalten, z. B. „Spalte {salary} existiert nicht“. |
getMessage() |
String | Gibt eine kurze Fehlermeldung für fehlgeschlagene Abfragen zurück. Wenn die Abfrage erfolgreich ausgeführt wurde, gibt diese Methode einen leeren String zurück. Die zurückgegebene Nachricht ist eine kurze Nachricht für Endnutzer, z. B. „Ungültige Abfrage“ oder „Zugriff verweigert“. |
getReasons() |
Stringarray |
Gibt ein Array von null oder mehr Einträgen zurück. Jeder Eintrag ist ein kurzer String mit einem Fehler- oder Warncode, der beim Ausführen der Abfrage ausgelöst wurde. Mögliche Codes:
|
hasWarning() |
Boolesch | Gibt true zurück, wenn bei der Abfrageausführung Warnmeldungen angezeigt werden. |
isError() |
Boolesch |
Gibt true zurück, wenn die Abfrageausführung fehlgeschlagen ist und die Antwort keine Datentabelle enthält. Gibt <false> zurück, wenn die Abfrage erfolgreich ausgeführt wurde und die Antwort eine Datentabelle enthält.
|
Fehleranzeige
Die API bietet mehrere Funktionen, mit denen Sie Ihren Nutzern benutzerdefinierte Fehlermeldungen anzeigen können. Um diese Funktionen zu verwenden, musst du auf der Seite ein Containerelement (in der Regel ein <div>
) angeben, in das die API eine formatierte Fehlermeldung eingibt. Dieser Container kann entweder das Visualisierungscontainerelement oder ein Container nur für Fehler sein. Wenn Sie das Visualisierungselement angeben, wird die Fehlermeldung über der Visualisierung angezeigt.
Rufen Sie dann die entsprechende Funktion unten auf, um die Fehlermeldung anzuzeigen oder zu entfernen.
Alle Funktionen sind statische Funktionen im Namespace google.visualization.errors
.
Viele Visualisierungen können ein Fehlerereignis ausgeben. Weitere Informationen dazu finden Sie im Abschnitt „Fehlerereignis“ weiter unten.
Ein Beispiel für einen benutzerdefinierten Fehler finden Sie im Beispiel für den Abfrage-Wrapper.
Funktion | Rückgabewert | Beschreibung |
---|---|---|
addError(container, message, opt_detailedMessage,
opt_options)
|
String-ID-Wert, der das erstellte Fehlerobjekt identifiziert. Dies ist ein eindeutiger Wert auf der Seite, mit dem der Fehler entfernt oder das enthaltene Element ermittelt werden kann. |
Fügt dem angegebenen Seitenelement einen Fehleranzeigeblock mit dem angegebenen Text und der angegebenen Formatierung hinzu.
|
addErrorFromQueryResponse(container, response) |
String-ID-Wert, der das erstellte Fehlerobjekt identifiziert, oder null, wenn in der Antwort kein Fehler angegeben wurde. Dies ist ein eindeutiger Wert auf der Seite, mit dem der Fehler entfernt oder das enthaltene Element ermittelt werden kann. |
Übergeben Sie einen Abfrageantwort- und Fehlermeldungscontainer an diese Methode: Wenn die Abfrageantwort auf einen Abfragefehler hinweist, wird im angegebenen Seitenelement eine Fehlermeldung angezeigt. Wenn die Abfrageantwort null ist, gibt die Methode einen JavaScript-Fehler aus. Übergeben Sie die in Ihrem Abfrage-Handler erhaltene QueryResponse an diese Nachricht, um einen Fehler anzuzeigen. Außerdem wird der Stil der Anzeige entsprechend dem Typ festgelegt (Fehler oder Warnung, ähnlich wie bei
|
removeError(id) |
Boolescher Wert: "true", wenn der Fehler entfernt wurde; andernfalls "false". |
Entfernt den durch die ID angegebenen Fehler von der Seite.
|
removeAll(container) |
Ohne |
Entfernt alle Fehlerblöcke aus einem angegebenen Container. Wenn der angegebene Container nicht vorhanden ist, wird ein Fehler ausgegeben.
|
getContainer(errorId) |
Handle zu einem DOM-Element, das den angegebenen Fehler enthält, oder null, wenn es nicht gefunden wurde. |
Ruft ein Handle für das Containerelement ab, das den durch errorID angegebenen Fehler enthält.
|
Ereignisse
Die meisten Visualisierungen lösen Ereignisse aus, um anzuzeigen, dass etwas passiert ist. Als Nutzer des Diagramms möchten Sie häufig auf diese Ereignisse warten. Wenn Sie Ihre eigene Visualisierung codieren, können Sie solche Ereignisse auch selbst auslösen.
Mit den folgenden Methoden können Entwickler auf Ereignisse warten, vorhandene Event-Handler entfernen oder Ereignisse in einer Visualisierung auslösen.
- google.visualization.events.addListener() und google.visualization.events.addOneTimeListener() warten auf Ereignisse.
- google.visualization.events.removeListener() entfernt einen 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 sich für den Empfang von Ereignissen zu registrieren, die von einer auf Ihrer Seite gehosteten Visualisierung ausgelöst werden. Sie sollten dokumentieren, welche Ereignisargumente gegebenenfalls an die Verarbeitungsfunktion übergeben werden.
google.visualization.events.addListener(source_visualization, event_name, handling_function)
- source_visualization
- Ein Handle für die Quellvisualisierungsinstanz.
- event_name
- Der Stringname des Ereignisses, auf das gewartet werden soll. In einer Visualisierung sollte dokumentiert werden, welche Ereignisse ausgelöst werden.
- handling_function
- Der Name der lokalen JavaScript-Funktion, die aufgerufen werden soll, wenn „source_visualization“ das Ereignis „event_name“ auslöst. An die Verarbeitungsfunktion werden alle Ereignisargumente als Parameter übergeben.
Rückgabe
Ein Listener-Handler für den neuen Listener. Mit dem Handler kann dieser Listener später bei Bedarf durch Aufrufen von google.visualization.events.removeListener() entfernt werden.
Beispiel
Hier ist ein Beispiel für die Registrierung für die Teilnahme an der Auswahlveranstaltung
var table = new google.visualization.Table(document.getElementById('table_div')); table.draw(data, options); google.visualization.events.addListener(table, 'select', selectHandler); function selectHandler() { alert('A table row was selected'); }
addOneTimeListener()
Dies ist identisch mit addListener()
, ist aber für Ereignisse vorgesehen, die nur einmal überwacht werden sollen. Nachfolgende Auslösen des Ereignisses rufen die Verarbeitungsfunktion nicht auf.
Ein Beispiel hierfür: Bei jeder Zeichnung wird ein ready
-Ereignis ausgelöst. Wenn nur die erste ready
Ihren Code ausführen soll, sollten Sie addOneTimeListener
anstelle von addListener
verwenden.
removeListener()
Rufen Sie diese Methode auf, um die Registrierung eines vorhandenen Ereignis-Listeners aufzuheben.
google.visualization.events.removeListener(listener_handler)
- listener_handler
- Der zu entfernende Listener-Handler, wie von google.visualization.events.addListener() zurückgegeben.
removeAllListeners()
Rufen Sie diese Methode auf, um die Registrierung aller Event-Listener einer bestimmten Visualisierungsinstanz aufzuheben.
google.visualization.events.removeAllListeners(source_visualization)
- source_visualization
- Ein Handle für die Quellvisualisierungsinstanz, aus der alle Ereignis-Listener entfernt werden sollen.
trigger()
Wird von Implementern für Visualisierungen aufgerufen. Rufen Sie diese Methode aus Ihrer Visualisierung auf, um ein Ereignis mit einem beliebigen Namen und einer Gruppe von Werten auszulösen.
google.visualization.events.trigger(source_visualization, event_name, event_args)
- source_visualization
-
Ein Handle für die Quellvisualisierungsinstanz. Wenn Sie diese Funktion innerhalb einer Methode aufrufen, die von der sendenden Visualisierung definiert ist, können Sie einfach das Schlüsselwort
this
übergeben. - event_name
- Ein Stringname zum Aufrufen des Ereignisses. Sie können einen beliebigen Stringwert auswählen.
- event_args
- [optional] Eine Zuordnung von Name/Wert-Paaren, die an die empfangende Methode übergeben werden sollen. Beispiel: {message: „Hello there!“, Wert: 10, name: "Fred"}. Sie können null übergeben, wenn keine Ereignisse erforderlich sind. Der Empfänger sollte in der Lage sein, Null für diesen Parameter zu akzeptieren.
Beispiel
Hier sehen Sie ein Beispiel für eine Visualisierung, in der eine Methode namens „select“ ausgelöst wird, wenn die zugehörige „onclick“-Methode aufgerufen wird. Dabei werden keine Werte zurückgegeben.
MyVisualization.prototype.onclick = function(rowIndex) { this.highlightRow(this.selectedRow, false); // Clear previous selection this.highlightRow(rowIndex, true); // Highlight new selection // Save the selected row index in case getSelection is called. this.selectedRow = rowIndex; // Trigger a select event. google.visualization.events.trigger(this, 'select', null); }
Standardvisualisierungsmethoden und -eigenschaften
Jede Visualisierung sollte die folgenden erforderlichen und optionalen Methoden und Attribute enthalten. Beachten Sie jedoch, dass es keine Typprüfung zur Durchsetzung dieser Standards gibt. Daher sollten Sie die Dokumentation für jede Visualisierung lesen.
- 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 der Visualisierungsklasse haben und eine Instanz dieser Klasse zurückgeben.
visualization_class_name(dom_element)
- dom_element
- Ein Zeiger auf ein DOM-Element, in das die Visualisierung eingebettet werden soll.
Beispiel
var org = new google.visualization.OrgChart(document.getElementById('org_div'));
draw()
Zeichnet die Visualisierung auf die Seite. Im Hintergrund kann dies zum Beispiel das Abrufen einer Grafik von einem Server oder das Erstellen der Grafik auf der Seite mithilfe des verknüpften Visualisierungscodes sein. Sie sollten diese Methode jedes Mal aufrufen, wenn sich die Daten oder Optionen ändern. Das Objekt sollte innerhalb des DOM-Elements gezeichnet werden, das an den Konstruktor übergeben wird.
draw(data[, options])
- Daten
-
Ein
DataTable
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 Visualisierungsdokumentation sollten die verfügbaren Optionen aufgeführt sein. Wenn Sie diesen Parameter nicht angeben, sollten die Standardoptionen unterstützt werden.
Sie können die JavaScript-Objektliteralsyntax verwenden, um eine Optionszuordnung zu übergeben, z.B.
{x:100, y:200, title:'An Example'}
Beispiel
chart.draw(myData, {width: 400, height: 240, is3D: true, title: 'My Daily Activities'});
getAction()
Dies wird optional durch Visualisierungen angezeigt, die Kurzinfos haben und Aktionen für Kurzinfos ermöglichen.
Gibt das Kurzinfo-Aktionsobjekt mit dem angeforderten actionID
zurück.
Example:
// Returns the action object with the ID 'alertAction'. chart.getAction('alertAction');
getSelection()
Diese wird optional durch Visualisierungen dargestellt, mit denen Sie auf die aktuell ausgewählten Daten in der Grafik zugreifen können.
selection_array getSelection()
Rückgabe
selection_array: Ein Array ausgewählter Objekte, von denen jedes ein Datenelement in der zugrunde liegenden Tabelle beschreibt, die zum Erstellen der Visualisierung verwendet wird (DataView
oder DataTable
). Jedes Objekt hat die Attribute row
und/oder column
mit dem Index der Zeile und/oder Spalte des ausgewählten Elements in der zugrunde liegenden DataTable
. Wenn das Attribut row
null ist, ist die Auswahl eine Spalte. Ist das Attribut column
null, ist die Auswahl eine Zeile. Sind beide nicht null, ist es ein bestimmtes Datenelement. Sie können die Methode DataTable.getValue()
aufrufen, um den Wert des ausgewählten Elements abzurufen. Das abgerufene Array kann an setSelection()
übergeben werden.
Beispiel
function myClickHandler(){ var selection = myVis.getSelection(); var message = ''; for (var i = 0; i < selection.length; i++) { var item = selection[i]; if (item.row != null && item.column != null) { message += '{row:' + item.row + ',column:' + item.column + '}'; } else if (item.row != null) { message += '{row:' + item.row + '}'; } else if (item.column != null) { message += '{column:' + item.column + '}'; } } if (message == '') { message = 'nothing'; } alert('You selected ' + message); }
removeAction()
Dies wird optional durch Visualisierungen angezeigt, die Kurzinfos haben und Aktionen für Kurzinfos ermöglichen.
Entfernt das Kurzinfo-Aktionsobjekt mit dem angeforderten actionID
aus Ihrem Diagramm.
Example:
// Removes an action from chart with the ID of 'alertAction'. chart.removeAction('alertAction');
setAction()
Dies wird optional durch Visualisierungen angezeigt, die Kurzinfos haben und Aktionen für Kurzinfos ermöglichen. Dies funktioniert nur für Kerndiagramme (Balken-, Säulen-, Linien-, Flächen-, Streu-, Kombinations-, Blasen-, Kreis-, Ring-, Kerzendiagramme, Histogramme, Stufen-Flächen).
Legt eine Kurzinfo-Aktion fest, die ausgeführt werden soll, wenn der Nutzer auf den Aktionstext klickt.
setAction(action object)
Die Methode setAction
verwendet ein Objekt als Aktionsparameter. Für dieses Objekt müssen drei Attribute angegeben werden: id
für die ID der festgelegten Aktion, text
für den Text, der in der Kurzinfo für die Aktion angezeigt werden soll, und action
für die Funktion, die ausgeführt wird, wenn ein Nutzer auf den Aktionstext klickt.
Alle Kurzinfo-Aktionen sollten vor dem Aufrufen der draw()
-Methode des Diagramms festgelegt werden.
Example:
// Sets a tooltip action which will pop an alert box on the screen when triggered. chart.setAction({ id: 'alertAction', text: 'Trigger Alert', action: function() { alert('You have triggered an alert'); } });
Mit der Methode setAction
können auch zwei zusätzliche Attribute definiert werden: visible
und enabled
. Diese Attribute sollten Funktionen sein, die boolean
-Werte zurückgeben, die angeben, ob die Kurzinfo-Aktion sichtbar und/oder aktiviert ist.
Example:
// The visible/enabled functions can contain any logic to determine their state // as long as they return boolean values. chart.setAction({ id: 'alertAction', text: 'Trigger Alert', action: function() { alert('You have triggered an alert'); }, visible: function() { return true; }, enabled: function() { return true; } });
setSelection()
Wählt optional einen Dateneintrag in der Visualisierung aus, z. B. einen Punkt in einem Flächendiagramm oder einen Balken in einem Balkendiagramm. Wenn diese Methode aufgerufen wird, sollte in der Visualisierung visuell dargestellt werden, um welche neue Auswahl es sich handelt. Durch die Implementierung von setSelection()
sollte kein „select“-Ereignis ausgelöst werden. In Visualisierungen wird möglicherweise ein Teil der Auswahl ignoriert. Beispielsweise kann eine Tabelle, die nur ausgewählte Zeilen enthalten kann, Zellen- oder Spaltenelemente in ihrer setSelection()
-Implementierung ignorieren oder die gesamte Zeile auswählen.
Bei jedem Aufruf dieser Methode wird die Auswahl aller ausgewählten Elemente aufgehoben und die neue übergebene Auswahlliste wird angewendet. Es gibt keine explizite Möglichkeit, die Auswahl einzelner Elemente aufzuheben. Wenn Sie die Auswahl einzelner Elemente aufheben möchten, rufen Sie setSelection()
mit den Elementen auf, die ausgewählt bleiben. Wenn Sie die Auswahl aller Elemente aufheben möchten, rufen Sie setSelection()
, setSelection(null)
oder setSelection([])
auf.
setSelection(selection_array)
- selection_array
-
Ein Array von Objekten, die jeweils ein numerisches Zeilen- und/oder Spaltenattribut haben.
row
undcolumn
sind die nullbasierte Zeilen- oder Spaltennummer eines auszuwählenden Elements in der Datentabelle. Wenn Sie eine ganze Spalte auswählen möchten, setzen Sierow
auf null. Wenn Sie eine ganze Zeile auswählen möchten, setzen Siecolumn
auf null. Beispiel: MitsetSelection([{row:0,column:1},{row:1, column:null}])
werden die Zelle bei (0,1) und die gesamte Zeile 1 ausgewählt.
Verschiedene statische Methoden
Dieser Abschnitt enthält verschiedene nützliche Methoden, die im Namespace google.visualization
verfügbar gemacht werden.
arrayToDataTable()
Diese Methode verwendet ein zweidimensionales Array und wandelt es in eine DataTable um.
Die Datentypen der Spalten werden automatisch anhand der bereitgestellten Daten bestimmt. Spaltendatentypen können auch mit der Objektliteral-Notation in der ersten Zeile (der Zeile mit den Spaltenüberschriften) des Arrays angegeben werden (z.B. {label: 'Start Date', type: 'date'}
). Optionale Datenrollen können ebenfalls verwendet werden, müssen jedoch explizit mit der Objektliteralnotation definiert werden. Die Objektliteral-Notation kann auch für jede Zelle verwendet werden, sodass Sie Zellenobjekte definieren können.
Syntax
google.visualization.arrayToDataTable(twoDArray, opt_firstRowIsData)
- twoDArray
- Ein zweidimensionales Array, wobei jede Zeile für eine Zeile in der Datentabelle steht. Wenn opt_firstRowIsData auf „false“ gesetzt ist (Standardeinstellung), wird die erste Zeile als Kopfzeilenlabels interpretiert. Die Datentypen der einzelnen Spalten werden automatisch aus den gegebenen Daten interpretiert. Wenn eine Zelle keinen Wert hat, geben Sie einen Null- oder leeren Wert an.
- opt_firstRowIsData
- Gibt an, ob die erste Zeile eine Kopfzeile definiert. Falls wahr, wird angenommen, dass es sich bei allen Zeilen um Daten handelt. Bei „false“ wird davon ausgegangen, dass die erste Zeile eine Kopfzeile ist. Die Werte werden als Spaltenlabels zugewiesen. Der Standardwert ist „false“.
Rückgabe
Ein neues DataTable
.
Beispiele
Der folgende Code zeigt drei Möglichkeiten zum Erstellen desselben DataTable
-Objekts:
// Version 1: arrayToDataTable method var data2 = google.visualization.arrayToDataTable([ [{label: 'Country', type: 'string'}, {label: 'Population', type: 'number'}, {label: 'Area', type: 'number'}, {type: 'string', role: 'annotation'}], ['CN', 1324, 9640821, 'Annotated'], ['IN', 1133, 3287263, 'Annotated'], ['US', 304, 9629091, 'Annotated'], ['ID', 232, 1904569, 'Annotated'], ['BR', 187, 8514877, 'Annotated'] ]); // Version 2: DataTable.addRows var data3 = new google.visualization.DataTable(); data3.addColumn('string','Country'); data3.addColumn('number','Population'); data3.addColumn('number','Area'); data3.addRows([ ['CN', 1324, 9640821], ['IN', 1133, 3287263], ['US', 304, 9629091], ['ID', 232, 1904569], ['BR', 187, 8514877] ]); // Version 3: DataTable.setValue var data = new google.visualization.DataTable(); data.addColumn('string','Country'); data.addColumn('number', 'Population'); data.addColumn('number', 'Area'); data.addRows(5); data.setValue(0, 0, 'CN'); data.setValue(0, 1, 1324); data.setValue(0, 2, 9640821); data.setValue(1, 0, 'IN'); data.setValue(1, 1, 1133); data.setValue(1, 2, 3287263); data.setValue(2, 0, 'US'); data.setValue(2, 1, 304); data.setValue(2, 2, 9629091); data.setValue(3, 0, 'ID'); data.setValue(3, 1, 232); data.setValue(3, 2, 1904569); data.setValue(4, 0, 'BR'); data.setValue(4, 1, 187); data.setValue(4, 2, 8514877);
drawChart()
Mit dieser Methode wird in einem einzelnen Aufruf ein Diagramm erstellt. Der Vorteil dieser Methode besteht darin, dass sie etwas weniger Code erfordert. Außerdem können Sie Visualisierungen zur Wiederverwendung als Textstrings serialisieren und speichern. Diese Methode gibt keinen Handle für das erstellte Diagramm zurück. Daher können Sie keine Methoden-Listener zuweisen, um Diagrammereignisse abzufangen.
Syntax
google.visualization.drawChart(chart_JSON_or_object)
- chart_JSON_or_object
- Entweder ein JSON-Literalstring oder ein JavaScript-Objekt mit den folgenden Attributen (unter Berücksichtigung der Groß- und Kleinschreibung):
Attribut | Typ | Erforderlich | Standard | Beschreibung |
---|---|---|---|---|
chartType | String | Erforderlich | keine |
Der Klassenname der Visualisierung. Der Paketname google.visualization kann für Google-Diagramme weggelassen werden. Wenn die entsprechende Visualisierungsbibliothek noch nicht geladen wurde, wird sie über diese Methode geladen, falls es sich um eine Google-Visualisierung handelt. Sie müssen Visualisierungen von Drittanbietern explizit laden. Beispiele: Table ,
PieChart , example.com.CrazyChart .
|
containerId | String | Erforderlich | keine | Die ID des DOM-Elements auf Ihrer Seite, auf dem die Visualisierung gehostet wird. |
Optionen | Objekt | Optional | keine |
Ein Objekt, das die Optionen für die Visualisierung beschreibt. Sie können entweder die JavaScript-Literal-Notation verwenden oder ein Handle für das Objekt angeben. Beispiel:
"options": {"width": 400, "height": 240,
"is3D": true, "title": "Company Performance"}
|
dataTable | Objekt | Optional | Ohne |
Ein DataTable , der zum Füllen der Visualisierung verwendet wird. Dies kann eine literale JSON-Stringdarstellung einer DataTable, wie oben beschrieben, oder ein Handle für ein ausgefülltes google.visualization.DataTable -Objekt oder ein zweidimensionales Array wie das von
arrayToDataTable(opt_firstRowIsData=false)
akzeptierte sein.
Du musst entweder dieses Attribut oder das Attribut dataSourceUrl angeben.
|
dataSourceUrl | String | Optional | Ohne |
Eine Datenquellenabfrage zum Füllen der Diagrammdaten (z. B. eine Google-Tabelle). Sie müssen entweder dieses Attribut oder das Attribut dataTable angeben.
|
Abfrage | String | Optional | Ohne |
Bei Angabe von dataSourceUrl können Sie optional mit der Abfragesprache für die Visualisierung einen SQL-ähnlichen Abfragestring angeben, um die Daten zu filtern oder zu bearbeiten.
|
refreshInterval | Zahl | Optional | Ohne |
Wie oft in Sekunden die Abfragequelle der Visualisierung aktualisiert werden soll. Verwenden Sie dies nur, wenn Sie dataSourceUrl angeben.
|
Ansicht | Objekt ODER Array | Optional | Ohne |
Legt ein DataView -Initialisierungsobjekt fest, das als Filter für die zugrunde liegenden Daten dient, wie durch den dataTable - oder dataSourceUrl -Parameter definiert.
Sie können entweder einen String oder ein DataView -Initialisierungsobjekt übergeben, wie das von dataview.toJSON() zurückgegeben wird.
Beispiel: "view": {"columns": [1, 2]} Sie können auch ein Array von DataView -Initialisierungsobjekten übergeben. In diesem Fall wird der erste DataView im Array auf die zugrunde liegenden Daten angewendet, um eine neue Datentabelle zu erstellen. Die zweite DataView wird auf die Datentabelle angewendet, die sich aus der Anwendung des ersten DataView ergibt, usw.
|
Beispiele
Erstellt ein Tabellendiagramm basierend auf der Datenquelle einer Tabellenkalkulation mit der Abfrage SELECT A,D WHERE D > 100 ORDER BY D
<script type="text/javascript"> google.charts.load('current'); // Note: No need to specify chart packages. function drawVisualization() { google.visualization.drawChart({ "containerId": "visualization_div", "dataSourceUrl": "https://spreadsheets.google.com/a/google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1", "query":"SELECT A,D WHERE D > 100 ORDER BY D", "refreshInterval": 5, "chartType": "Table", "options": { "alternatingRowStyle": true, "showRowNumber" : true } }); } google.charts.setOnLoadCallback(drawVisualization); </script>
Im nächsten Beispiel wird dieselbe Tabelle, aber lokal ein DataTable
erstellt:
<script type='text/javascript'> google.charts.load('current'); function drawVisualization() { var dataTable = [ ["Country", "Population Density"], ["Indonesia", 117], ["China", 137], ["Nigeria", 142], ["Pakistan", 198], ["India", 336], ["Japan", 339], ["Bangladesh", 1045] ]; google.visualization.drawChart({ "containerId": "visualization_div", "dataTable": dataTable, "refreshInterval": 5, "chartType": "Table", "options": { "alternatingRowStyle": true, "showRowNumber" : true, } }); } google.charts.setOnLoadCallback(drawVisualization); </script>
In diesem Beispiel wird eine JSON-Stringdarstellung des Diagramms übergeben, die Sie möglicherweise aus einer Datei geladen haben:
<script type="text/javascript"> google.charts.load('current'); var myStoredString = '{"containerId": "visualization_div",' + '"dataSourceUrl": "https://spreadsheets.google.com/a/google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1",' + '"query":"SELECT A,D WHERE D > 100 ORDER BY D",' + '"refreshInterval": 5,' + '"chartType": "Table",' + '"options": {' + ' "alternatingRowStyle": true,' + ' "showRowNumber" : true' + '}' + '}'; function drawVisualization() { google.visualization.drawChart(myStoredString); } google.charts.setOnLoadCallback(drawVisualization); </script>
drawToolbar()
Dies ist der Konstruktor für das Symbolleistenelement, das an viele Visualisierungen angehängt werden kann. Mit dieser Symbolleiste können Nutzer die Visualisierungsdaten in verschiedene Formate exportieren oder eine einbettbare Version der Visualisierung zur Verwendung an verschiedenen Orten zur Verfügung stellen. Weitere Informationen und ein Codebeispiel findest du auf der Toolbar-Seite.