Steuerelemente und Dashboards

Auf dieser Seite erfahren Sie, wie Sie mehrere Diagramme in Dashboards kombinieren und Nutzern die Kontrolle darüber geben, welche Daten sie anzeigen.

Ü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.

  1. 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.
  2. 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.
  3. 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.
  4. Dashboard-Instanz erstellen Instanziieren Sie Ihr Dashboard, indem Sie seinen Konstruktor aufrufen und einen Verweis auf das <div>-Element übergeben, das es enthält.
  5. Erstellen Sie beliebig viele Steuerelemente und Diagramminstanzen. Erstellen Sie google.visualization.ChartWrapper- und google.visualization.ControlWrapper-Instanzen, um jedes Diagramm und jede Steuerung zu beschreiben, die vom Dashboard verwaltet werden.
  6. 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.
  7. Zeichne dein Dashboard. Rufen Sie draw() im Dashboard auf und übergeben Sie Ihre Daten, um das gesamte Dashboard auf der Seite zu zeichnen.
  8. 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 (oder filterColumnLabel) zuweisen, um anzugeben, auf welche Spalte des google.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 Option view, 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.
Ganze Webseite
<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 bind()-Aufrufe zurück.

  • controls – Entweder eine einzelne oder ein Array von google.visualization.ControlWrapper-Instanzen, mit denen die zu bindenden Steuerelemente definiert werden.
  • charts: Entweder eine einzelne Instanz oder ein Array von google.visualization.ChartWrapper-Instanzen, mit denen die Diagramme definiert werden, die von den Steuerelementen gesteuert werden.
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 getSelection() auf dem Dashboard aufgerufen wird, gibt sie eine Zusammenfassung aller Auswahlen zurück, die in allen darin enthaltenen Diagrammen getroffen wurden. Dadurch kann bei der Arbeit mit Diagrammauswahl eine einzelne Referenz verwendet werden.

Hinweis:Event-Listener für das „select“-Ereignis müssen trotzdem an jedes Diagramm angehängt werden, das Sie beobachten möchten.

Erweiterte Beschreibung

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 draw aufrufen. Übernehmen Sie die Änderungen erst nach dem Auslösen des Ereignisses.

Das ready-Ereignis wird ebenfalls ausgelöst:

  • nach Abschluss einer Dashboard-Aktualisierung, die durch einen Nutzer oder eine programmatische Interaktion mit einem der Steuerelemente ausgelöst wurde,
  • nach einem programmatischen Aufruf der Methode draw() eines beliebigen Diagrammteils des Dashboards.
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 draw() aufrufen, um das programmatische erneute Zeichnen des Steuerelements zu erzwingen, nachdem Sie eine seiner anderen Einstellungen geändert haben, z. B. Optionen oder Status.

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

  • key – der Name der abzurufenden Option. Kann ein qualifizierter Name wie 'vAxis.title' sein.
  • opt_default_value [optional] – Wenn der angegebene Wert nicht definiert oder null ist, wird er zurückgegeben.
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 und refreshInterval 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

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:
  • 'aside': Die ausgewählten Werte werden in einer einzelnen Textzeile neben dem Werteauswahl-Widget angezeigt.
  • 'below': Die ausgewählten Werte werden in einer einzelnen Textzeile unter dem Widget angezeigt.
  • 'belowWrapping': ähnelt below, aber Einträge, die nicht in die Auswahl passen, werden in eine neue Zeile umgebrochen.
  • 'belowStacked': Die ausgewählten Werte werden in einer Spalte unter dem Widget angezeigt.
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.chartView entsprechend an.

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.