Referenz zur Google Visualization API

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

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

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.

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

Methoden

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.

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.
]);

var rowInds = data.getSortedRows([{column: 2}]);
for (var i = 0; i < rowInds.length; i++) {
  var v = data.getValue(rowInds[i], 2);
}

{"cols":[{"id":"Col1","label":"","type":"date"}],
 "rows":[
   {"c":[{"v":"a"},{"v":"Date(2010,10,6)"}]},
   {"c":[{"v":"b"},{"v":"Date(2010,10,7)"}]}
 ]
}

Format des JavaScript-Literalparameters data des Konstruktors

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

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

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

Lassen Sie uns nun die Syntax beschreiben:

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

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

cols-Property

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

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

Beispiel für cols

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

rows-Property

Das Attribut rows enthält ein Array von Zeilenobjekten.

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

Zellobjekte

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

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

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

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

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

p-Eigenschaft

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

DataView-Klasse

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

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

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

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

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

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

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

var data = new google.visualization.DataTable();
data.addColumn('string', 'Employee Name');
data.addColumn('date', 'Start Date');
data.addRows(6);
data.setCell(0, 0, 'Mike');
data.setCell(0, 1, new Date(2008, 1, 28));
data.setCell(1, 0, 'Bob');
data.setCell(1, 1, new Date(2007, 5, 1));
data.setCell(2, 0, 'Alice');
data.setCell(2, 1, new Date(2006, 7, 16));
data.setCell(3, 0, 'Frank');
data.setCell(3, 1, new Date(2007, 11, 28));
data.setCell(4, 0, 'Floyd');
data.setCell(4, 1, new Date(2005, 3, 13));
data.setCell(5, 0, 'Fritz');
data.setCell(5, 1, new Date(2007, 9, 2));

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

Konstruktoren

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

Konstruktor 1

var myView = new google.visualization.DataView(data)

data

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

Weitere Informationen

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

Konstruktor 2

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

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

Daten

Das DataTable-Objekt, mit dem du die DataView erstellt hast, auf dem du DataView.toJSON() aufgerufen hast. Wenn sich diese Tabelle von der ursprünglichen Tabelle unterscheidet, erhalten Sie unvorhersehbare Ergebnisse.

viewAsJson

Der von DataView.toJSON() zurückgegebene JSON-String. Dies ist eine Beschreibung, welche Zeilen in der Datentabelle data ein- oder ausgeblendet werden.

Methoden

// 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);
}

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:

Veranstaltungen

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

Beispiel

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

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

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

Dasselbe Diagramm, jetzt mit Setter-Methoden:

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

ChartEditor-Klasse

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

So verwenden Sie den ChartEditor:

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

Methoden

Optionen

Der Diagrammeditor unterstützt die folgenden Optionen:

Veranstaltungen

Der Diagrammeditor gibt die folgenden Ereignisse aus:

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:

group()

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

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

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

Syntax

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

data_table

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

keys

Ein Array von Zahlen und/oder Objekten, die angeben, nach welchen Spalten gruppiert werden soll. Die Ergebnistabelle enthält jede Spalte in diesem Array sowie jede Spalte in columns. Bei einer Zahl ist dies ein Spaltenindex der Eingabe-DataTable, nach dem gruppiert werden soll. Wenn es sich um ein Objekt handelt, enthält es eine Funktion, mit der die angegebene Spalte geändert werden kann (z. B. 1 zum Wert in dieser Spalte addieren). Das Objekt muss die folgenden Eigenschaften haben:

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

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

Spalten

[Optional] Hier können Sie angeben, welche Spalten zusätzlich zu den Schlüsselspalten in die Ausgabetabelle aufgenommen werden sollen. Da alle Zeilen in der Zeilengruppe zu einer einzelnen Ausgabezeile komprimiert werden, müssen Sie festlegen, welcher Wert für diese Zeilengruppe angezeigt werden soll. Sie können beispielsweise den Spaltenwert aus der ersten Zeile in der Gruppe oder einen Durchschnitt aller Zeilen in dieser Gruppe anzeigen. columns ist ein Array von Objekten mit den folgenden Attributen:

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

Rückgabewert

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

Beispiel

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

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

*Output table*
1  110
3  125
5  500

Bereitgestellte Modifikatorfunktionen

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

Bereitgestellte Aggregationsfunktionen

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

Modifikatorfunktion erstellen

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

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

Aggregationsfunktion erstellen

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

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

join()

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

Syntax

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

dt1

Eine ausgefüllte DataTable, die mit dt2 zusammengeführt werden soll.

dt2

Ein ausgefüllter DataTable-Wert für den Join mit dt1. Diese Tabelle darf nicht mehrere identische Schlüssel enthalten (wobei ein Schlüssel eine Kombination aus Schlüsselspaltenwerten ist).

joinMethod

Ein String, der den Join-Typ angibt. Wenn dt1 mehrere Zeilen hat, die mit einer dt2-Zeile übereinstimmen, enthält die Ausgabetabelle alle übereinstimmenden dt1-Zeilen. Wählen Sie einen der folgenden Werte aus:

