Übersicht
Dashboards bieten eine einfache Möglichkeit, mehrere Diagramme mit denselben zugrunde liegenden Daten zu organisieren und zu verwalten. Mit den auf dieser Seite beschriebenen APIs können Sie die Verkabelung und das Koordinieren aller Diagramme in einem Dashboard ersparen.
Dashboards werden mithilfe von google.visualization.Dashboard
-Klassen definiert.
Dashboard
-Instanzen empfangen eine DataTable
mit den Daten, die visualisiert werden sollen. Die Daten werden dann gezeichnet und an alle Diagramme des Dashboards verteilt.
Steuerelemente sind UI-Widgets (z. B. Kategorieauswahl, Bereichsschieberegler, automatische Vervollständigungen), mit denen Sie interagieren, um die von einem Dashboard verwalteten Daten und die zugehörigen Diagramme zu steuern.
Steuerelemente werden mithilfe von google.visualization.ControlWrapper
-Klassen definiert.
Sie können einem Dashboard ControlWrapper
-Instanzen hinzufügen, die sich wie Rohre und Ventile in einem Sanitärsystem verhalten. Sie erfassen Nutzereingaben und entscheiden anhand der Informationen, welche der vom Dashboard verwalteten Daten für die zugehörigen Diagramme verfügbar gemacht werden sollen.
Im folgenden Beispiel werden die in einem Kreisdiagramm dargestellten Daten mit einer Kategorieauswahl und einem Bereichsschieberegler dargestellt.
Hinweis:Das Dashboard ist interaktiv. Versuchen Sie, die Steuerelemente mit den Steuerelementen zu verwenden, und sehen Sie sich die Änderungen am Diagramm in Echtzeit an.
Steuerelemente und Dashboards verwenden
Hier sind die wichtigsten Schritte zum Erstellen eines Dashboards und zum Einbetten in Ihre Seite. Unten sehen Sie ein Code-Snippet, das alle diese Schritte veranschaulicht, gefolgt von detaillierten Informationen zu jedem Schritt.
- Erstellen Sie ein HTML-Gerüst für Ihr Dashboard. Ihre Seite muss so viele HTML-Elemente enthalten, wie für jedes Mitglied eines Dashboards erforderlich sind. Dazu gehören das Dashboard selbst und alle zugehörigen Steuerelemente und Diagramme. Normalerweise verwenden Sie für jede URL ein <div>-Element.
-
Bibliotheken laden Für ein Dashboard müssen nur zwei Bibliotheken auf der Seite enthalten oder geladen werden: die Google AJAX API und das
controls
-Paket für die Google-Visualisierung. - Daten vorbereiten Sie müssen die zu visualisierenden Daten vorbereiten. Dies bedeutet, dass Sie die Daten entweder selbst in Code angeben oder Daten von einer Remote-Website abfragen.
- Dashboard-Instanz erstellen Instanziieren Sie Ihr Dashboard, indem Sie seinen Konstruktor aufrufen und einen Verweis auf das <div>-Element übergeben, das es enthält.
-
Erstellen Sie beliebig viele Steuerelemente und Diagramminstanzen.
Erstellen Sie
google.visualization.ChartWrapper
- undgoogle.visualization.ControlWrapper
-Instanzen, um jedes Diagramm und jede Steuerung zu beschreiben, die vom Dashboard verwaltet werden. -
Abhängigkeiten einrichten Rufen Sie
bind()
auf Ihrem Dashboard auf und übergeben Sie die Kontroll- und Diagramminstanzen, damit das Dashboard weiß, was verwaltet werden soll. Sobald ein Steuerelement und ein Diagramm verknüpft sind, aktualisiert das Dashboard das Diagramm, um es den Einschränkungen anzupassen, die die Steuerung für die Daten erzwingt. -
Zeichne dein Dashboard. Rufen Sie
draw()
im Dashboard auf und übergeben Sie Ihre Daten, um das gesamte Dashboard auf der Seite zu zeichnen. - Programmatische Änderungen nach dem Zeichnen: Optional können Sie nach der ersten Zeichnung die Steuerelemente, die Teil des Dashboards sind, programmatisch steuern und das Dashboard die Diagramme entsprechend aktualisieren.
Hier ein einfaches Beispiel für eine Seite, auf der ein einfaches Dashboard mit einem Bereichsschieberegler für ein Kreisdiagramm erstellt wird. Das resultierende Dashboard wird unter dem Snippet angezeigt.
<html> <head> <!--Load the AJAX API--> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> // Load the Visualization API and the controls package. google.charts.load('current', {'packages':['corechart', 'controls']}); // Set a callback to run when the Google Visualization API is loaded. google.charts.setOnLoadCallback(drawDashboard); // Callback that creates and populates a data table, // instantiates a dashboard, a range slider and a pie chart, // passes in the data and draws it. function drawDashboard() { // Create our data table. var data = google.visualization.arrayToDataTable([ ['Name', 'Donuts eaten'], ['Michael' , 5], ['Elisa', 7], ['Robert', 3], ['John', 2], ['Jessica', 6], ['Aaron', 1], ['Margareth', 8] ]); // Create a dashboard. var dashboard = new google.visualization.Dashboard( document.getElementById('dashboard_div')); // Create a range slider, passing some options var donutRangeSlider = new google.visualization.ControlWrapper({ 'controlType': 'NumberRangeFilter', 'containerId': 'filter_div', 'options': { 'filterColumnLabel': 'Donuts eaten' } }); // Create a pie chart, passing some options var pieChart = new google.visualization.ChartWrapper({ 'chartType': 'PieChart', 'containerId': 'chart_div', 'options': { 'width': 300, 'height': 300, 'pieSliceText': 'value', 'legend': 'right' } }); // Establish dependencies, declaring that 'filter' drives 'pieChart', // so that the pie chart will only display entries that are let through // given the chosen slider range. dashboard.bind(donutRangeSlider, pieChart); // Draw the dashboard. dashboard.draw(data); } </script> </head> <body> <!--Div that will hold the dashboard--> <div id="dashboard_div"> <!--Divs that will hold each control and chart--> <div id="filter_div"></div> <div id="chart_div"></div> </div> </body> </html>
Hier ist das Dashboard, das durch diesen Code erstellt wird.
1. Ein HTML-Raster für Ihr Dashboard erstellen
Deine Seite muss so viele HTML-Elemente (normalerweise <div>s) enthalten, dass sowohl das Dashboard als auch alle zugehörigen Steuerelemente und Diagramme enthalten sind. Beim Instanziieren von Dashboard-, Steuerelement- und Diagramminstanzen müssen Sie einen Verweis auf die zugehörigen Elemente übergeben. Weisen Sie deshalb jedem HTML-Element eine ID zu.
<!--Div that will hold the dashboard--> <div id="dashboard_div"> <!--Divs that will hold each control and chart--> <div id="filter_div"></div> <div id="chart_div"></div> </div>
Sie können jedes HTML-Element so positionieren, wie Ihr Dashboard aussehen soll.
2. Bibliotheken laden
Für ein Dashboard müssen nur zwei Bibliotheken auf der Seite eingebunden oder geladen werden: die Google AJAX API und das controls
-Paket für die Google-Visualisierung. Die API (insbesondere google.visualization.ChartWrapper
) erkennt automatisch die anderen erforderlichen Pakete (z. B. gauge
, wenn Sie ein Tachometerdiagramm verwenden) und lädt sie während des Vorgangs, ohne dass Sie etwas tun müssen.
Zum Abrufen der Steuerelementbibliothek müssen Sie google.charts.load()
verwenden.
<!--Load the AJAX API--> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> // Load the Visualization API and the controls package. // Packages for all the other charts you need will be loaded // automatically by the system. google.charts.load('current', {'packages':['corechart', 'controls']}); // Set a callback to run when the Google Visualization API is loaded. google.charts.setOnLoadCallback(drawDashboard); function drawDashboard() { // Everything is loaded. Assemble your dashboard... } </script>
3. Daten vorbereiten
Wenn die Visualization API geladen wurde, ruft google.charts.setOnLoadCallback()
Ihre Handler-Funktion auf, damit Sie wissen, dass alle erforderlichen Hilfsmethoden und -klassen bereit sind, um mit der Vorbereitung Ihrer Daten zu beginnen.
Dashboards akzeptieren Daten in einer Datentabelle, genau wie Diagramme.
4. Dashboardinstanz erstellen
Nachdem Sie die Daten erstellt haben, können Sie das Dashboard-Objekt instanziieren. Ein Dashboard-Konstruktor verwendet einen Parameter: einen Verweis auf das DOM-Element, in das das Dashboard gezeichnet werden soll.
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
Dashboards werden als JavaScript-Klasse bereitgestellt. Nach der Instanziierung des Dashboards können Sie einige optionale Schritte ausführen und z. B. Ereignis-Listener hinzufügen (z. B. um benachrichtigt zu werden, sobald das Dashboard bereit ist). Dashboards verarbeiten Ereignisse auf die gleiche Weise wie Diagramme. Weitere Informationen finden Sie im Diagrammabschnitt unter Visualisierungsereignisse verarbeiten oder Fehler gut anzeigen.
5. Steuer- und Diagramminstanzen erstellen
Definieren Sie so viele Instanzen wie nötig für jedes Steuerelement und Diagramm, das Teil des Dashboards sein wird.
Verwenden Sie
google.visualization.ChartWrapper
und
google.visualization.ControlWrapper
, um Diagramme bzw. Steuerelemente zu definieren.
// Create a range slider, passing some options var donutRangeSlider = new google.visualization.ControlWrapper({ 'controlType': 'NumberRangeFilter', 'containerId': 'filter_div', 'options': { 'filterColumnLabel': 'Donuts eaten' } }); // Create a pie chart, passing some options var pieChart = new google.visualization.ChartWrapper({ 'chartType': 'PieChart', 'containerId': 'chart_div', 'options': { 'width': 300, 'height': 300, 'pieSliceText': 'label' } });
Geben Sie beim Erstellen von ChartWrapper
- und ControlWrapper
-Instanzen weder den Parameter dataTable
noch den Parameter dataSourceUrl
an. Das Dashboard stellt die entsprechenden Daten bereit. Sie müssen jedoch die erforderlichen Parameter angeben: chartType
und containerId
für Diagramme, controlType
und containerId
für Steuerelemente.
Tipps zum Konfigurieren von Steuerelementen und Diagrammen:
-
Sie müssen allen Steuerelementen ein
filterColumnIndex
(oderfilterColumnLabel
) zuweisen, um anzugeben, auf welche Spalte desgoogle.visualization.DataTable
die Steuerung angewendet wird (im Beispiel oben verwendet das Steuerelement die Spalte Verzehrte Donuts). -
Verwenden Sie die Konfigurationsoption
state
für Steuerelemente, um sie mit einem expliziten Zustand zu initialisieren, wenn sie zum ersten Mal gezeichnet werden. Sie können damit beispielsweise die Anfangspositionen der Daumen eines Bereichsschiebereglers festlegen.var donutRangeSlider = new google.visualization.ControlWrapper({ 'controlType': 'NumberRangeFilter', 'containerId': 'filter_div', 'options': { 'filterColumnLabel': 'Donuts eaten', 'minValue': 1, 'maxValue': 10 }, // Explicitly positions the thumbs at position 3 and 8, // out of the possible range of 1 to 10. 'state': {'lowValue': 3, 'highValue': 8} });
-
Alle Diagramme, die zu einem Dashboard gehören, haben dieselbe zugrunde liegende Datentabelle, die Sie im Schritt Daten vorbereiten vorbereitet haben. Diagramme erfordern jedoch häufig eine bestimmte Anordnung der Spalten, um korrekt angezeigt zu werden: Ein Kreisdiagramm benötigt beispielsweise eine Stringspalte für das Label, gefolgt von einer Zahlenspalte für den Wert.
Konfigurieren Sie jede
ChartWrapper
-Instanz mit der Optionview
, um anzugeben, welche Spalten für das Diagramm relevant sind. Beispiel:var data = google.visualization.arrayToDataTable([ ['Name', 'Gender', 'Age', 'Donuts eaten'], ['Michael' , 'Male', 12, 5], ['Elisa', 'Female', 20, 7], ['Robert', 'Male', 7, 3], ['John', 'Male', 54, 2], ['Jessica', 'Female', 22, 6], ['Aaron', 'Male', 3, 1], ['Margareth', 'Female', 42, 8] ]); var pieChart = new google.visualization.ChartWrapper({ 'chartType': 'PieChart', 'containerId': 'chart_div', 'options': { 'width': 300, 'height': 300, 'title': 'Donuts eaten per person' }, // The pie chart will use the columns 'Name' and 'Donuts eaten' // out of all the available ones. 'view': {'columns': [0, 3]} }); // The rest of dashboard configuration follows // ...
6. Abhängigkeiten einrichten
Nachdem Sie sowohl das Dashboard als auch alle zugehörigen Steuerelemente und Diagramme instanziiert haben, verwenden Sie die Methode bind()
, um das Dashboard über die Abhängigkeiten zwischen Steuerelementen und Diagrammen zu informieren.
Sobald ein Steuerelement und ein Diagramm verknüpft sind, aktualisiert das Dashboard das Diagramm, um es den Einschränkungen anzupassen, die die Steuerung für die Daten erzwingt. In dem von Ihnen erstellten Beispiel-Dashboard sind der Bereichsschieberegler und das Kreisdiagramm aneinander gebunden. Wenn Sie mit dem ersten Diagramm interagieren, wird letzteres so aktualisiert, dass nur die Daten angezeigt werden, die dem ausgewählten Bereich entsprechen.
// 'pieChart' will update whenever you interact with 'donutRangeSlider' // to match the selected range. dashboard.bind(donutRangeSlider, pieChart);
Sie können Steuerelemente und Diagramme in vielen verschiedenen Konfigurationen binden: 1:1, 1:n, n:1 und m:n. Wenn mehrere Steuerelemente an ein Diagramm gebunden sind, aktualisiert das Dashboard das Diagramm so, dass es den kombinierten Einschränkungen entspricht, die von allen gebundenen Steuerelementen erzwungen werden. Gleichzeitig können mit einer Steuerung mehrere Diagramme gleichzeitig ausgeführt werden. Wenn Sie mehrere Bindungen gleichzeitig angeben möchten, übergeben Sie Arrays statt einzelner Instanzen an die Methode bind()
. Sie können auch mehrere bind()
-Aufrufe verketten. Hier einige Beispiele:
// Many-to-one binding where 'ageSelector' and 'salarySelector' concurrently // participate in selecting which data 'ageVsSalaryScatterPlot' visualizes. dashboard.bind([agePicker, salaryPicker], ageVsSalaryScatterPlot); // One-to-many binding where 'ageSelector' drives two charts. dashboard.bind(agePicker, [ageVsSalaryScatterPlot, ageBarChart]); // bind() chaining where each control drives its own chart. dashboard.bind(agePicker, ageBarChart).bind(salaryRangePicker, salaryPieChart);
Für erweiterte Verwendungen können Sie Steuerelemente auch an andere Steuerelemente binden, um Abhängigkeitsketten einzurichten.
dashboard.bind(countryPicker, regionPicker).bind(regionPicker, cityPicker);
7. Dashboard zeichnen
Rufen Sie die Methode draw()
für die Dashboardinstanz auf, um das gesamte Dashboard zu rendern.
Die Methode draw()
verwendet nur einen Parameter: den DataTable
(oder DataView
), der das Dashboard steuert.
Sie sollten draw()
jedes Mal aufrufen, wenn Sie die Zusammensetzung des Dashboards ändern (z. B. durch Hinzufügen neuer Steuerelemente oder Diagramme) oder wenn Sie die allgemeine DataTable
ändern, auf der es basiert.
Die Dashboardinstanz löst immer dann ein ready
-Ereignis aus, wenn draw()
beendet wird und alle zugehörigen Steuerelemente und Diagramme darstellt. Ein error
-Ereignis wird ausgelöst, wenn eine der verwalteten Steuerelemente oder eines Diagramms nicht dargestellt werden kann. Weitere Informationen zum Verarbeiten von Ereignissen finden Sie unter Ereignisse verarbeiten.
Hinweis: Sie sollten auf das ready
-Ereignis warten, bevor Sie versuchen, die Dashboardzusammensetzung zu ändern oder noch einmal zu zeichnen.
8. Programmatische Änderungen nach der Auslosung
Sobald das Dashboard den ersten draw()
erstellt hat, ist es aktiv und reagiert automatisch auf jede Aktion, die Sie dafür ausführen (z. B. das Ändern des ausgewählten Bereichs eines Schiebereglers für Steuerelemente, der Teil des Dashboards ist).
Wenn Sie den Dashboard-Status programmatisch ändern müssen, können Sie dies direkt in den Instanzen ControlWrapper
und ChartWrapper
tun, die Teil davon sind.
Als Faustregel gilt: Nehmen Sie alle erforderlichen Änderungen direkt für die jeweilige ControlWrapper
- oder ChartWrapper
-Instanz vor. Ändern Sie beispielsweise eine Steuerungsoption oder einen -status über setOption()
bzw. setState()
und rufen Sie anschließend die Methode draw()
auf. Das Dashboard wird dann entsprechend den angeforderten Änderungen aktualisiert.
Das folgende Beispiel zeigt einen solchen Fall.
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['corechart', 'controls']}); google.charts.setOnLoadCallback(drawStuff); function drawStuff() { var dashboard = new google.visualization.Dashboard( document.getElementById('programmatic_dashboard_div')); // We omit "var" so that programmaticSlider is visible to changeRange. var programmaticSlider = new google.visualization.ControlWrapper({ 'controlType': 'NumberRangeFilter', 'containerId': 'programmatic_control_div', 'options': { 'filterColumnLabel': 'Donuts eaten', 'ui': {'labelStacking': 'vertical'} } }); var programmaticChart = new google.visualization.ChartWrapper({ 'chartType': 'PieChart', 'containerId': 'programmatic_chart_div', 'options': { 'width': 300, 'height': 300, 'legend': 'none', 'chartArea': {'left': 15, 'top': 15, 'right': 0, 'bottom': 0}, 'pieSliceText': 'value' } }); var data = google.visualization.arrayToDataTable([ ['Name', 'Donuts eaten'], ['Michael' , 5], ['Elisa', 7], ['Robert', 3], ['John', 2], ['Jessica', 6], ['Aaron', 1], ['Margareth', 8] ]); dashboard.bind(programmaticSlider, programmaticChart); dashboard.draw(data); changeRange = function() { programmaticSlider.setState({'lowValue': 2, 'highValue': 5}); programmaticSlider.draw(); }; changeOptions = function() { programmaticChart.setOption('is3D', true); programmaticChart.draw(); }; } </script> </head> <body> <div id="programmatic_dashboard_div" style="border: 1px solid #ccc"> <table class="columns"> <tr> <td> <div id="programmatic_control_div" style="padding-left: 2em; min-width: 250px"></div> <div> <button style="margin: 1em 1em 1em 2em" onclick="changeRange();"> Select range [2, 5] </button><br /> <button style="margin: 1em 1em 1em 2em" onclick="changeOptions();"> Make the pie chart 3D </button> </div> </td> <td> <div id="programmatic_chart_div"></div> </td> </tr> </table> </div> </body> </html>
API-Referenz
In diesem Abschnitt sind die von der Controls and Dashboards API bereitgestellten Objekte sowie die Standardmethoden aufgeführt, die von allen Steuerelementen zur Verfügung gestellt werden.
Dashboard
Stellt eine Sammlung von Steuerelementen und Diagrammen für die Zusammenarbeit dar, die dieselben zugrunde liegenden Daten verwenden.
Konstruktor
Dashboard(containerRef)
- containerRef
- Ein Verweis auf ein gültiges Containerelement auf der Seite, das den Dashboard-Inhalt enthält.
Methoden
Das Dashboard stellt die folgenden Methoden bereit:
Methode | Rückgabetyp | Beschreibung |
---|---|---|
bind(controls, charts) |
google.visualization.Dashboard |
Bindet ein oder mehrere Steuerelemente an einen oder mehrere andere Dashboard-Teilnehmer (entweder Diagramme oder andere Steuerelemente), sodass letztere neu gezeichnet werden, wenn eines der Steuerelemente eine programmatische oder Nutzerinteraktion erfasst, die sich auf die vom Dashboard verwalteten Daten auswirkt. Gibt die Dashboard-Instanz selbst zum Verketten mehrerer
|
draw(dataTable) |
Ohne | Zeichnet das Dashboard.
|
getSelection() |
Array von Objekten |
Gibt ein Array der ausgewählten visuellen Entitäten der Diagramme im Dashboard zurück. Wenn die Methode Hinweis:Event-Listener für das „select“-Ereignis müssen trotzdem an jedes Diagramm angehängt werden, das Sie beobachten möchten. |
Veranstaltungen
Das Dashboard-Objekt löst die folgenden Ereignisse aus. Sie müssen Dashboard.draw()
aufrufen, bevor Ereignisse ausgelöst werden.
Name | Beschreibung | Attribute |
---|---|---|
error |
Wird ausgelöst, wenn beim Versuch, das Dashboard zu rendern, ein Fehler auftritt. Bei mindestens einem der Steuerelemente und Diagramme, die Teil des Dashboards sind, ist möglicherweise das Rendern fehlgeschlagen. | ID, Nachricht |
ready |
Die Zeichnung im Dashboard ist abgeschlossen und die Änderungen können jetzt übernommen werden. Alle Steuerelemente und Diagramme des Dashboards sind bereit für externe Methodenaufrufe und Nutzerinteraktionen. Wenn Sie das Dashboard (oder die angezeigten Daten) nach dem Zeichnen ändern möchten, sollten Sie einen Listener für dieses Ereignis einrichten, bevor Sie die Methode Das
|
Ohne |
ControlWrapper
Ein ControlWrapper-Objekt ist ein Wrapper um eine JSON-Darstellung einer konfigurierten Steuerinstanz. Die Klasse stellt praktische Methoden bereit, mit denen ein Dashboard-Steuerelement definiert, gezeichnet und sein Status programmatisch geändert werden kann.
Konstruktor
ControlWrapper(opt_spec)
- opt_spec
- [optional]: Entweder ein JSON-Objekt, das das Steuerelement definiert, oder eine serialisierte Stringversion dieses Objekts. Die unterstützten Eigenschaften des JSON-Objekts sind in der folgenden Tabelle aufgeführt. Wenn nicht angegeben, müssen Sie alle entsprechenden Eigenschaften mit den von ControlWrapper bereitgestellten set...-Methoden festlegen.
Attribut | Typ | Erforderlich | Standard | Beschreibung |
---|---|---|---|---|
controlType | String | Erforderlich | keine |
Der Klassenname des Steuerelements. Der Paketname google.visualization kann für Google-Steuerelemente weggelassen werden. Beispiele:CategoryFilter , NumberRangeFilter .
|
containerId | String | Erforderlich | keine | Die ID des DOM-Elements auf Ihrer Seite, auf dem das Steuerelement gehostet wird. |
Optionen | Objekt | Optional | keine |
Ein Objekt, das die Optionen für das Steuerelement beschreibt. Sie können entweder die JavaScript-Literal-Notation verwenden oder ein Handle für das Objekt angeben. Beispiel:
"options": {"filterColumnLabel": "Age",
"minValue": 10, "maxValue": 80}
|
state | Objekt | Optional | keine |
Ein Objekt, das den Status des Steuerelements beschreibt. Der Status erfasst alle Variablen, auf die sich der Nutzer auswirken kann, der das Steuerelement verwendet. Beispielsweise kann der Zustand eines Schiebereglers in Bezug auf die Positionen beschrieben werden, die der untere und der hohe Daumen des Schiebereglers einnehmen. Sie können entweder JavaScript-Literalschreibweise verwenden oder ein Handle für das Objekt angeben.Beispiel:
"state": {"lowValue": 20, "highValue": 50}
|
Methoden
ControlWrapper stellt die folgenden zusätzlichen Methoden bereit:
Methode | Rückgabetyp | Beschreibung |
---|---|---|
draw() |
Ohne |
Zeichnet das Steuerelement. Normalerweise übernimmt das Dashboard, das das Steuerelement enthält, die Zeichnung.
Sie sollten |
toJSON() |
String | Gibt eine Stringversion der JSON-Darstellung des Steuerelements zurück. |
clone() |
ControlWrapper | Gibt eine detaillierte Kopie des Steuerungs-Wrappers zurück. |
getControlType() |
String |
Der Klassenname des Steuerelements. Wenn es sich um ein Google-Steuerelement handelt, wird der Name nicht mit google.visualization qualifiziert. Handelt es sich hierbei beispielsweise um eine Kategoriefilter-Steuerung, wird „CategoryFilter“ und nicht „google.visualization.CategoryFilter“ zurückgegeben.
|
getControlName() |
String | Gibt den von setControlName() zugewiesenen Steuerelementnamen zurück. |
getControl() |
Referenz zu Steuerobjekten |
Gibt einen Verweis auf das Steuerelement zurück, das von diesem ControlWrapper erstellt wurde. Dadurch wird null zurückgegeben, bis Sie draw() für das ControlWrapper-Objekt (oder in dem Dashboard, das es enthält) aufgerufen haben, und dann das Ereignis "ready" ausgelöst wird. Das zurückgegebene Objekt stellt nur eine Methode zur Verfügung: resetControl() , die den Status des Steuerelements auf den Zustand zurücksetzt, mit dem es initialisiert wurde (z. B. das Zurücksetzen eines HTML-Formularelements).
|
getContainerId() |
String | Die ID des DOM-Containerelements des Steuerelements. |
getOption(key, opt_default_val) |
Beliebiger Typ | Gibt den angegebenen Wert der Steuerelementoption zurück
|
getOptions() |
Objekt | Gibt das Optionsobjekt für dieses Steuerelement zurück |
getState() |
Objekt | Gibt den Steuerelementstatus zurück. |
setControlType(type) |
Ohne |
Legt den Typ des Steuerelements fest. Übergeben Sie den Klassennamen des zu instanziierenden Steuerelements. Wenn dies eine Kontrolle von Google ist, qualifizieren Sie es nicht mit google.visualization .
Übergeben Sie beispielsweise bei einem Bereichsschieberegler über einer numerischen Spalte "NumberRangeFilter".
|
setControlName(name) |
Ohne | Legt einen beliebigen Namen für das Steuerelement fest. Er wird nirgendwo im Steuerelement angezeigt, sondern dient nur zu Referenzzwecken. |
setContainerId(id) |
Ohne | Legt die ID des beinhaltenden DOM-Elements für das Steuerelement fest |
setOption(key, value) |
Ohne |
Legt einen einzelnen Wert für die Steuerungsoption fest, wobei key der Optionsname und value der Wert ist. Wenn Sie die Festlegung einer Option aufheben möchten, übergeben Sie als Wert null. key kann ein qualifizierter Name wie 'vAxis.title' sein.
|
setOptions(options_obj) |
Ohne | Legt ein vollständiges Optionsobjekt für ein Steuerelement fest. |
setState(state_obj) |
Ohne | Legt den Steuerelementstatus fest. Der Status erfasst alle Variablen, auf die sich der Nutzer auswirken kann, der das Steuerelement verwendet. Beispielsweise kann der Zustand eines Schiebereglers in Bezug auf die Positionen beschrieben werden, die der untere und der hohe Daumen des Schiebereglers einnehmen. |
Veranstaltungen
Das ControlWrapper-Objekt löst die folgenden Ereignisse aus. Sie müssen ControlWrapper.draw()
aufrufen (oder das Dashboard mit dem Steuerelement zeichnen), bevor Ereignisse ausgelöst werden.
Name | Beschreibung | Attribute |
---|---|---|
error |
Wird ausgelöst, wenn beim Versuch, das Steuerelement zu rendern, ein Fehler auftritt. | ID, Nachricht |
ready |
Das Steuerelement kann Nutzerinteraktionen und externe Methodenaufrufe akzeptieren. Wenn Sie mit dem Steuerelement interagieren und Methoden aufrufen möchten, nachdem Sie es gezeichnet haben, sollten Sie einen Listener für dieses Ereignis einrichten, bevor Sie die Methode draw aufrufen. Der Aufruf muss erst erfolgen, nachdem das Ereignis ausgelöst wurde. Alternativ können Sie auf dem Dashboard auf ein ready -Ereignis mit den Steuerungs- und Aufrufsteuerungsmethoden warten, nachdem das Ereignis ausgelöst wurde.
|
Ohne |
statechange |
Wird ausgelöst, wenn der Nutzer mit dem Steuerelement interagiert und sich so auf seinen Status auswirkt Ein statechange -Ereignis wird beispielsweise immer dann ausgelöst, wenn Sie die Daumen eines Bereichsschiebereglers bewegen. Rufen Sie ControlWrapper.getState() auf, um nach dem Auslösen des Ereignisses einen aktualisierten Steuerstatus abzurufen.
|
Ohne |
ChartWrapper
Weitere Informationen finden Sie in der Dokumentation zu
google.visualization.ChartWrapper
im Abschnitt „API-Referenz für Visualisierungen“.
Die folgenden Hinweise gelten, wenn ein ChartWrapper
als Teil eines Dashboards verwendet wird:
-
Lege die Attribute
dataTable
,query
,dataSourceUrl
undrefreshInterval
nicht explizit fest. Das Dashboard mit dem Diagramm sorgt dafür, dass die benötigten Daten eingespeist werden. -
Legen Sie mit dem Attribut
view
fest, welche der im Dashboard für das Dashboard vorhandenen Spalten für das Diagramm relevant sind, wie unter Steuer- und Diagramminstanzen erstellen beschrieben.dataTable
Galerie der Steuerelemente
Filter sind grafische Elemente, mit denen Nutzer interaktiv auswählen können, welche Daten in Ihrem Diagramm angezeigt werden. In diesem Abschnitt werden die Google-Diagrammfilter beschrieben: CategoryFilter, ChartRangeFilter, DateRangeFilter, NumberRangeFilter und StringFilter.
Sie können jeden davon als Parameter für ControlWrapper.setControlType()
verwenden.
Hinweis:Bei der Beschreibung von Optionen werden verschachtelte Objektattribute mit der Punktnotation beschrieben. Beispielsweise sollte eine Option mit dem Namen 'ui.label'
in einem Optionsobjekt als var options = {"ui": {"label": "someLabelValue"} };
deklariert werden.
CategoryFilter
Eine Auswahl, um einen oder mehrere Werte aus einer Gruppe definierter Werte auszuwählen.
Status
Name | Typ | Standard | Beschreibung |
---|---|---|---|
selectedValues | Array von Objekten oder primitiven Typen | keine |
Die Gruppe der aktuell ausgewählten Werte. Die ausgewählten Werte müssen eine Reihe der auswählbaren Gesamtwerte sein, die mit der Option values definiert sind. Überflüssige Werte werden ignoriert. Wenn CategoryFilter keine Multiple-Choice-Frage zulässt, wird nur der erste Wert des Arrays beibehalten.
|
Optionen
Name | Typ | Standard | Beschreibung |
---|---|---|---|
filterColumnIndex | number | keine |
Die Spalte der Datentabelle, auf die der Filter angewendet werden soll. Sie müssen entweder diese Option oder filterColumnLabel angeben. Sind beide vorhanden, hat diese Option Vorrang.
|
filterColumnLabel | String | keine |
Das Label der Spalte, auf die der Filter angewendet werden soll. Sie müssen entweder diese Option oder filterColumnIndex angeben. Wenn beide vorhanden sind, hat filterColumnIndex Vorrang.
|
Werte | Array | Automatisch |
Liste mit Werten zur Auswahl. Wenn ein Array von Objekten verwendet wird, sollten diese eine geeignete toString() -Darstellung für den Nutzer haben. Wenn null oder nicht definiert ist, wird die Liste der Werte automatisch aus den Werten in der DataTable-Spalte berechnet, auf die dieses Steuerelement angewendet wird.
|
useFormattedValue | boolean | false | Beim automatischen Ausfüllen der Liste auswählbarer Werte aus der Datentabelle wird dieser Filter angewendet, unabhängig davon, ob die tatsächlichen Zellenwerte oder deren formatierte Werte verwendet werden sollen. |
ui | Objekt | null |
Ein Objekt mit Mitgliedern zum Konfigurieren verschiedener Aspekte der Benutzeroberfläche des Steuerelements.
Zum Angeben der Attribute dieses Objekts können Sie die Objektliteral-Notation verwenden, wie hier gezeigt:
{label: 'Metric', labelSeparator: ':'} |
ui.caption | String | „Wert auswählen...“ | Beschriftung, die im Wertauswahl-Widget angezeigt wird, wenn kein Element ausgewählt ist. |
ui.sortValues | boolean | true | Legt fest, ob die zur Auswahl stehenden Werte sortiert werden sollen. |
ui.selectedValuesLayout | String | "beiseite" | So werden ausgewählte Werte angezeigt, wenn Mehrfachauswahl zulässig ist. Folgende Werte sind möglich:
|
ui.allowNone | boolean | true |
Gibt an, ob der Nutzer keinen Wert auswählen darf. Bei false muss der Nutzer mindestens einen Wert aus den verfügbaren auswählen. Wenn die Option während der Initialisierung der Steuerung auf false gesetzt und kein selectedValues -Status angegeben wird, wird der erste Wert der verfügbaren Werte automatisch ausgewählt.
|
ui.allowMultiple | boolean | true | Gibt an, ob nur ein Wert ausgewählt werden kann. |
ui.allowTyping | boolean | true | Gibt an, ob der Nutzer in ein Textfeld tippen darf, um die Liste der möglichen Auswahlmöglichkeiten (über eine automatische Vervollständigung) einzugrenzen, oder nicht. |
ui.label | String | Automatisch | Das Label, das neben der Kategorieauswahl angezeigt werden soll. Wenn kein Wert angegeben ist, wird das Label der Spalte verwendet, auf die das Steuerelement angewendet wird. |
ui.labelSeparator | String | keine | Ein Trennzeichenstring, der an das Label angehängt wird, um das Label visuell von der Kategorieauswahl zu trennen. |
ui.labelStacking | String | 'Horizontal' |
Gibt an, ob das Label über (vertikale Stapelung) oder neben (horizontaler Stapelung) der Kategorieauswahl angezeigt werden soll. Verwende entweder 'vertical' oder 'horizontal' .
|
ui.cssClass | String | 'google-visualization-controls-categoryfilter' | Die CSS-Klasse, die dem Steuerelement für benutzerdefinierte Stile zugewiesen werden soll. |
ChartRangeFilter
Ein Schieberegler mit zwei Daumen auf ein Diagramm, um einen Wertebereich aus der kontinuierlichen Achse des Diagramms auszuwählen.
Status
Name | Typ | Standard | Beschreibung |
---|---|---|---|
range.start | number, date, datetime oder timeofday | Bereichsstartwert | Der Beginn des ausgewählten Bereichs (einschließlich). |
range.end | number, date, datetime oder timeofday | Bereichsendwert | Das Ende des ausgewählten Bereichs (einschließlich). |
Optionen
Name | Typ | Standard | Beschreibung |
---|---|---|---|
filterColumnIndex | number | keine |
Der Index der Spalte in der Datentabelle, auf die der Filter angewendet wird.
Sie müssen entweder diese Option oder filterColumnLabel angeben. Wenn beide vorhanden sind, hat diese Option Vorrang.
Es ist nur sinnvoll, einen Index für eine domain-Spalte anzugeben, die in der durchgehenden Achse des im Steuerelement gezeichneten Diagramms enthalten ist. |
filterColumnLabel | String | keine |
Das Label der Spalte der Datentabelle, auf die der Filter angewendet wird. Sie müssen entweder diese Option oder filterColumnIndex angeben. Wenn beide vorhanden sind, hat filterColumnIndex Vorrang.
Es ist nur sinnvoll, ein Label für eine Spalte domain anzugeben, die in der durchgehenden Achse des Diagramms enthalten ist, das innerhalb des Steuerelements gezeichnet wird. |
ui | Objekt | null |
Ein Objekt mit Mitgliedern zum Konfigurieren verschiedener Aspekte der Benutzeroberfläche des Steuerelements.
Zum Angeben der Attribute dieses Objekts können Sie die Objektliteral-Notation verwenden, wie hier gezeigt:
{chartType: 'ScatterChart', chartOptions: {pointSize: 10}} |
ui.chartType | String | „ComboChart“ |
Der Diagrammtyp, der im Steuerelement gezeichnet wurde. Folgende Werte sind möglich: „AreaChart“, „LineChart“, „ComboChart“ oder „ScatterChart“. |
ui.chartOptions | Objekt |
{ 'enableInteractivity': false, 'chartArea': {'height': '100%'}, 'legend': {'position': 'none'}, 'hAxis': {'textPosition': 'in'}, 'vAxis': { 'textPosition': 'none', 'gridlines': {'color': 'none'} } } |
Die Konfigurationsoptionen des im Steuerelement gezeichneten Diagramms.
Ermöglicht die gleiche Konfigurationsebene wie jedes Diagramm im Dashboard und entspricht dem Format, das von ChartWrapper.setOptions() akzeptiert wird.
Sie können zusätzliche Optionen angeben oder die Standardoptionen überschreiben. Die Standardeinstellungen wurden jedoch sorgfältig ausgewählt, um ein optimales Erscheinungsbild zu erreichen. |
ui.chartView | Objekt oder String (serialisiertes Objekt) | null |
Spezifikation der Ansicht, die auf die Datentabelle angewendet werden soll, die zum Zeichnen des Diagramms im Steuerelement verwendet wird. Ermöglicht die gleiche Konfigurationsebene wie jedes Diagramm im Dashboard und entspricht demselben Format, das von ChartWrapper.setView() akzeptiert wird. Wenn keine Angabe erfolgt, wird die Datentabelle selbst zum Zeichnen des Diagramms verwendet.
Beachten Sie, dass die horizontale Achse des gezeichneten Diagramms kontinuierlich sein muss. Geben Sie also |
ui.minRangeSize | number | Datenwertdifferenz als 1 Pixel interpretiert |
Die auswählbare Mindestbereichgröße (range.end - range.start ), angegeben in Datenwerteinheiten. Bei numerischen Achsen ist dies eine Zahl (nicht unbedingt eine Ganzzahl).
Bei einer Datums-, Datums- oder Uhrzeitachse ist es eine Ganzzahl, die die Differenz in Millisekunden angibt.
|
ui.snapToData | boolean | false |
Falls wahr, werden Miniaturansichten an den nächstgelegenen Datenpunkten ausgerichtet.
In diesem Fall sind die Endpunkte des von getState() zurückgegebenen Bereichs Werte in der Datentabelle.
|
Veranstaltungen
Zusätze zu ControlWrapper-Ereignissen:
Name | Beschreibung | Attribute |
---|---|---|
statechange |
Wie für jeden ControlWrapper dokumentiert, hat nur die zusätzliche boolesche Eigenschaft inProgress , die angibt, ob der Status gerade geändert wird (entweder einer der Thumbnails oder der Bereich selbst wird verschoben).
|
inProgress |
DateRangeFilter
Schieberegler mit zwei Werten zur Auswahl von Zeiträumen.
Verschieben Sie den Schieberegler, um die in der Tabelle unten angezeigten Zeilen zu ändern.
Status
Name | Typ | Standard | Beschreibung |
---|---|---|---|
lowValue | number | keine | Der untere Bereich des ausgewählten Bereichs (einschließlich). |
highValue | number | keine | Die höhere Ausdehnung des ausgewählten Bereichs (einschließlich). |
lowThumbAtMinimum | boolean | keine |
Gibt an, ob der untere Daumen des Schiebereglers auf den minimal zulässigen Bereich eingestellt ist. Wenn festgelegt, wird lowValue überschrieben.
|
highThumbAtMaximum | boolean | keine |
Gibt an, ob der höhere Daumen des Schiebereglers auf den maximal zulässigen Bereich verankert ist. Wenn festgelegt, wird highValue überschrieben.
|
Optionen
Name | Typ | Standard | Beschreibung |
---|---|---|---|
filterColumnIndex | number | keine |
Die Spalte der Datentabelle, auf die der Filter angewendet werden soll. Sie müssen entweder diese Option oder filterColumnLabel angeben. Sind beide vorhanden, hat diese Option Vorrang.
Muss auf eine Spalte vom Typ number verweisen.
|
filterColumnLabel | String | keine |
Das Label der Spalte, auf die der Filter angewendet werden soll. Sie müssen entweder diese Option oder filterColumnIndex angeben. Wenn beide vorhanden sind, hat filterColumnIndex Vorrang. Muss auf eine Spalte vom Typ number verweisen.
|
minValue | Datum | Automatisch | Maximal zulässiger Wert für den unteren Bereich. Wenn nicht definiert, wird der Wert aus dem Inhalt der DataTable abgeleitet, die vom Steuerelement verwaltet wird. |
maxValue | Datum | Automatisch | Maximal zulässiger Wert für den größeren Bereich. Wenn nicht definiert, wird der Wert aus dem Inhalt der DataTable abgeleitet, die vom Steuerelement verwaltet wird. |
ui | Objekt | null |
Ein Objekt mit Mitgliedern zum Konfigurieren verschiedener Aspekte der Benutzeroberfläche des Steuerelements.
Zum Angeben der Attribute dieses Objekts können Sie die Objektliteral-Notation verwenden, wie hier gezeigt:
{label: 'Age', labelSeparator: ':'} |
ui.format | Objekt | keine | So stellen Sie das Datum als String dar. Akzeptiert jedes gültige Datumsformat . |
ui.step | String | Tag | Die minimal mögliche Änderung, wenn Sie den Schieberegler ziehen: eine beliebige Zeiteinheit bis "Tag". („Monat“ und „Jahr“ werden noch nicht unterstützt.) |
ui.ticks | number | Automatisch | Die Anzahl der Teilstriche (feste Positionen in der Bereichsleiste), die der Schieberegler einnehmen kann. |
ui.unitIncrement | String | „1“ | Der Wert, der in Einheitenschritten der Bereichserweiterungen erhöht werden soll. Ein Einheitenschritt entspricht der Verwendung der Pfeiltasten, um einen Schieberegler zu bewegen. |
ui.blockIncrement | number | 10 | Der Wert, der für Blockinkremente der Bereichserweiterungen erhöht werden soll. Ein Blockinkrement entspricht der Verwendung der Bild-auf- und Bild-ab-Taste, um die Daumen des Schiebereglers zu bewegen. |
ui.showRangeValues | boolean | true | Gibt an, ob neben dem Schieberegler Beschriftungen angezeigt werden sollen, die die Ausmaße des ausgewählten Bereichs anzeigen. |
ui.orientation | String | 'Horizontal' | Die Ausrichtung des Schiebereglers. 'horizontal' oder 'vertical' . |
ui.label | String | Automatisch | Das Label, das neben dem Schieberegler angezeigt werden soll. Wenn kein Wert angegeben ist, wird das Label der Spalte verwendet, auf die das Steuerelement angewendet wird. |
ui.labelSeparator | String | keine | Ein an das Label angehängter Trennzeichenstring, um das Label visuell vom Schieberegler zu trennen. |
ui.labelStacking | String | 'Horizontal' |
Gibt an, ob das Label über (vertikale Stapelung) oder neben (horizontaler Stapelung) des Schiebereglers angezeigt werden soll. Verwende entweder 'vertical' oder 'horizontal' .
|
ui.cssClass | String | 'google-visualization-controls-rangefilter' | Die CSS-Klasse, die dem Steuerelement für benutzerdefinierte Stile zugewiesen werden soll. |
NumberRangeFilter
Schieberegler mit zwei Werten zur Auswahl numerischer Wertebereiche.
Status
Name | Typ | Standard | Beschreibung |
---|---|---|---|
lowValue | number | keine | Der untere Bereich des ausgewählten Bereichs (einschließlich). |
highValue | number | keine | Die höhere Ausdehnung des ausgewählten Bereichs (einschließlich). |
lowThumbAtMinimum | boolean | keine |
Gibt an, ob der untere Daumen des Schiebereglers auf den minimal zulässigen Bereich eingestellt ist. Wenn festgelegt, wird lowValue überschrieben.
|
highThumbAtMaximum | boolean | keine |
Gibt an, ob der höhere Daumen des Schiebereglers auf den maximal zulässigen Bereich verankert ist. Wenn festgelegt, wird highValue überschrieben.
|
Optionen
Name | Typ | Standard | Beschreibung |
---|---|---|---|
filterColumnIndex | number | keine |
Die Spalte der Datentabelle, auf die der Filter angewendet werden soll. Sie müssen entweder diese Option oder filterColumnLabel angeben. Sind beide vorhanden, hat diese Option Vorrang.
Muss auf eine Spalte vom Typ number verweisen.
|
filterColumnLabel | String | keine |
Das Label der Spalte, auf die der Filter angewendet werden soll. Sie müssen entweder diese Option oder filterColumnIndex angeben. Wenn beide vorhanden sind, hat filterColumnIndex Vorrang. Muss auf eine Spalte vom Typ number verweisen.
|
minValue | number | Automatisch | Maximal zulässiger Wert für den unteren Bereich. Wenn nicht definiert, wird der Wert aus dem Inhalt der DataTable abgeleitet, die vom Steuerelement verwaltet wird. |
maxValue | number | Automatisch | Maximal zulässiger Wert für den größeren Bereich. Wenn nicht definiert, wird der Wert aus dem Inhalt der DataTable abgeleitet, die vom Steuerelement verwaltet wird. |
ui | Objekt | null |
Ein Objekt mit Mitgliedern zum Konfigurieren verschiedener Aspekte der Benutzeroberfläche des Steuerelements.
Zum Angeben der Attribute dieses Objekts können Sie die Objektliteral-Notation verwenden, wie hier gezeigt:
{label: 'Age', labelSeparator: ':'} |
ui.format | Objekt | keine | So stellen Sie die Zahl als String dar. Akzeptiert jedes gültige Zahlenformat . |
ui.step | number | 1, oder wird aus ticks berechnet, falls definiert |
Die minimal mögliche Änderung beim Ziehen des Schiebereglers. |
ui.ticks | number | Automatisch | Die Anzahl der Teilstriche (feste Positionen in der Bereichsleiste), die der Schieberegler einnehmen kann. |
ui.unitIncrement | number | 1 | Der Wert, der in Einheitenschritten der Bereichserweiterungen erhöht werden soll. Ein Einheitenschritt entspricht der Verwendung der Pfeiltasten, um einen Schieberegler zu bewegen. |
ui.blockIncrement | number | 10 | Der Wert, der für Blockinkremente der Bereichserweiterungen erhöht werden soll. Ein Blockinkrement entspricht der Verwendung der Bild-auf- und Bild-ab-Taste, um die Daumen des Schiebereglers zu bewegen. |
ui.showRangeValues | boolean | true | Gibt an, ob neben dem Schieberegler Beschriftungen angezeigt werden sollen, die die Ausmaße des ausgewählten Bereichs anzeigen. |
ui.orientation | String | 'Horizontal' | Die Ausrichtung des Schiebereglers. 'horizontal' oder 'vertical' . |
ui.label | String | Automatisch | Das Label, das neben dem Schieberegler angezeigt werden soll. Wenn kein Wert angegeben ist, wird das Label der Spalte verwendet, auf die das Steuerelement angewendet wird. |
ui.labelSeparator | String | keine | Ein an das Label angehängter Trennzeichenstring, um das Label visuell vom Schieberegler zu trennen. |
ui.labelStacking | String | 'Horizontal' |
Gibt an, ob das Label über (vertikale Stapelung) oder neben (horizontaler Stapelung) des Schiebereglers angezeigt werden soll. Verwende entweder 'vertical' oder 'horizontal' .
|
ui.cssClass | String | 'google-visualization-controls-rangefilter' | Die CSS-Klasse, die dem Steuerelement für benutzerdefinierte Stile zugewiesen werden soll. |
StringFilter
Ein einfaches Texteingabefeld, mit dem Sie Daten über den Stringabgleich filtern können. Sie wird nach jedem Tastendruck aktualisiert: Geben Sie j
ein, um die Tabelle auf John und Jessica einzuschränken.
Status
Name | Typ | Standard | Beschreibung |
---|---|---|---|
value | String oder Objekt | keine | Der Text, der aktuell in das Steuereingabefeld eingegeben wird. |
Optionen
Name | Typ | Standard | Beschreibung |
---|---|---|---|
filterColumnIndex | number | keine |
Die Spalte der Datentabelle, auf die der Filter angewendet werden soll. Sie müssen entweder diese Option oder filterColumnLabel angeben. Sind beide vorhanden, hat diese Option Vorrang.
|
filterColumnLabel | String | keine |
Das Label der Spalte, auf die der Filter angewendet werden soll. Sie müssen entweder diese Option oder filterColumnIndex angeben. Wenn beide vorhanden sind, hat filterColumnIndex Vorrang.
|
matchType | String | „Präfix“ |
Gibt an, ob das Steuerelement nur mit genauen Werten ('exact' ), Präfixen, die am Anfang des Werts beginnen ('prefix' ) oder mit einem Teilstring ('any' ) übereinstimmen sollen,
|
caseSensitive | boolean | false | Gibt an, ob beim Abgleich zwischen Groß- und Kleinschreibung unterschieden werden soll. |
useFormattedValue | boolean | false | Gibt an, ob das Steuerelement mit zellen formatierten Werten oder mit tatsächlichen Werten abgleichen soll. |
ui | Objekt | null |
Ein Objekt mit Mitgliedern zum Konfigurieren verschiedener Aspekte der Benutzeroberfläche des Steuerelements.
Zum Angeben der Attribute dieses Objekts können Sie die Objektliteral-Notation verwenden, wie hier gezeigt:
{label: 'Name', labelSeparator: ':'} |
ui.realtimeTrigger | boolean | true | Gibt an, ob das Steuerelement bei jedem Drücken einer Taste oder nur dann übereinstimmen soll, wenn sich das Eingabefeld „ändert“ (Fokusverlust oder Drücken der Eingabetaste). |
ui.label | String | Automatisch | Das Label, das neben dem Eingabefeld angezeigt wird. Wenn kein Wert angegeben ist, wird das Label der Spalte verwendet, auf die das Steuerelement angewendet wird. |
ui.labelSeparator | String | keine | Ein an das Label angehängter Trennzeichenstring, um das Label visuell vom Eingabefeld zu trennen. |
ui.labelStacking | String | 'Horizontal' |
Gibt an, ob das Label über (vertikale Stapelung) oder neben (horizontale Stapelung)
dem Eingabefeld angezeigt werden soll. Verwende entweder 'vertical' oder 'horizontal' .
|
ui.cssClass | String | 'google-visualization-controls-stringfilter' | Die CSS-Klasse, die dem Steuerelement für benutzerdefinierte Stile zugewiesen werden soll. |