Übersicht
Dashboards sind eine einfache Möglichkeit, mehrere Diagramme mit denselben zugrunde liegenden Daten zu organisieren und zu verwalten. Wenn Sie die auf dieser Seite beschriebenen APIs verwenden, müssen Sie sich nicht mehr um die Verkabelung kümmern und alle Diagramme, die Teil eines Dashboards sind, koordinieren.
Dashboards werden mithilfe von google.visualization.Dashboard
-Klassen definiert.
Dashboard
-Instanzen erhalten eine DataTable
mit den Daten, um sie zu visualisieren und auf alle Diagramme im Dashboard zu verteilen.
Steuerelemente sind Widgets für die Benutzeroberfläche wie 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 Rohrleitungssystem verhalten. Sie erheben Nutzereingaben und verwenden die Informationen, um zu entscheiden, welche Daten, die im Dashboard verwaltet werden, für die entsprechenden Diagramme verfügbar gemacht werden sollen.
Sehen Sie sich das folgende Beispiel an, in dem eine Kategorieauswahl und ein Bereichsschieberegler verwendet werden, um die Daten durch ein Kreisdiagramm darzustellen.
Hinweis: Das Dashboard ist interaktiv. Versuchen Sie, die Steuerelemente auszuführen, um zu sehen, wie sich das Diagramm in Echtzeit ändert.
Steuerelemente und Dashboards verwenden
Hier sind die wichtigsten Schritte zum Erstellen eines Dashboards und Einbetten in Ihre Seite. Im Folgenden finden Sie ein Code-Snippet, das alle diese Schritte veranschaulicht, gefolgt von detaillierten Informationen zu jedem Schritt.
- Erstellen Sie ein HTML-Skelett 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 sowie alle zugehörigen Steuerelemente und Diagramme. In der Regel verwenden Sie dabei für alle <div>-Tags.
-
Bibliotheken laden Ein Dashboard erfordert nur zwei Bibliotheken auf der Seite: die Google AJAX API und das
controls
-Paket für die Google-Visualisierung. - Daten vorbereiten Sie müssen die Daten zur Visualisierung vorbereiten. Dazu müssen Sie die Daten entweder selbst im Code angeben oder auf einer Remote-Website nach Daten fragen.
- Dashboard-Instanz erstellen Instanziieren Sie das Dashboard, indem Sie den Konstruktor aufrufen und einen Verweis auf das <div>-Element übergeben, das es enthält.
-
Sie können beliebig viele Steuerelemente und Diagramminstanzen erstellen.
Erstellen Sie
google.visualization.ChartWrapper
- undgoogle.visualization.ControlWrapper
-Instanzen, um jedes Diagramm zu beschreiben und zu steuern, was im Dashboard verwaltet wird. -
Abhängigkeiten erstellen: Rufen Sie
bind()
in Ihrem Dashboard auf und übergeben Sie die Steuer- und Diagramminstanzen, damit das Dashboard weiß, was verwaltet werden soll. Sobald ein Steuerelement und ein Diagramm miteinander verbunden sind, aktualisiert das Dashboard das Diagramm, um die Einschränkungen zu erfüllen, die das Steuerelement für die Daten durchsetzt. -
Dashboard zeichnen Rufen Sie
draw()
in Ihrem 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 anfänglichen Zeichnung die Steuerelemente programmatisch steuern, die Teil des Dashboards sind. Das Diagramm kann dann entsprechend angepasst werden.
Hier siehst du 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 siehst du das von diesem Code erstellte Dashboard.
1. HTML-Skelett für das Dashboard erstellen
Die Seite muss so viele HTML-Elemente enthalten (normalerweise <div>-Elemente), dass sowohl das Dashboard selbst als auch alle Steuerelemente und Diagramme darin enthalten sind. Wenn Sie Dashboard-, Steuerelement- und Diagramminstanzen instanziieren, müssen Sie einen Verweis auf ihr Element ü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 beliebig positionieren.
2. Bibliotheken laden
Ein Dashboard benötigt nur zwei Bibliotheken, die auf der Seite eingefügt oder geladen werden müssen: 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 Gauge-Diagramm verwenden) und lädt sie ohne Eingreifen sofort.
Zum Abrufen der Kontrollbibliothek 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
Nachdem die Visualization API geladen wurde, ruft google.charts.setOnLoadCallback()
Ihre Handler-Funktion auf, sodass Sie wissen, dass alle erforderlichen Hilfsmethoden und -klassen bereit sind, um mit der Vorbereitung Ihrer Daten zu beginnen.
Dashboards akzeptiert Daten in einer DataTable, genau wie Diagramme.
4. Dashboard-Instanz 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 dem das Dashboard gezeichnet werden soll.
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
Dashboards werden als JavaScript-Klasse bereitgestellt. Nach der Instanziierung Ihres Dashboards können Sie einige optionale Schritte ausführen und z. B. Ereignis-Listener hinzufügen (z. B. werden Sie benachrichtigt, sobald das Dashboard bereit ist). Dashboards verarbeiten Ereignisse auf dieselbe Weise wie Diagramme. Weitere Informationen finden Sie unter Visualisierungsereignisse verarbeiten oder Fehler gut anzeigen im Diagrammabschnitt.
5. Kontroll- und Diagramminstanzen erstellen
Definieren Sie so viele Instanzen, wie Sie für jedes Steuerelement und Diagramm benötigen, das im Dashboard enthalten ist.
Mit
google.visualization.ChartWrapper
und
google.visualization.ControlWrapper
können Sie Diagramme und Steuerelemente 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 Instanzen vom Typ ChartWrapper
und ControlWrapper
weder den Parameter dataTable
noch den Parameter dataSourceUrl
an. Das Dashboard übernimmt dann jedes einzelne Feeds mit den entsprechenden Daten. Achten Sie jedoch darauf, die erforderlichen Parameter anzugeben: chartType
und containerId
für Diagramme, controlType
und containerId
für Steuerelemente.
Hier einige Tipps zum Konfigurieren von Steuerelementen und Diagrammen:
-
Sie müssen alle Steuerelemente mit
filterColumnIndex
(oderfilterColumnLabel
) versehen, um festzulegen, in welcher Spalte vongoogle.visualization.DataTable
das Steuerelement angewendet wird (im Beispiel oben gilt das Steuerelement in der Spalte Donuts eat). -
Verwenden Sie die Konfigurationsoption
state
für Steuerelemente, um sie beim Zeichnen explizit zu initialisieren. Verwenden Sie diese Einstellung beispielsweise, um die Anfangspositionen der Daumen einer Bereichsschiebereglerfunktion zu korrigieren.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 dataTable, die Sie im Schritt Daten vorbereiten vorbereitet haben. In Diagrammen ist jedoch häufig eine bestimmte Anordnung von Spalten erforderlich, damit ein Kreisdiagramm beispielsweise eine Stringspalte für das Label gefolgt von einer Zahlenspalte für den Wert erfordert.
Verwenden Sie die Option
view
, während Sie jedeChartWrapper
-Instanz konfigurieren, um wie im folgenden Beispiel anzugeben, welche Spalten für das Diagramm relevant sind.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 festlegen
Sobald 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 zu informieren, die zwischen Steuerelementen und Diagrammen bestehen.
Sobald ein Steuerelement und das Diagramm miteinander verbunden sind, aktualisiert das Dashboard das Diagramm so, dass es den Einschränkungen entspricht, die das Steuerelement für die Daten durchsetzt. Im Beispiel-Dashboard, das Sie erstellen, sind der Bereichsschieberegler und das Kreisdiagramm miteinander verbunden. Wenn Sie also mit Ersterem interagieren, wird Letzteres aktualisiert, um nur die Daten anzuzeigen, 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 n: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 kann ein Steuerelement mehrere Diagramme gleichzeitig steuern. Wenn Sie mehrere Bindungen gleichzeitig angeben möchten, übergeben Sie Arrays anstelle 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 Nutzung können Sie Steuerelemente auch an andere Kontrollen binden, um Abhängigkeiten von zu erstellen.
dashboard.bind(countryPicker, regionPicker).bind(regionPicker, cityPicker);
7. Dashboard zeichnen
Rufen Sie die Methode draw()
auf der Dashboard-Instanz auf, um das gesamte Dashboard zu rendern.
Die Methode draw()
verwendet nur einen Parameter: DataTable
(oder DataView
), der das Dashboard unterstützt.
Sie sollten draw()
immer aufrufen, wenn Sie die Zusammensetzung des Dashboards ändern (z. B. durch Hinzufügen neuer Steuerelemente oder Diagramme) oder wenn Sie die DataTable
insgesamt ändern.
Die Dashboard-Instanz löst immer dann ein ready
-Ereignis aus, wenn draw()
alle zugehörigen Steuerelemente und Diagramme zeichnet. Ein error
-Ereignis wird ausgelöst, wenn eine der verwalteten Steuerelemente oder das Diagramm nicht zeichnet. Weitere Informationen zum Verarbeiten von Ereignissen finden Sie unter Ereignisse verarbeiten.
Hinweis:Sie sollten auf das Ereignis ready
warten, bevor Sie versuchen, die Dashboard-Zusammensetzung zu ändern oder es noch einmal zu zeichnen.
8. Programmatische Änderungen nach der Darstellung
Sobald das Dashboard die erste draw()
abgeschlossen hat, ist es live und reagiert automatisch auf jede Aktion, die Sie darauf ausführen (z. B. die Änderung des ausgewählten Bereichs eines Steuerelement-Schiebereglers im Dashboard).
Wenn Sie den Dashboard-Status programmatisch ändern müssen, können Sie dies direkt auf den zugehörigen ControlWrapper
- und ChartWrapper
-Instanzen tun.
Als Faustregel gilt, dass Sie alle erforderlichen Änderungen direkt an der jeweiligen ControlWrapper
- oder ChartWrapper
-Instanz vornehmen. Sie können z. B. eine Steueroption oder einen Status über setOption()
bzw. setState()
ändern und anschließend die Methode draw()
aufrufen. Das Dashboard wird dann aktualisiert und an die angeforderten Änderungen angepasst.
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 werden die von der Controls and Dashboards API bereitgestellten Objekte und die von allen Steuerelementen bereitgestellten Standardmethoden aufgeführt.
Dashboard
Eine Sammlung von Steuerelementen und Diagrammen für die Zusammenarbeit, die auf denselben zugrunde liegenden Daten basieren.
Konstruktor
Dashboard(containerRef)
- containerRef
- Ein Verweis auf ein gültiges Containerelement auf der Seite, das den Dashboard-Inhalt enthält.
Methoden
Im Dashboard sind die folgenden Methoden verfügbar:
Methode | Rückgabetyp | Beschreibung |
---|---|---|
bind(controls, charts) |
google.visualization.dashboard |
Bindet eine oder mehrere Steuerelemente an einen oder mehrere andere Dashboard-Teilnehmer (entweder Diagramme oder andere Steuerelemente), sodass alle letzteren neu gezeichnet werden, wenn eine der programmatischen oder Nutzerinteraktionen die Daten betrifft, die vom Dashboard verwaltet werden. Gibt die Dashboard-Instanz selbst zurück, um mehrere
|
draw(dataTable) |
– | Zeichnet das Dashboard.
|
getSelection() |
Objekt-Array |
Gibt ein Array der ausgewählten visuellen Entitäten der Diagramme im Dashboard zurück. Wenn die Methode Hinweis:Ereignis-Listener für das ausgewählte Ereignis müssen weiterhin an jedes Diagramm angehängt werden, das Sie beobachten möchten. |
Events
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 Rendern des Dashboards ein Fehler auftritt Mindestens eine der Steuerelemente und Diagramme, die Teil des Dashboards sind, konnte möglicherweise nicht gerendert werden. | ID, Nachricht |
ready |
Das Dashboard ist fertig und bereit zum Akzeptieren von Änderungen. Alle Steuerelemente und Diagramme, die Teil des Dashboards sind, sind für externe Methodenaufrufe und Nutzerinteraktionen bereit. Wenn Sie das Dashboard oder die darin angezeigten Daten ändern möchten, sollten Sie einen Listener für dieses Ereignis einrichten, bevor Sie die Methode Das
|
– |
Kontroll-Wrapper
Ein ControlWrapper-Objekt ist ein Wrapper um eine JSON-Darstellung einer konfigurierten Steuerinstanz. Die Klasse enthält Convenience-Methoden zum Definieren eines Dashboard-Steuerelements, zum Zeichnen des Elements und zum programmatischen Ändern des Status.
Konstruktor
ControlWrapper(opt_spec)
- opt_spec
- [optional] – entweder ein JSON-Objekt, in dem das Steuerelement definiert ist, oder eine serialisierte Stringversion dieses Objekts. Die unterstützten Eigenschaften des JSON-Objekts sind in der folgenden Tabelle aufgeführt. Wenn keine Angabe erfolgt, müssen Sie alle entsprechenden Attribute mithilfe der von ControlWrapper bereitgestellten set...-Methoden festlegen.
Attribut | Typ | Erforderlich | Standard | Beschreibung |
---|---|---|---|---|
Kontrolltyp | 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 der das Steuerelement gehostet wird. |
Optionen | Objekt | Optional | keine |
Ein Objekt, das die Optionen für das Steuerelement beschreibt. Sie können entweder die JavaScript-Literalschreibweise verwenden oder einen Handle für das Objekt angeben. Beispiel:
"options": {"filterColumnLabel": "Age",
"minValue": 10, "maxValue": 80}
|
Bundesland | 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 ausführt. Beispielsweise kann ein Bereichsschieberegler in Bezug auf die Positionen beschrieben werden, die der untere und hohe Daumen des Schiebereglers einnehmen. Sie können entweder die Literalschreibweise für JavaScript oder ein Handle für das Objekt verwenden.Beispiel: "state": {"lowValue": 20, "highValue": 50}
|
Methoden
ControlWrapper stellt die folgenden zusätzlichen Methoden zur Verfügung:
Methode | Rückgabetyp | Beschreibung |
---|---|---|
draw() |
– |
Zeichnen Sie das Steuerelement. Normalerweise wird das Dashboard mit dem Steuerelement automatisch gezeichnet.
Sie sollten |
toJSON() |
String | Gibt eine Stringversion der JSON-Darstellung des Steuerelements zurück. |
clone() |
Kontrollverpackung | Gibt eine tiefe Kopie des Kontroll-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. Wenn dies beispielsweise eine CategoryFilter-Steuerung wäre, würde die Kategorie „CategoryFilter“ und nicht „google.visualization.CategoryFilter“ zurückgegeben werden.
|
getControlName() |
String | Gibt den von setControlName() zugewiesenen Steuernamen zurück. |
getControl() |
Objektreferenz steuern |
Gibt einen Verweis auf das von diesem ControlWrapper erstellte Steuerelement zurück. Die Funktion gibt nach dem Aufrufen von draw() für das ControlWrapper-Objekt (oder für das Dashboard, das es enthält) null zurück und löst ein Ready-Ereignis aus. Das zurückgegebene Objekt gibt nur eine Methode frei: resetControl() . Damit wird der Steuerstatus auf den Status zurückgesetzt, mit dem er initialisiert wurde, z. B. das Zurücksetzen eines HTML-Formularelements.
|
getContainerId() |
String | Die ID des DOM-Containerelements des Steuerelements. |
getOption(key, opt_default_val) |
Alle Typen | Gibt den angegebenen Wert der Steuerelementoption zurück
|
getOptions() |
Objekt | Gibt das Optionsobjekt für dieses Steuerelement zurück. |
getState() |
Objekt | Gibt den Steuerstatus zurück. |
setControlType(type) |
– |
Legt den Steuerelementtyp fest. Übergeben Sie den Klassennamen des zu instanziierenden Steuerelements. Wenn dies eine Google-Kontrolle ist, qualifizieren Sie sie nicht mit google.visualization .
Übergeben Sie beispielsweise für einen Bereichsschieberegler über einer numerischen Spalte „NumberRangeFilter“.
|
setControlName(name) |
– | Legt einen beliebigen Namen für das Steuerelement fest. Er wird nirgendwo im Steuerelement angezeigt, sondern nur zu Referenzzwecken. |
setContainerId(id) |
– | Legt die ID des beinhaltenden DOM-Elements für das Steuerelement fest. |
setOption(key, value) |
– |
Legt einen Wert für eine einzelne Steuerelementoption fest, wobei key für den Optionsnamen und value für den Wert steht. Übergeben Sie als Wert null, um die Festlegung einer Option aufzuheben. Beachten Sie, dass key ein qualifizierter Name sein kann, z. B. 'vAxis.title' .
|
setOptions(options_obj) |
– | Legt ein vollständiges Optionsobjekt für ein Steuerelement fest. |
setState(state_obj) |
– | Legt den Steuerstatus fest. Der Status erfasst alle Variablen, auf die sich der Nutzer auswirken kann. Beispielsweise kann der Status eines Bereichsschiebereglers in Bezug auf die Positionen beschrieben werden, die der untere und hohe Daumen des Schiebereglers einnehmen. |
Events
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 Rendern des Steuerelements ein Fehler auftritt | ID, Nachricht |
ready |
Das Steuerelement ist für Nutzerinteraktionen und für externe Methodenaufrufe bereit. Wenn Sie nach dem Zeichnen mit dem Steuerelement und Aufrufmethoden interagieren möchten, sollten Sie einen Listener für dieses Ereignis einrichten, bevor Sie die Methode draw aufrufen. Sie sollten sie erst aufrufen, nachdem das Ereignis ausgelöst wurde. Alternativ können Sie ein ready -Ereignis im Dashboard beobachten, das die Steuerungs- und Aufrufsteuerungsmethoden enthält, nachdem das Ereignis ausgelöst wurde.
|
– |
statechange |
Wird ausgelöst, wenn der Nutzer mit dem Steuerelement interagiert. Dies wirkt sich auf seinen Status aus. Das Ereignis statechange wird beispielsweise immer dann ausgelöst, wenn Sie die Daumen eines Bereichsschiebereglers verschieben. Rufen Sie ControlWrapper.getState() auf, um nach dem Auslösen des Ereignisses einen aktualisierten Steuerstatus abzurufen.
|
– |
ChartWrapper (Diagramm)
Weitere Informationen finden Sie in der google.visualization.ChartWrapper
-Dokumentation im API-Referenzabschnitt der Visualisierung.
Die folgenden Hinweise gelten, wenn ein ChartWrapper
als Teil eines Dashboards verwendet wird:
-
Legen Sie die Attribute
dataTable
,query
,dataSourceUrl
undrefreshInterval
nicht explizit fest. Das Dashboard mit dem Diagramm übernimmt die Daten, die es benötigt. -
Setze das Attribut
view
so, dass es deklariert, welche von allen im Dashboard angegebenendataTable
-Spalten für das Diagramm relevant sind, wie unter Steuer- und Diagramminstanzen erstellen beschrieben.
Steuerungsgalerie
Filter sind grafische Elemente, mit denen Nutzer interaktiv auswählen können, welche Daten im Diagramm angezeigt werden. In diesem Abschnitt werden die Google Chart-Filter beschrieben: CategoryFilter, ChartRangeFilter, DateRangeFilter, NumberRangeFilter und StringFilter.
Sie können alle davon als Parameter für ControlWrapper.setControlType()
verwenden.
Hinweis: Bei der Beschreibung von Optionen wird die Punktnotation verwendet, um verschachtelte Objektattribute zu beschreiben. Beispielsweise sollte eine Option mit dem Namen 'ui.label'
in einem Optionsobjekt als var options = {"ui": {"label": "someLabelValue"} };
deklariert werden
Kategoriefilter
Auswahl zum Auswählen eines oder mehrerer Werte aus einer Reihe von definierten Werten.
Status
Name | Typ | Standard | Beschreibung |
---|---|---|---|
ausgewählte Werte | Array von Objekten oder primitiven Typen | keine |
Die aktuell ausgewählten Werte. Die ausgewählten Werte müssen aus einer Reihe von auswählbaren Werten bestehen, die mit der Option values definiert werden. Alle überflüssigen Werte werden ignoriert. Wenn CategoryFilter keine Mehrfachauswahl zulässt, wird nur der erste Wert des Arrays beibehalten.
|
Optionen
Name | Typ | Standard | Beschreibung |
---|---|---|---|
filterColumnIndex | Zahl | keine |
Die Spalte der Datentabelle, auf die der Filter angewendet werden soll. Sie müssen entweder diese Option oder filterColumnLabel angeben. Wenn beide vorhanden sind, 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 der verfügbaren Werte. Wenn ein Array von Objekten verwendet wird, sollte es dem Nutzer eine geeignete toString() -Darstellung zur Anzeige enthalten. Wenn er null oder nicht definiert ist, wird die Liste der Werte automatisch aus den Werten berechnet, die in der Spalte „DataTable“ enthalten sind, für die dieses Steuerelement gilt.
|
useFormattedValue (Verwendung formatierter Wert) | boolean | false | Wenn die Liste der auswählbaren Werte automatisch aus der Spalte „DataTable“ ausgefüllt wird, werden die tatsächlichen Zellenwerte oder formatierten Werte verwendet. |
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 Objektliteralschreibweise verwenden, wie hier gezeigt:
{label: 'Metric', labelSeparator: ':'} |
UI.caption | String | „Wert auswählen...“ | Der Untertitel, der im Widget für die Wertauswahl angezeigt wird, wenn kein Element ausgewählt ist. |
UI-Werte | boolean | true | Gibt an, ob die Werte ausgewählt werden sollen. |
ui.selectedValuesLayout | String | „aside“ | Die Anzeige ausgewählter Werte, wenn eine Mehrfachauswahl zulässig ist. Folgende Werte sind möglich:
|
ui.allowNone | boolean | true |
Gibt an, ob der Nutzer keinen Wert auswählen darf. Wenn false , muss der Nutzer mindestens einen der verfügbaren Werte auswählen. Wenn die Option während der Initialisierung der Steuerung auf false gesetzt und kein selectedValues -Status angegeben ist, wird der erste Wert aus den verfügbaren Verfügbarkeitsangaben automatisch ausgewählt.
|
UI.allowMultiple | boolean | true | Gibt an, ob mehrere Werte ausgewählt werden können. |
UI.allowTyping | boolean | true | Gibt an, ob der Nutzer Text in ein Textfeld eingeben darf, um die Liste der möglichen Optionen (über die automatische Vervollständigung) einzugrenzen. |
UI-Label | String | Automatisch | Das Label, das neben der Kategorieauswahl angezeigt werden soll. Wenn nicht angegeben, wird das Label der Spalte verwendet, für die das Steuerelement gilt. |
UI-LabelSeparator | String | keine | Ein an das Label angehängter Trennzeichenstring, um das Label visuell von der Kategorieauswahl zu trennen. |
UI-Labeling | String | „horizontal“ |
Gibt an, ob das Label über der Kategorieauswahl (vertikaler Stapelung) oder neben (horizontaler Stapelung) angezeigt werden soll. Verwenden Sie 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 überlagernden Fingern, um einen Wertebereich aus der kontinuierlichen Achse des Diagramms auszuwählen.
Status
Name | Typ | Standard | Beschreibung |
---|---|---|---|
Bereich.Start | Zahl, Datum, Datum und Uhrzeit | Startwert des Bereichs | Der Anfang des ausgewählten Bereichs. |
Bereich.Ende | Zahl, Datum, Datum und Uhrzeit | Bereich – Endwert | Das Ende des ausgewählten Bereichs. |
Optionen
Name | Typ | Standard | Beschreibung |
---|---|---|---|
filterColumnIndex | Zahl | 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.
Beachten Sie, dass es nur sinnvoll ist, einen Index einer domain-Spalte anzugeben, die auf der kontinuierlichen Achse des im Diagramm gezeichneten Diagramms dargestellt wird. |
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.
Beachten Sie, dass es nur sinnvoll ist, ein Label einer domain-Spalte anzugeben, die auf der kontinuierlichen Achse des im Diagramm gezeichneten Diagramms dargestellt 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 Objektliteralschreibweise verwenden, wie hier gezeigt:
{chartType: 'ScatterChart', chartOptions: {pointSize: 10}} |
UI-Diagrammtyp | String | „ComboChart“ |
Der Diagrammtyp, der im Steuerelement eingezeichnet ist. Mögliche Werte sind „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 Diagramms, die im Steuerelement gezeichnet sind.
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. |
UI-Diagramm | Objekt oder String (serialisiertes Objekt) | null |
Angabe der Ansicht, die auf die Datentabelle angewendet werden soll, mit der das Diagramm im Steuerelement gezeichnet wird. Ermöglicht die gleiche Konfigurationsebene wie jedes Diagramm im Dashboard und hat dasselbe Format, das von ChartWrapper.setView() akzeptiert wird. Wenn nicht angegeben, wird die Diagrammtabelle selbst zum Zeichnen des Diagramms verwendet.
Die horizontale Achse des gezeichneten Diagramms muss kontinuierlich sein. Achten Sie daher darauf, |
ui.minRangeGröße | Zahl | Differenz beim Datenwert wird als ein Pixel interpretiert |
Der mindestens auswählbare Bereichsgröße (range.end - range.start ), angegeben in Datenwerteinheiten. Bei einer numerischen Achse 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-Daten | boolean | false |
Bei „true“ werden Bereichs-Thumbnails an die nächstgelegenen Datenpunkte ausgerichtet.
In diesem Fall sind die Endpunkte des von getState() zurückgegebenen Bereichs zwangsläufig Werte in der Datentabelle.
|
Events
Ergänzungen für ControlWrapper-Ereignisse:
Name | Beschreibung | Attribute |
---|---|---|
statechange |
Wie für jeden ControlWrapper dokumentiert, hat es nur die zusätzliche boolesche Eigenschaft inProgress , die angibt, ob sich der Status gerade ändert (entweder einer der Daumen oder dem Bereich selbst gezogen wird).
|
In Bearbeitung |
Zeitraumfilter
Ein Schieberegler mit zwei Werten zum Auswählen von Zeiträumen.
Bewegen Sie den Schieberegler, um die in der Tabelle unten angezeigten Zeilen zu ändern.
Status
Name | Typ | Standard | Beschreibung |
---|---|---|---|
niedriger Wert | Zahl | keine | Der untere Bereich des ausgewählten Bereichs. |
hoher Wert | Zahl | keine | Der größere Bereich des ausgewählten Bereichs. |
LowThumbAtMinimum | boolean | keine |
Gibt an, ob der untere Daumen des Schiebereglers im minimalen zulässigen Bereich gesperrt ist. Wenn festgelegt, wird lowValue überschrieben.
|
highThumbAtMaximum | boolean | keine |
Gibt an, ob der obere Daumen des Schiebereglers im maximal zulässigen Bereich gesperrt ist. Wenn festgelegt, wird highValue überschrieben.
|
Optionen
Name | Typ | Standard | Beschreibung |
---|---|---|---|
filterColumnIndex | Zahl | keine |
Die Spalte der Datentabelle, auf die der Filter angewendet werden soll. Sie müssen entweder diese Option oder filterColumnLabel angeben. Wenn beide vorhanden sind, 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 | Minimaler zulässiger Wert für den unteren Bereich. Wenn nicht definiert, wird der Wert aus dem Inhalt der vom Steuer verwalteten DataTable abgeleitet. |
maxValue | Datum | Automatisch | Maximal zulässiger Wert für den Bereich. Wenn nicht definiert, wird der Wert aus dem Inhalt der vom Steuer verwalteten DataTable abgeleitet. |
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 Objektliteralschreibweise verwenden, wie hier gezeigt:
{label: 'Age', labelSeparator: ':'} |
UI-Format | Objekt | keine | So wird das Datum als String dargestellt. Akzeptiert jedes gültige Datumsformat. |
UI.Schritt | String | Tag | Die geringstmögliche Änderung beim Ziehen des Schiebereglers: es kann eine beliebige Zeiteinheit bis „Tag“ sein. „Monat“ und „Jahr“ werden noch nicht unterstützt. |
ui.ticks | Zahl | Automatisch | Die Anzahl der Teilstriche (feste Positionen in der Bereichsleiste), die der Schieberegler mit den Werkzeugen belegen kann. |
UI-Einheit: UI | String | „1“ | Betrag, der für Einheiteninkremente der Bereichsausmaße erhöht werden soll. Das Einheiteninkrement entspricht der Verwendung der Pfeiltasten, um einen Schieberegler zu bewegen. |
UI-Blockierung | Zahl | 10 | Betrag, der für Blockinkremente der Bereichsausmaße erhöht werden soll. Ein Blockinkrement entspricht der Verwendung der Tasten „pgUp“ und „pgDown“ zum Bewegen der Schieberegler. |
ui.showRangeValues | boolean | true | Gibt an, ob neben dem Schieberegler Labels angezeigt werden sollen, die die Ausdehnung des ausgewählten Bereichs anzeigen. |
UI.Ausrichtung | String | „horizontal“ | Die Ausrichtung des Schiebereglers. 'horizontal' oder 'vertical' . |
UI-Label | String | Automatisch | Das Label, das neben dem Schieberegler angezeigt wird. Wenn nicht angegeben, wird das Label der Spalte verwendet, mit der das Steuerelement arbeitet. |
UI-LabelSeparator | String | keine | Ein Trennzeichenstring, der an das Label angehängt wird, um das Label vom Schieberegler zu trennen. |
UI-Labeling | String | „horizontal“ |
Gibt an, ob das Label über (vertikale Stapelung) oder neben (horizontaler Stapelung) des Schiebereglers angezeigt werden soll. Verwenden Sie entweder 'vertical' oder 'horizontal' .
|
UI.cssClass | String | „google-visualization-controls-rangefilter“ | Die CSS-Klasse, die dem Steuerelement für benutzerdefinierte Stile zugewiesen werden soll. |
Zahlenbereich-Filter
Ein Schieberegler mit zwei Werten zum Auswählen von Bereichen mit numerischen Werten.
Status
Name | Typ | Standard | Beschreibung |
---|---|---|---|
niedriger Wert | Zahl | keine | Der untere Bereich des ausgewählten Bereichs. |
hoher Wert | Zahl | keine | Der größere Bereich des ausgewählten Bereichs. |
LowThumbAtMinimum | boolean | keine |
Gibt an, ob der untere Daumen des Schiebereglers im minimalen zulässigen Bereich gesperrt ist. Wenn festgelegt, wird lowValue überschrieben.
|
highThumbAtMaximum | boolean | keine |
Gibt an, ob der obere Daumen des Schiebereglers im maximal zulässigen Bereich gesperrt ist. Wenn festgelegt, wird highValue überschrieben.
|
Optionen
Name | Typ | Standard | Beschreibung |
---|---|---|---|
filterColumnIndex | Zahl | keine |
Die Spalte der Datentabelle, auf die der Filter angewendet werden soll. Sie müssen entweder diese Option oder filterColumnLabel angeben. Wenn beide vorhanden sind, 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 | Zahl | Automatisch | Minimaler zulässiger Wert für den unteren Bereich. Wenn nicht definiert, wird der Wert aus dem Inhalt der vom Steuer verwalteten DataTable abgeleitet. |
maxValue | Zahl | Automatisch | Maximal zulässiger Wert für den Bereich. Wenn nicht definiert, wird der Wert aus dem Inhalt der vom Steuer verwalteten DataTable abgeleitet. |
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 Objektliteralschreibweise verwenden, wie hier gezeigt:
{label: 'Age', labelSeparator: ':'} |
UI-Format | Objekt | keine | So wird die Zahl als String dargestellt. Akzeptiert jedes gültige Zahlenformat. |
UI.Schritt | Zahl | 1 oder berechnet aus ticks , falls definiert |
Die geringstmögliche Änderung beim Ziehen des Schiebereglers. |
ui.ticks | Zahl | Automatisch | Die Anzahl der Teilstriche (feste Positionen in der Bereichsleiste), die der Schieberegler mit den Werkzeugen belegen kann. |
UI-Einheit: UI | Zahl | 1 | Betrag, der für Einheiteninkremente der Bereichsausmaße erhöht werden soll. Das Einheiteninkrement entspricht der Verwendung der Pfeiltasten, um einen Schieberegler zu bewegen. |
UI-Blockierung | Zahl | 10 | Betrag, der für Blockinkremente der Bereichsausmaße erhöht werden soll. Ein Blockinkrement entspricht der Verwendung der Tasten „pgUp“ und „pgDown“ zum Bewegen der Schieberegler. |
ui.showRangeValues | boolean | true | Gibt an, ob neben dem Schieberegler Labels angezeigt werden sollen, die die Ausdehnung des ausgewählten Bereichs anzeigen. |
UI.Ausrichtung | String | „horizontal“ | Die Ausrichtung des Schiebereglers. 'horizontal' oder 'vertical' . |
UI-Label | String | Automatisch | Das Label, das neben dem Schieberegler angezeigt wird. Wenn nicht angegeben, wird das Label der Spalte verwendet, mit der das Steuerelement arbeitet. |
UI-LabelSeparator | String | keine | Ein Trennzeichenstring, der an das Label angehängt wird, um das Label vom Schieberegler zu trennen. |
UI-Labeling | String | „horizontal“ |
Gibt an, ob das Label über (vertikale Stapelung) oder neben (horizontaler Stapelung) des Schiebereglers angezeigt werden soll. Verwenden Sie 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 per Stringabgleich filtern können. Sie wird nach jedem Tastendruck aktualisiert: Geben Sie j
ein, um die Tabelle unten auf Max und Jessica einzugrenzen.
Status
Name | Typ | Standard | Beschreibung |
---|---|---|---|
Wert | String oder Objekt | keine | Text, der derzeit in das Eingabefeld für die Steuerung eingegeben wird |
Optionen
Name | Typ | Standard | Beschreibung |
---|---|---|---|
filterColumnIndex | Zahl | keine |
Die Spalte der Datentabelle, auf die der Filter angewendet werden soll. Sie müssen entweder diese Option oder filterColumnLabel angeben. Wenn beide vorhanden sind, 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 genauen Werten ('exact' ) entsprechen soll. Präfixe beginnen am Anfang des Werts ('prefix' ) oder eines Teilstrings ('any' ).
|
Groß-/Kleinschreibung beachten | boolean | false | Gibt an, ob beim Abgleich zwischen Groß- und Kleinschreibung unterschieden werden soll. |
useFormattedValue (Verwendung formatierter Wert) | boolean | false | Gibt an, ob das Steuerelement mit Zellenwerten formatiert oder mit tatsächlichen Werten abgeglichen werden 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 Objektliteralschreibweise verwenden, wie hier gezeigt:
{label: 'Name', labelSeparator: ':'} |
ui.realtimeTrigger | boolean | true | Gibt an, ob das Steuerelement bei jeder Betätigung einer Taste oder nur dann verwendet werden soll, wenn das Eingabefeld sich ändert (Fokusverlust oder Drücken der Eingabetaste). |
UI-Label | String | Automatisch | Das Label, das neben dem Eingabefeld angezeigt wird. Wenn nicht angegeben, wird das Label der Spalte verwendet, für die das Steuerelement gilt. |
UI-LabelSeparator | String | keine | Ein an das Label angehängter Trennzeichenstring, um das Label visuell vom Eingabefeld zu trennen. |
UI-Labeling | String | „horizontal“ |
Gibt an, ob das Label über (vertikalen Stapeln) oder neben (horizontalem Stapeln) des Eingabefelds angezeigt werden soll. Verwenden Sie entweder 'vertical' oder 'horizontal' .
|
UI.cssClass | String | „google-visualization-controls-stringfilter“ | Die CSS-Klasse, die dem Steuerelement für benutzerdefinierte Stile zugewiesen werden soll. |