• "full" (vollständig) – Die Ausgabetabelle enthält alle Zeilen aus beiden Tabellen, unabhängig davon, ob die Schlüssel übereinstimmen. Nicht übereinstimmende Zeilen haben keine Zelleneinträge. Übereinstimmende Zeilen werden verknüpft.
• "inner": Der vollständige Join ist so gefiltert, dass nur Zeilen eingeschlossen werden, bei denen die Schlüssel übereinstimmen.
• 'left': Die Ausgabetabelle enthält alle Zeilen aus dt1, unabhängig davon, ob es passende Zeilen aus dt2 gibt.
• „right“: Die Ausgabetabelle enthält alle Zeilen aus dt2, unabhängig davon, ob es passende Zeilen aus dt1 gibt.

keys

Ein Array mit Schlüsselspalten, die aus beiden Tabellen verglichen werden sollen. Jedes Paar ist ein Array mit zwei Elementen. Das erste ist ein Schlüssel in dt1 und das zweite ein Schlüssel in dt2. In diesem Array können Spalten nach Index, ID oder Label angegeben werden (siehe getColumnIndex).
Spalten müssen in beiden Tabellen vom gleichen Typ sein. Alle angegebenen Schlüssel müssen gemäß der durch joinMethod angegebenen Regel übereinstimmen, damit eine Zeile aus der Tabelle eingeschlossen wird. Schlüsselspalten sind immer in der Ausgabetabelle enthalten. Nur dt1, die linke Tabelle, kann doppelte Schlüssel enthalten; Schlüssel in dt2 müssen eindeutig sein. Der Begriff "Schlüssel" steht hier für einen eindeutigen Satz von Schlüsselspalten, nicht für einzelne Spaltenwerte. Wenn Ihre Schlüsselspalten beispielsweise A und B wären, würde die folgende Tabelle nur eindeutige Schlüssel/Wert-Paare enthalten (und könnte daher als dt2 verwendet werden):

A	B
Jan	Rot
Jan	Blau
Fred	Rot

Beispiel:[[0,0], [2,1]] vergleicht Werte aus der ersten Spalte in beiden Tabellen sowie aus der dritten Spalte aus dt1 mit der zweiten Spalte aus dt1.

dt1Columns

Ein Array mit Spalten aus dt1, die zusätzlich zu den Schlüsselspalten von dt1 in die Ausgabetabelle aufgenommen werden sollen. In diesem Array können Spalten nach Index, ID oder Label angegeben werden (siehe getColumnIndex).

dt2Columns

Ein Array mit Spalten aus dt2, die zusätzlich zu den Schlüsselspalten von dt2 in die Ausgabetabelle aufgenommen werden sollen. In diesem Array können Spalten nach Index, ID oder Label angegeben werden (siehe getColumnIndex).

Rückgabewert

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

Beispiele

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

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


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


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


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

Formatierer

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

• Formatierer ändern nur die formatierten Werte, nicht die zugrunde liegenden Werte. Der angezeigte Wert wäre beispielsweise „1.000, 00 $“, der zugrunde liegende Wert wäre aber weiterhin „1.000“.
• Formatierer wirken sich jeweils nur auf eine Spalte aus. Wenn Sie mehrere Spalten neu formatieren möchten, wenden Sie auf jede Spalte, die Sie ändern möchten, einen Formatierer an.
• Wenn Sie auch benutzerdefinierte Formatierer verwenden, überschreiben bestimmte Google-Formatierer für Visualisierungen alle benutzerdefinierten Formatierer.

Die eigentliche Formatierung auf die Daten wird aus dem Gebietsschema abgeleitet, mit dem die API geladen wurde. Weitere Informationen finden Sie unter Diagramme mit einer bestimmten Sprache laden .

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

Allgemeine Schritte zur Verwendung eines Formatierers:

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

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

var data = new google.visualization.DataTable();
data.addColumn('string', 'Employee Name');
data.addColumn('date', 'Start Date');
data.addRows(3);
data.setCell(0, 0, 'Mike');
data.setCell(0, 1, new Date(2008, 1, 28));
data.setCell(1, 0, 'Bob');
data.setCell(1, 1, new Date(2007, 5, 1));
data.setCell(2, 0, 'Alice');
data.setCell(2, 1, new Date(2006, 7, 16));

// Create a formatter.
// This example uses object literal notation to define the options.
var formatter = new google.visualization.DateFormat({formatType: 'long'});

// Reformat our data.
formatter.format(data, 1);

// Draw our data
var table = new google.visualization.Table(document.getElementById('dateformat_div'));
table.draw(data, {showRowNumber: true});

Die meisten Formatierer bieten die folgenden zwei Methoden:

