Steuerelemente und Dashboards

Auf dieser Seite erfahren Sie, wie Sie mehrere Diagramme in Dashboards kombinieren und Nutzern die Steuerung der angezeigten Daten ermöglichen.

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

  1. 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.
  2. Bibliotheken laden Ein Dashboard erfordert nur zwei Bibliotheken auf der Seite: die Google AJAX API und das controls-Paket für die Google-Visualisierung.
  3. 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.
  4. Dashboard-Instanz erstellen Instanziieren Sie das Dashboard, indem Sie den Konstruktor aufrufen und einen Verweis auf das <div>-Element übergeben, das es enthält.
  5. Sie können beliebig viele Steuerelemente und Diagramminstanzen erstellen. Erstellen Sie google.visualization.ChartWrapper- und google.visualization.ControlWrapper-Instanzen, um jedes Diagramm zu beschreiben und zu steuern, was im Dashboard verwaltet wird.
  6. 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.
  7. Dashboard zeichnen Rufen Sie draw() in Ihrem 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 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 (oder filterColumnLabel) versehen, um festzulegen, in welcher Spalte von google.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 jede ChartWrapper-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.
Vollständige 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 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 bind()-Aufrufe zu verketten.

  • controls: Entweder eine einzelne Instanz oder ein Array von google.visualization.ControlWrapper-Instanzen, die die zu bindenden Steuerelemente definieren.
  • charts – Entweder eine einzelne Instanz oder ein Array von google.visualization.ChartWrapper-Instanzen, die die Diagramme definieren, die von den Steuerelementen gesteuert werden.
draw(dataTable) –

Zeichnet das Dashboard.

  • dataTable – Eine der folgenden Optionen: ein DataTable-Objekt, ein DataView-Objekt, eine JSON-Darstellung einer DataTable oder ein Array, das der Syntax von google.visualization.arrayToDataTable() entspricht.
getSelection() Objekt-Array

Gibt ein Array der ausgewählten visuellen Entitäten der Diagramme im Dashboard zurück. Wenn die Methode getSelection() im Dashboard aufgerufen wird, wird eine Zusammenfassung aller Auswahlen für alle darin enthaltenen Diagramme zurückgegeben, sodass bei der Arbeit mit Diagrammauswahlen eine einzelne Referenz verwendet werden kann.

Hinweis:Ereignis-Listener für das ausgewählte Ereignis müssen weiterhin an jedes Diagramm angehängt werden, das Sie beobachten möchten.

Erweiterte Beschreibung

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

Das ready-Ereignis wird auch ausgelöst:

  • nach einer Dashboard-Aktualisierung, die durch einen Nutzer oder eine programmatische Interaktion mit einer der Steuerelemente ausgelöst wurde,
  • nach einem programmatischen Aufruf der Methode draw() eines Diagrammteils des Dashboards.
–

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 draw() aufrufen, um das programmatische Zeichnen des Steuerelements zu erzwingen, nachdem Sie andere Einstellungen wie Optionen oder Status geändert haben.

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

  • key – Name der abzurufenden Option. Kann ein qualifizierter Name sein, z. B. 'vAxis.title'.
  • opt_default_value [optional]: Wenn der angegebene Wert nicht definiert oder null ist, wird dieser Wert zurückgegeben.
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 und refreshInterval 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 angegebenen dataTable-Spalten für das Diagramm relevant sind, wie unter Steuer- und Diagramminstanzen erstellen beschrieben.

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:
  • 'aside': Die ausgewählten Werte werden in einer einzigen Textzeile neben dem Wertauswahl-Widget angezeigt.
  • 'below': Die ausgewählten Werte werden in einer einzigen Textzeile unterhalb des Widgets 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. 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.chartView entsprechend anzugeben.

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.