Methode	Beschreibung
google.visualization.formatter_name(options)	Konstruktor, wobei formatter_name ein bestimmter Formatierklassenname ist. options – Ein generisches JavaScript-Objekt, das die Optionen für diesen Formatierer angibt. Dieses Objekt ist ein generisches Objekt mit Attribut/Wert-Paaren mit Attributen, die für diesen Formatierer spezifisch sind. Informationen zu den unterstützten Optionen finden Sie in der Dokumentation zu Ihrem spezifischen Formatierer. Hier sind zwei Beispiele für Möglichkeiten, den Konstruktor für das DateFormat-Objekt aufzurufen, indem zwei Eigenschaften übergeben werden: // Object literal technique var formatter = new google.visualization.DateFormat({formatType: 'long', timeZone: -5}); // Equivalent property setting technique var options = new Object(); options['formatType'] = 'long'; options['timeZone'] = -5; var formatter = new google.visualization.DateFormat(options);
format(data, colIndex)	Formatiert die Daten in der angegebenen Spalte neu. data – Ein DataTable mit den Daten, die umformatiert werden sollen. Sie können hier keine DataView verwenden. colIndex – nullbasierter Index der zu formatierenden Spalte. Wenn Sie mehrere Spalten formatieren möchten, müssen Sie diese Methode mehrmals mit unterschiedlichen colIndex-Werten aufrufen.

 

Die Google Visualization API bietet die folgenden Formatierer:

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

ArrowFormat

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

Optionen

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

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

Beispielcode

var data = new google.visualization.DataTable();
data.addColumn('string', 'Department');
data.addColumn('number', 'Revenues Change');
data.addRows([
  ['Shoes', {v:12, f:'12.0%'}],
  ['Sports', {v:-7.3, f:'-7.3%'}],
  ['Toys', {v:0, f:'0%'}],
  ['Electronics', {v:-2.1, f:'-2.1%'}],
  ['Food', {v:22, f:'22.0%'}]
]);

var table = new google.visualization.Table(document.getElementById('arrowformat_div'));

var formatter = new google.visualization.ArrowFormat();
formatter.format(data, 1); // Apply formatter to second column

table.draw(data, {allowHtml: true, showRowNumber: true});

BarFormat

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

Optionen

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

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

Beispielcode

var data = new google.visualization.DataTable();
data.addColumn('string', 'Department');
data.addColumn('number', 'Revenues');
data.addRows([
  ['Shoes', 10700],
  ['Sports', -15400],
  ['Toys', 12500],
  ['Electronics', -2100],
  ['Food', 22600],
  ['Art', 1100]
]);

var table = new google.visualization.Table(document.getElementById('barformat_div'));

var formatter = new google.visualization.BarFormat({width: 120});
formatter.format(data, 1); // Apply formatter to second column

table.draw(data, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});

ColorFormat

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

Methoden

ColorFormat unterstützt die folgenden Methoden:

Methode	Beschreibung
google.visualization.ColorFormat()	Konstruktor. Nimmt keine Argumente an.
addRange(from, to, color, bgcolor)	Gibt eine Vordergrund- und/oder Hintergrundfarbe für eine Zelle an, je nach Zellenwert. Jeder Zelle mit einem Wert im angegebenen Bereich von from bis to werden color und bgcolor zugewiesen. Beachten Sie, dass der Bereich nicht inklusiv ist, da das Erstellen eines Bereichs von 1 bis 1.000 und einer Sekunde zwischen 1.000 und 2.000 den Wert 1.000 nicht deckt. from – [String, Number, Date, DateTime, or TimeOfDay]: Die Untergrenze (einschließlich) des Bereichs oder null. Ist dieser Wert null, entspricht er -∞. Stringgrenzen werden alphabetisch mit Stringwerten verglichen. to – [String, Number, Date, DateTime, or TimeOfDay]: Obergrenze (nicht einschließlich) des Bereichs oder null. Wenn null, entspricht er +∞. Stringgrenzen werden alphabetisch mit Stringwerten verglichen. color – die Farbe, die auf den Text in übereinstimmenden Zellen angewendet werden soll Die Werte können entweder „#RRGGBB“-Werte oder definierte Farbkonstanten sein, z. B. „#FF0000“ oder „red“. bgcolor – die Farbe, die auf den Hintergrund übereinstimmender Zellen angewendet werden soll Die Werte können entweder „#RRGGBB“-Werte oder definierte Farbkonstanten sein, z. B. „#FF0000“ oder „red“.
addGradientRange(from, to, color, fromBgColor, toBgColor)	Weist entsprechend dem Zellenwert eine Hintergrundfarbe aus einem Bereich zu. Die Farbe wird so skaliert, dass sie dem Wert der Zelle in einem Bereich von einer Farbe für die untere Begrenzung bis zu einer oberen Begrenzungsfarbe entspricht. Beachten Sie, dass mit dieser Methode im Gegensatz zu addRange() Stringwerte nicht verglichen werden können. Tipp: Farbbereiche sind für Betrachter oft schwer zu erkennen. Der einfachste und am einfachsten lesbare Bereich ist von einer voll gesättigten Farbe bis zu Weiß (z. B. #FF0000–FFFFFF). from – [Number, Date, DateTime, or TimeOfDay]: Untergrenze (einschließlich) des Bereichs oder null. Wenn null, stimmt er mit -∞ überein. to – [Number, Date, DateTime, or TimeOfDay]: Die Obergrenze des Bereichs (nicht einschließlich) oder null. Wenn er null lautet, entspricht er +∞. color – die Farbe, die auf den Text in übereinstimmenden Zellen angewendet werden soll Diese Farbe ist für alle Zellen gleich, unabhängig von ihrem Wert. fromBgColor – Die Hintergrundfarbe für Zellen, deren Werte am unteren Ende des Farbverlaufs liegen. Die Werte können entweder „#RRGGBB“-Werte oder definierte Farbkonstanten sein, z. B. „#FF0000“ oder „red“. toBgColor: Die Hintergrundfarbe für Zellen, deren Werte am oberen Rand des Farbverlaufs liegen. Die Werte können entweder „#RRGGBB“-Werte oder definierte Farbkonstanten sein, z. B. „#FF0000“ oder „red“.
format(dataTable, columnIndex)	Die Standardmethode format(), um Formatierungen auf die angegebene Spalte anzuwenden.

Beispielcode

var data = new google.visualization.DataTable();
data.addColumn('string', 'Department');
data.addColumn('number', 'Revenues');
data.addRows([
  ['Shoes', 10700],
  ['Sports', -15400],
  ['Toys', 12500],
  ['Electronics', -2100],
  ['Food', 22600],
  ['Art', 1100]
]);

var table = new google.visualization.Table(document.getElementById('colorformat_div'));

var formatter = new google.visualization.ColorFormat();
formatter.addRange(-20000, 0, 'white', 'orange');
formatter.addRange(20000, null, 'red', '#33ff33');
formatter.format(data, 1); // Apply formatter to second column

table.draw(data, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});

DateFormat

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

Optionen

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

Wahltaste	Beschreibung
formatType	Eine schnelle Formatierungsoption für das Datum. Die folgenden Stringwerte werden unterstützt, wobei das Datum des 28. Februar 2016 so neu formatiert wird: 'kurz' – Kurzformat: z.B. „28.02.2016“ 'medium' – Mittelformat: z.B. „Feb 28, 2016“ 'long' – Langformat: z.B. „28. Februar 2016“ Sie können nicht sowohl formatType als auch pattern angeben.
pattern	Ein benutzerdefiniertes Formatmuster, das auf den Wert angewendet werden soll, ähnlich dem Datums- und Uhrzeitformat auf der ICU. Beispiel: var formatter3 = new google.visualization.DateFormat({pattern: "EEE, MMM d, ''yy"}); Sie können nicht sowohl formatType als auch pattern angeben. Weitere Details zu Mustern finden Sie im nächsten Abschnitt.
timeZone	Die Zeitzone, in der der Datumswert angezeigt werden soll. Dies ist ein numerischer Wert, der GMT + diese Anzahl von Zeitzonen angibt (kann negativ sein). Datumsobjekte werden standardmäßig mit der Zeitzone des Computers erstellt, auf dem sie erstellt wurden. Mit dieser Option wird der Wert in einer anderen Zeitzone angezeigt. Wenn Sie beispielsweise ein Datumsobjekt mit 17:00 Uhr auf einem Computer in Greenwich, England, erstellt und für die Zeitzone -5 angegeben haben (options['timeZone'] = -5 oder Eastern Pacific Time in den USA), wird als Wert 12 Uhr angezeigt.

Methoden

DateFormat unterstützt die folgenden Methoden:

Methode	Beschreibung
google.visualization.DateFormat(options)	Konstruktor. Weitere Informationen finden Sie oben im Abschnitt zu den Optionen.
format(dataTable, columnIndex)	Die Standardmethode format(), um Formatierungen auf die angegebene Spalte anzuwenden.
formatValue(value)	Gibt den formatierten Wert eines bestimmten Werts zurück. Für diese Methode ist kein DataTable erforderlich.

Beispielcode

function drawDateFormatTable() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Employee Name');
  data.addColumn('date', 'Start Date (Long)');
  data.addColumn('date', 'Start Date (Medium)');
  data.addColumn('date', 'Start Date (Short)');
  data.addRows([
    ['Mike', new Date(2008, 1, 28, 0, 31, 26),
             new Date(2008, 1, 28, 0, 31, 26),
             new Date(2008, 1, 28, 0, 31, 26)],
    ['Bob', new Date(2007, 5, 1, 0),
            new Date(2007, 5, 1, 0),
            new Date(2007, 5, 1, 0)],
    ['Alice', new Date(2006, 7, 16),
              new Date(2006, 7, 16),
              new Date(2006, 7, 16)]
  ]);

  // Create three formatters in three styles.
  var formatter_long = new google.visualization.DateFormat({formatType: 'long'});
  var formatter_medium = new google.visualization.DateFormat({formatType: 'medium'});
  var formatter_short = new google.visualization.DateFormat({formatType: 'short'});

  // Reformat our data.
  formatter_long.format(data, 1);
  formatter_medium.format(data,2);
  formatter_short.format(data, 3);

  // Draw our data
  var table = new google.visualization.Table(document.getElementById('dateformat_div'));
  table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
}

Weitere Informationen zu Datumsmustern

Weitere Informationen zu den unterstützten Mustern:

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

Muster	Beschreibung	Beispielausgabe
GG	Ära-Bezeichner.	"Anzeige"
yy oder yyyy	Jahr.	1996
M	Monat im Jahr. Für Januar: M produziert 1 MM produziert 01 MMM produziert Januar MMMM produziert Januar	„Juli“ „07“
t	Tag im Monat. Zusätzliche „d“-Werte addieren führende Nullen.	10
Std.	Stunde im 12-Stunden-Skala. Zu zusätzlichen „h“-Werten werden führende Nullen addiert.	12
H	Stunde im 24-Stunden-Format. Zu den zusätzlichen Hk-Werten werden führende Nullen addiert.	0
m	Minute in Stunde. Zu zusätzlichen „M“-Werten werden führende Nullen addiert.	30
s	Sekunde in Minute. Zusätzliche „s“-Werte addieren führende Nullen.	55
S	Sekundenbruchteile Zusätzliche 'S'-Werte werden rechts mit Nullen aufgefüllt.	978
E	Wochentag. Folgende Ausgaben für "Dienstag": E erzeugt T. EE oder EEE Produzieren Di oder Di EEEE produziert am Dienstag	„Di“ „Dienstag“
aa	AM/PM	„PM“
k	Stunde (1~24). Zu zusätzlichen „k“-Werten werden führende Nullen addiert.	24
K	Stunde in AM/PM (0~11). Zu zusätzlichen „k“-Werten werden führende Nullen addiert.	0
z	Zeitzone Für Zeitzone 5 wird „UTC+5“ ausgegeben.	„UTC+5“
Z	Zeitzone im RFC 822-Format. Für die Zeitzone -5: Z, ZZ, ZZZ produzieren -0500 ZZZZ und andere produzieren „GMT -05:00“	„-0800“ „GMT -05:00“
v	Zeitzone (generisch)	„ usw./GMT-5“
'	Esc-Taste für Text	'Datum='
''	Einfaches Anführungszeichen	„jj“

NumberFormat

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

Optionen

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

Wahltaste	Beschreibung
decimalSymbol	Ein Zeichen, das als Dezimalmarkierung verwendet wird. Der Standardwert ist ein Punkt (.).
fractionDigits	Zahl, die angibt, wie viele Ziffern nach dem Dezimaltrennzeichen angezeigt werden. Der Standardwert ist 2. Wenn Sie mehr Ziffern angeben, als die Zahl enthält, werden für die kleineren Werte Nullen angezeigt. Abgeschnittene Werte werden gerundet (5 aufgerundet).
groupingSymbol	Ein Zeichen, mit dem die Ziffern links vom Dezimaltrennzeichen in Dreiersätze gruppiert werden. Der Standardwert ist ein Komma (,).
negativeColor	Die Textfarbe für negative Werte. Kein Standardwert. Die Werte können jeder akzeptable HTML-Farbwert wie „red“ oder „#FF0000“ sein.
negativeParens	Ein boolescher Wert, wobei „true“ angibt, dass negative Werte in Klammern gesetzt werden sollen. Standardwert ist True.
pattern	Ein Formatstring. Alle anderen Optionen mit Ausnahme von negativeColor werden ignoriert. Der Formatstring ist eine Teilmenge des ICU-Mustersatzes . {pattern:'#,###%'} führt beispielsweise zu den Ausgabewerten "1.000%", "750%" und "50%" für die Werte 10, 7,5 und 0,5.
prefix	Ein Stringpräfix für den Wert, z. B. "$".
suffix	Ein Stringsuffix für den Wert, z. B. „%“.

Methoden

NumberFormat unterstützt die folgenden Methoden:

Methode	Beschreibung
google.visualization.NumberFormat(options)	Konstruktor. Weitere Informationen finden Sie oben im Abschnitt zu den Optionen.
format(dataTable, columnIndex)	Die Standardmethode format(), um Formatierungen auf die angegebene Spalte anzuwenden.
formatValue(value)	Gibt den formatierten Wert eines bestimmten Werts zurück. Diese Methode erfordert keine DataTable.

Beispielcode

var data = new google.visualization.DataTable();
data.addColumn('string', 'Department');
data.addColumn('number', 'Revenues');
data.addRows([
  ['Shoes', 10700],
  ['Sports', -15400],
  ['Toys', 12500],
  ['Electronics', -2100],
  ['Food', 22600],
  ['Art', 1100]
]);

var table = new google.visualization.Table(document.getElementById('numberformat_div'));

var formatter = new google.visualization.NumberFormat(
    {prefix: '$', negativeColor: 'red', negativeParens: true});
formatter.format(data, 1); // Apply formatter to second column

table.draw(data, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});

PatternFormat

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

Methoden

PatternFormat unterstützt die folgenden Methoden:

Methode	Beschreibung
google.visualization.PatternFormat(pattern)	Konstruktor. Verwendet kein Optionsobjekt. Stattdessen wird ein Stringparameter pattern verwendet. Dies ist ein String, der beschreibt, welche Spaltenwerte zusammen mit beliebigem Text in die Zielspalte eingegeben werden sollen. Betten Sie Platzhalter in Ihren String ein, um einen Wert aus einer anderen Spalte anzugeben, der eingebettet werden soll. Die Platzhalter sind {#}, wobei # der Index einer zu verwendenden Quellspalte ist. Der Index ist ein Index im Array srcColumnIndices der folgenden format()-Methode. Wenn Sie ein Literalzeichen { oder } einschließen möchten, müssen Sie es wie folgt maskieren: \{ oder \}. Um ein \-Zeichen einzuschließen, müssen Sie es als \\ verwenden. Beispielcode Das folgende Beispiel zeigt einen Konstruktor für ein Muster, mit dem ein Ankerelement erstellt wird, wobei das erste und das zweite Element aus der Methode format() übernommen werden: var formatter = new google.visualization.PatternFormat( '<a href="mailto:{1}">{0}</a>');
format(dataTable, srcColumnIndices, opt_dstColumnIndex)	Standardformatierungsaufruf mit einigen zusätzlichen Parametern: dataTable – DataTable, an der der Vorgang ausgeführt werden soll. srcColumnIndices: Ein Array mit einem oder mehreren (nullbasierten) Spaltenindexen, die als Quellen aus der zugrunde liegenden DataTable abgerufen werden sollen. Diese wird als Datenquelle für den Parameter pattern im Konstruktor verwendet. Die Spaltennummern müssen nicht in sortierter Reihenfolge angegeben werden. opt_dstColumnIndex – [optional] Die Zielspalte für die Ausgabe der pattern-Manipulation. Wenn nicht angegeben, wird das erste Element in srcColumIndices als Ziel verwendet. Die Formatierungsbeispiele finden Sie im Anschluss an die Tabelle.

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

Row before formatting (4 columns, last is blank):
John  |  Paul  |  Jones  |  [empty]

var formatter = new google.visualization.PatternFormat("{0} {1} {2}");
formatter.format(data, [0,1,2], 3);
Output:
  John  |  Paul  |  Jones  |  John Paul Jones

var formatter = new google.visualization.PatternFormat("{1}, {0}");
formatter.format(data, [0,2], 3);
Output:
  John  |  Paul  |  Jones  |  Jones, John

Beispielcode

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

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

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. _table_query_url wird bevorzugt, um die URL der Datenquelle für die Abfrage festzulegen. _table_query_refresh_interval wird bevorzugt verwendet, um das Aktualisierungsintervall für Abfragen (in Sekunden) festzulegen.
validateResponse(response)	Boolesch	Statisch. Der Parameter response ist vom Typ google.visualization.QueryResponse. Gibt true zurück, wenn die Antwort Daten enthält. Gibt false zurück, wenn die Abfrageausführung fehlgeschlagen ist und die Antwort keine Daten enthält. Wenn ein Fehler aufgetreten ist, zeigt diese Methode eine Fehlermeldung an.

Abfrageklassen

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

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

Abfrage

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

Konstruktor

google.visualization.Query(dataSourceUrl, opt_options)

Parameter

dataSourceUrl

[Erforderlich, String] URL, an die die Abfrage gesendet werden soll. Weitere Informationen zu Google Tabellen finden Sie in der Dokumentation zu Diagrammen und Tabellen.

opt_options

[Optional, Objekt] Eine Zuordnung der Optionen für die Anfrage. Hinweis : Wenn Sie auf eine eingeschränkte Datenquelle zugreifen, sollten Sie diesen Parameter nicht verwenden. Folgende Attribute werden unterstützt:

• sendMethod - [Optional, String] Gibt die Methode an, die zum Senden der Abfrage verwendet werden soll. Wählen Sie einen der folgenden Stringwerte aus:
  • 'xhr': Senden der Abfrage mit XmlHttpRequest
  • 'scriptInjection': Senden Sie die Abfrage mithilfe einer Skripteinschleusung.
  • 'makeRequest' – [Nur für Gadgets verfügbar, die verworfen wurden] Die Anfrage wird mithilfe der Gadgets API-Methode makeRequest() gesendet. Falls angegeben, sollten Sie auch makeRequestParams angeben.
  • 'auto': Die im URL-Parameter tqrt der Datenquellen-URL angegebene Methode wird verwendet. tqrt kann die folgenden Werte haben: „xhr“, „scriptInjection“ oder „makeRequest“. Wenn tqrt fehlt oder einen ungültigen Wert hat, ist der Standardwert für Anfragen innerhalb der Domain „xhr“ und für domainübergreifende Anfragen „scriptInjection“.
• makeRequestParams – [Objekt] Eine Zuordnung von Parametern für eine makeRequest()-Abfrage. Wird nur verwendet und ist nur erforderlich, wenn sendMethod den Wert "makeRequest" hat.

Methoden

Methode	Rückgabewert	Beschreibung
abort()	Ohne	Beendet das automatische Senden von Abfragen, das mit setRefreshInterval() gestartet wurde.
setRefreshInterval(seconds)	Ohne	Legt die Abfrage so fest, dass die Methode send jede angegebene Dauer (Anzahl der Sekunden) automatisch aufgerufen wird, beginnend ab dem ersten expliziten Aufruf von send. seconds ist eine Zahl größer oder gleich null. Wenn Sie diese Methode verwenden, sollten Sie sie vor dem Aufrufen der send-Methode aufrufen. Brechen Sie diese Methode ab, indem Sie sie noch einmal mit null (Standardeinstellung) aufrufen oder abort() aufrufen.
setTimeout(seconds)	Ohne	Legt fest, wie viele Sekunden auf die Antwort der Datenquelle gewartet werden soll, bevor ein Zeitüberschreitungsfehler ausgelöst wird. seconds ist eine Zahl größer als null. Das Standardzeitlimit beträgt 30 Sekunden. Falls diese Methode verwendet wird, sollte sie vor dem Aufrufen der Methode send aufgerufen werden.
setQuery(string)	Ohne	Legt den Abfragestring fest. Der Wert des Parameters string sollte eine gültige Abfrage sein. Wenn diese Methode verwendet wird, sollte sie vor dem Aufrufen der Methode send aufgerufen werden. Weitere Informationen zur Abfragesprache
send(callback)	Ohne	Sendet die Abfrage an die Datenquelle. callback sollte eine Funktion sein, die aufgerufen wird, wenn die Datenquelle antwortet. Die Callback-Funktion empfängt einen einzelnen Parameter vom Typ google.visualization.QueryResponse.

QueryResponse

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

Methoden

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

Fehleranzeige

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

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

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

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

Funktion	Rückgabewert	Beschreibung
addError(container, message, opt_detailedMessage, opt_options)	String-ID-Wert, der das erstellte Fehlerobjekt identifiziert. Dies ist ein eindeutiger Wert auf der Seite, mit dem der Fehler entfernt oder das enthaltene Element ermittelt werden kann.	Fügt dem angegebenen Seitenelement einen Fehleranzeigeblock mit dem angegebenen Text und der angegebenen Formatierung hinzu. container – Das DOM-Element, in das die Fehlermeldung eingefügt werden soll. Wenn der Container nicht gefunden wird, gibt die Funktion einen JavaScript-Fehler aus. message – Eine Stringnachricht, die angezeigt werden soll. opt_detailedMessage – ein optionaler detaillierter Nachrichtenstring. Standardmäßig handelt es sich dabei um Mouseover-Text, der jedoch mit der unten beschriebenen Eigenschaft opt_options.showInToolTip geändert werden kann. opt_options – Ein optionales Objekt mit Eigenschaften, mit denen verschiedene Anzeigeoptionen für die Nachricht festgelegt werden. Folgende Optionen werden unterstützt: showInTooltip: Ein boolescher Wert, bei dem „true“ die detaillierte Nachricht nur als Text für Kurzinfos und „false“ die detaillierte Nachricht im Containertext nach der kurzen Nachricht anzeigt. Der Standardwert ist "true". type: Ein String, der den Fehlertyp beschreibt. Damit wird bestimmt, welche CSS-Stile auf die Nachricht angewendet werden sollen. Die unterstützten Werte sind „error“ und „warning“. Der Standardwert ist „Fehler“. style – Ein Stilstring für die Fehlermeldung. Dieser Stil überschreibt alle Stile, die auf den Warntyp (opt_options.type) angewendet werden. Beispiel: 'background-color: #33ff99; padding: 2px;' Der Standardwert ist ein leerer String. removable: ein boolescher Wert, wobei „true“ bedeutet, dass die Nachricht durch einen Mausklick des Nutzers geschlossen werden kann. Der Standardwert ist "false".
addErrorFromQueryResponse(container, response)	String-ID-Wert, der das erstellte Fehlerobjekt identifiziert, oder null, wenn in der Antwort kein Fehler angegeben wurde. Dies ist ein eindeutiger Wert auf der Seite, mit dem der Fehler entfernt oder das enthaltene Element ermittelt werden kann.	Übergeben Sie einen Abfrageantwort- und Fehlermeldungscontainer an diese Methode: Wenn die Abfrageantwort auf einen Abfragefehler hinweist, wird im angegebenen Seitenelement eine Fehlermeldung angezeigt. Wenn die Abfrageantwort null ist, gibt die Methode einen JavaScript-Fehler aus. Übergeben Sie die in Ihrem Abfrage-Handler erhaltene QueryResponse an diese Nachricht, um einen Fehler anzuzeigen. Außerdem wird der Stil der Anzeige entsprechend dem Typ festgelegt (Fehler oder Warnung, ähnlich wie bei addError(opt_options.type)). container – Das DOM-Element, in das die Fehlermeldung eingefügt werden soll. Wenn der Container nicht gefunden wird, gibt die Funktion einen JavaScript-Fehler aus. response: Ein QueryResponse-Objekt, das von Ihrem Abfrage-Handler als Antwort auf eine Abfrage empfangen wurde. Wenn dieser Wert null ist, gibt die Methode einen JavaScript-Fehler aus.
removeError(id)	Boolescher Wert: "true", wenn der Fehler entfernt wurde; andernfalls "false".	Entfernt den durch die ID angegebenen Fehler von der Seite. id – String-ID eines Fehlers, der mit addError() oder addErrorFromQueryResponse() erstellt wurde.
removeAll(container)	Ohne	Entfernt alle Fehlerblöcke aus einem angegebenen Container. Wenn der angegebene Container nicht vorhanden ist, wird ein Fehler ausgegeben. container – das DOM-Element mit den zu entfernenden Fehlerstrings Wenn der Container nicht gefunden wird, gibt die Funktion einen JavaScript-Fehler aus.
getContainer(errorId)	Handle zu einem DOM-Element, das den angegebenen Fehler enthält, oder null, wenn es nicht gefunden wurde.	Ruft ein Handle für das Containerelement ab, das den durch errorID angegebenen Fehler enthält. errorId – String-ID eines Fehlers, der mit addError() oder addErrorFromQueryResponse() erstellt wurde.

Ereignisse

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

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

• 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 oder DataView mit den Daten, die zum Zeichnen des Diagramms verwendet werden sollen. Es gibt keine Standardmethode zum Extrahieren einer DataTable aus einem Diagramm.

options

[Optional] Eine Zuordnung von Name/Wert-Paaren benutzerdefinierter Optionen. Beispiele hierfür sind Höhe und Breite, Hintergrundfarben und Untertitel. In der Visualisierungsdokumentation sollten die verfügbaren Optionen aufgeführt sein. Wenn Sie diesen Parameter nicht angeben, sollten die Standardoptionen unterstützt werden. Sie können die JavaScript-Objektliteralsyntax verwenden, um eine Optionszuordnung zu übergeben, z.B. {x:100, y:200, title:'An Example'}

Beispiel

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

getAction()

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

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

Example:

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

getSelection()

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

selection_array getSelection()

Rückgabe

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

Beispiel

function myClickHandler(){
  var selection = myVis.getSelection();
  var message = '';

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

removeAction()

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

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

Example:

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

setAction()

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

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

setAction(action object)

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

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

Example:

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

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

Example:

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

setSelection()

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

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

setSelection(selection_array)

selection_array

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

Verschiedene statische Methoden

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

arrayToDataTable()

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

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

Syntax

google.visualization.arrayToDataTable(twoDArray, opt_firstRowIsData)

twoDArray

Ein zweidimensionales Array, wobei jede Zeile für eine Zeile in der Datentabelle steht. Wenn opt_firstRowIsData auf „false“ gesetzt ist (Standardeinstellung), wird die erste Zeile als Kopfzeilenlabels interpretiert. Die Datentypen der einzelnen Spalten werden automatisch aus den gegebenen Daten interpretiert. Wenn eine Zelle keinen Wert hat, geben Sie einen Null- oder leeren Wert an.

opt_firstRowIsData

Gibt an, ob die erste Zeile eine Kopfzeile definiert. Falls wahr, wird angenommen, dass es sich bei allen Zeilen um Daten handelt. Bei „false“ wird davon ausgegangen, dass die erste Zeile eine Kopfzeile ist. Die Werte werden als Spaltenlabels zugewiesen. Der Standardwert ist „false“.

Rückgabe

Ein neues DataTable.

Beispiele

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

// Version 1: arrayToDataTable method
var data2 = google.visualization.arrayToDataTable([
  [{label: 'Country', type: 'string'},
   {label: 'Population', type: 'number'},
   {label: 'Area', type: 'number'},
   {type: 'string', role: 'annotation'}],
  ['CN', 1324, 9640821, 'Annotated'],
  ['IN', 1133, 3287263, 'Annotated'],
  ['US', 304, 9629091, 'Annotated'],
  ['ID', 232, 1904569, 'Annotated'],
  ['BR', 187, 8514877, 'Annotated']
]);

// Version 2: DataTable.addRows
var data3 = new google.visualization.DataTable();
data3.addColumn('string','Country');
data3.addColumn('number','Population');
data3.addColumn('number','Area');
data3.addRows([
  ['CN', 1324, 9640821],
  ['IN', 1133, 3287263],
  ['US', 304, 9629091],
  ['ID', 232, 1904569],
  ['BR', 187, 8514877]
]);

// Version 3: DataTable.setValue
var data = new google.visualization.DataTable();
data.addColumn('string','Country');
data.addColumn('number', 'Population');
data.addColumn('number', 'Area');
data.addRows(5);
data.setValue(0, 0, 'CN');
data.setValue(0, 1, 1324);
data.setValue(0, 2, 9640821);
data.setValue(1, 0, 'IN');
data.setValue(1, 1, 1133);
data.setValue(1, 2, 3287263);
data.setValue(2, 0, 'US');
data.setValue(2, 1, 304);
data.setValue(2, 2, 9629091);
data.setValue(3, 0, 'ID');
data.setValue(3, 1, 232);
data.setValue(3, 2, 1904569);
data.setValue(4, 0, 'BR');
data.setValue(4, 1, 187);
data.setValue(4, 2, 8514877);

drawChart()

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

Syntax

google.visualization.drawChart(chart_JSON_or_object)

chart_JSON_or_object

Entweder ein JSON-Literalstring oder ein JavaScript-Objekt mit den folgenden Attributen (unter Berücksichtigung der Groß- und Kleinschreibung):

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

Beispiele

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

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

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

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

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

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

drawToolbar()

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