Elementy sterujące i panele

Na tej stronie zobaczysz, jak połączyć wiele wykresów w panele i dać użytkownikom kontrolę nad wyświetlanymi danymi.

Omówienie

Panele to prosty sposób na organizowanie wielu wykresów i zarządzanie nimi za pomocą tych samych podstawowych danych. Korzystając z interfejsów API opisanych na tej stronie, możesz zwolnić się z pracy i koordynować wszystkie wykresy prowadzone w panelu.

Panele definiuje się za pomocą klas google.visualization.Dashboard. Instancje Dashboard otrzymują DataTable z danymi, które umożliwiają wizualizację i dystrybucję danych na wszystkich wykresach w panelu.

Elementy sterujące to widżety interfejsu użytkownika (np. selektory kategorii, suwaki zakresu, autouzupełnianie itp.), z którymi korzystasz, aby zwiększać ilość danych zarządzanych przez panel i wykresy, które są jego częścią.

Ustawienia są zdefiniowane za pomocą klas google.visualization.ControlWrapper. Możesz dodać do panelu ControlWrapper instancji, które działają jak rury i zawory, w systemie hydraulicznym. Zbierają dane użytkowników i na podstawie tych informacji decydują, które dane z panelu powinny być udostępniane wykresom, które są ich częścią.

Przyjrzyjmy się temu przykładowi, w którym do wybierania danych na wykresie kołowym służy selektor kategorii i suwak.

Uwaga: panel jest interaktywny. Spróbuj sterować ustawieniami i obserwować zmiany na wykresie w czasie rzeczywistym.

Korzystanie z elementów sterujących i paneli

Oto najważniejsze kroki tworzenia panelu i umieszczania go na stronie. Poniżej znajdziesz fragment kodu, który ilustruje wszystkie powyższe kroki. Zawiera szczegółowe informacje o każdym kroku.

  1. Utwórz szkielet HTML dla swojego panelu. Strona może zawierać tyle elementów HTML, ile jest potrzebnych, by panel był wspierany przez każdego użytkownika. Dotyczy to panelu informacyjnego oraz wszystkich elementów sterujących i wykresów, które są jego częścią. Zwykle używa się w nim tagu <div>,
  2. Wczytaj biblioteki. Panel musi zawierać lub wczytać tylko 2 biblioteki: interfejs Google API API i pakiet Google wizualizacji controls.
  3. Przygotuj dane. Musisz przygotować dane do wizualizacji, co oznacza, że musisz samodzielnie określić dane w kodzie lub wysłać zapytanie o dane do witryny zdalnej.
  4. Utwórz instancję panelu. Utwórz instancję panelu, wywołując jego konstruktor i przekazując odwołanie do elementu <div>, w którym zostanie zapisany.
  5. Utwórz dowolną liczbę instancji sterujących i wykresów Utwórz instancje google.visualization.ChartWrapper i google.visualization.ControlWrapper, aby opisać każdy wykres i określić, którym panelem zarządza.
  6. Ustal zależności. Wywołaj bind() w swoim panelu i przekaż instancje kontrolne i wykresy, aby dać znać panelowi, czym należy zarządzać. Gdy pogrupujesz element sterujący i wykres, panel zaktualizuje wykres, aby dopasować go do ograniczeń dotyczących danych wybranych przez element sterujący.
  7. Narysuj panel. Wywołaj draw() w swoim panelu i przekaż swoje dane, aby wyświetlić cały panel na stronie.
  8. Zmiany automatyczne po narysowaniu. Opcjonalnie po pierwszym losowaniu możesz automatycznie zamontować elementy sterujące, które są częścią panelu, i na tej podstawie zaktualizować wykresy.

Oto prosty przykład strony, która tworzy prosty panel z przesunięciem zakresu na wykresie kołowym. Utworzony panel pojawi się pod fragmentem kodu.

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

Oto panel tworzony przez ten kod.

1. Utwórz szkielet HTML dla swojego pulpitu

Strona musi mieć tyle elementów HTML (zwykle <div>), by można było przechowywać zarówno panel, jak i wszystkie elementy sterujące i wykresy. Podczas tworzenia instancji pulpitu nawigacyjnego, sterowania i wykresu musisz przekazać odwołanie do jego elementu, więc przypisz identyfikator do każdego elementu HTML.

    <!--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>

Możesz umieścić każdy element HTML niezależnie od tego, jak chcesz wyglądać w panelu.

2. Wczytaj swoje biblioteki

Panel musi zawierać lub wczytać tylko 2 biblioteki: interfejs Google AJAX API i pakiet Google wizualizacji controls. Interfejs API (w szczególności google.visualization.ChartWrapper) automatycznie identyfikuje inne wymagane pakiety (na przykład gauge, jeśli używasz wykresu wskaźnikowego) i wczytuje je na bieżąco bez dodatkowych działań z Twojej strony.

Aby pobrać bibliotekę sterowania, musisz użyć polecenia google.charts.load().

<!--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. Przygotowywanie danych

Po załadowaniu interfejsu API wizualizacji google.charts.setOnLoadCallback() wywoła funkcję obsługi, dzięki czemu wiesz, że wszystkie wymagane metody i klasy pomocnicze są gotowe do przygotowania.

Panele akceptują dane w tabeli danych, tak samo jak wykresy.

4. Tworzenie instancji panelu

Po utworzeniu danych możesz utworzyć instancję obiektu panelu. Konstruktor pulpitu pobiera jeden parametr: odwołanie do elementu DOM, w którym można narysować panel.

  var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));

Panele są wyświetlane jako klasa JavaScript. Po utworzeniu pulpitu nawigacyjnego możesz wykonać kilka opcjonalnych czynności, takich jak dodanie detektorów zdarzeń (na przykład powiadomienie o dodaniu go do stanu „gotowy”). Panele obsługują zdarzenia w taki sam sposób jak wykresy. Więcej informacji znajdziesz w sekcjach Obsługa zdarzeń wizualizacji i Wyświetlanie błędów w sekcji wykresu.

5. Tworzenie instancji kontrolnych i wykresów

Zdefiniuj, ile instancji jest potrzebnych w przypadku każdego elementu sterującego i wykresu, który będzie częścią panelu. Użyj google.visualization.ChartWrapper i google.visualization.ControlWrapper, aby odpowiednio określić wykresy i elementy sterujące.

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

Podczas tworzenia instancji ChartWrapper i ControlWrapper nie określaj parametru dataTable ani dataSourceUrl. Panel dostarcza do każdego pliku odpowiednie dane. Pamiętaj jednak o określeniu wymaganych parametrów: chartType i containerId w przypadku wykresów, oraz controlType i containerId w przypadku elementów sterujących.

Kilka wskazówek dotyczących konfigurowania elementów sterujących i wykresów:

  • Musisz przypisać wszystkim elementom sterującym filterColumnIndex (lub filterColumnLabel) określenie, na której kolumnie znajduje się google.visualization.DataTable element sterujący (w powyższym przykładzie kontrolka działa w kolumnie spożyte pączki),
  • Aby zainicjować je za pomocą stanu jednoznacznie wybranego po ich pobraniu, użyj opcji konfiguracji state. Za pomocą tego ustawienia możesz na przykład poprawić początkowe położenie kciuka suwaka zakresu.

      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}
      });
    
        
  • Wszystkie wykresy znajdujące się w panelu mają tę samą bazową tabelę danych, która została utworzona w kroku Przygotowywanie danych. Jednak wykresy mają często określony układ kolumn, np. wykres kołowy, po którym znajduje się kolumna z wartością w postaci kolumny z wartościami.

    Podczas konfigurowania każdej instancji ChartWrapper użyj opcji view, aby zadeklarować, które kolumny są odpowiednie dla wykresu, jak pokazano w przykładzie poniżej.

      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. Określanie zależności

Gdy utworzysz wystąpienie panelu oraz wszystkich zawartych w nim elementów sterujących i wykresów, użyj metody bind(), aby poinformować panel o zależnościach między elementami sterującymi i wykresami.

Gdy pogrupujesz element sterujący i wykres, panel zaktualizuje wykres zgodnie z ograniczeniami wymuszanymi przez to dane przez kontrolę. W przykładowym panelu, który kompilujesz, suwak zakresu i wykres kołowy są ze sobą powiązane, więc gdy wchodzisz w interakcję z pierwszym, ta druga wartość wyświetla tylko dane, które pasują do wybranego zakresu.

  // 'pieChart' will update whenever you interact with 'donutRangeSlider'
  // to match the selected range.
  dashboard.bind(donutRangeSlider, pieChart);

Powiązania i wykresy możesz łączyć w wielu różnych konfiguracjach: jeden do jednego, jeden do wielu, wiele do jednego i wiele do wielu. Za każdym razem, gdy do wykresu jest przypisanych wiele elementów sterujących, panel aktualizuje wykres, aby dopasować go do połączonych ograniczeń wyegzekwowanych przez wszystkie powiązane ustawienia. Jednocześnie element sterujący może generować wiele wykresów. Aby jednocześnie określić wiele powiązań, przekaż tablice do metody bind(), a nie do pojedynczych instancji. Możesz też połączyć kilka wywołań bind(). Oto kilka przykładów.

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

W przypadku zaawansowanych zastosowań możesz też powiązać elementy sterujące z innymi ustawieniami, aby utworzyć łańcuchy zależności .

  dashboard.bind(countryPicker, regionPicker).bind(regionPicker, cityPicker);

7. Rysowanie panelu

Wywołaj metodę draw() w instancji panelu, aby wyświetlić cały panel. Metoda draw() przyjmuje tylko 1 parametr: DataTable (lub DataView), który wykorzystuje panel.

Funkcja draw() powinna być wywoływana za każdym razem, gdy zmienisz kompozycję panelu (np. przez dodanie do niego nowych elementów sterujących lub wykresów) albo w ogólny sposób DataTable, które go obsługuje.

Instancja panelu uruchamia zdarzenie ready za każdym razem, gdy draw() zakończy rysowanie wszystkich elementów sterujących i wykresów, które są jego częścią. Zdarzenie error jest uruchamiane, gdy nie można wyświetlić któregoś z elementów sterujących lub wykresu. Więcej informacji o obsłudze zdarzeń znajdziesz w sekcji Obsługa zdarzeń.

Uwaga: zanim spróbujesz zmienić kompozycję panelu lub narysować ją ponownie, musisz nasłuchiwać zdarzenia ready.

8. Zautomatyzowane zmiany po losowaniu

Po zakończeniu działania panelu draw() będzie on wyświetlany na żywo i będzie automatycznie odpowiadać na każde jego działanie (np. zmiana wybranego zakresu suwaka kontrolnego, który jest częścią panelu).

Jeśli musisz automatycznie zmienić stan panelu, możesz to zrobić bezpośrednio na instancjach ControlWrapper i ChartWrapper, które są jego częścią. Zalecamy, aby wszystkie niezbędne zmiany były wprowadzane bezpośrednio w konkretnej instancji ControlWrapper (lub ChartWrapper). Przykładem może być zmiana opcji kontrolnej lub stanu za pomocą odpowiednio reguł setOption() i setState(), a następnie wywołanie metody draw(). Panel zostanie zaktualizowany zgodnie z żądanymi zmianami.

Przykład poniżej pokazuje, jak to wygląda.

Cała strona internetowa
<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>

Dokumentacja API

Ta sekcja zawiera obiekty wyświetlone w interfejsie Control and Dashboards API, a także standardowe metody korzystające ze wszystkich elementów sterujących.

Panel

Reprezentuje zbiór współpracy elementów sterujących i wykresów wykorzystujących te same podstawowe dane.

Zespół

Dashboard(containerRef)
containerref
Odwołanie do prawidłowego elementu kontenera na stronie, w którym znajdzie się zawartość panelu.

Metody

W panelu podawane są następujące metody:

Metoda Typ zwracanej wartości Opis
bind(controls, charts) google.visualization.Panel.

Łączy co najmniej 1 element sterujący z co najmniej 1 innym uczestnikiem panelu (wykresem lub innymi elementami sterującymi), aby gdy pierwszy z tych elementów zbierał automatyzację lub interakcję użytkownika wpływającą na dane zarządzane przez panel. Zwraca samą instancję panelu w celu powiązania wielu wywołań bind().

  • controls – jedna lub tablica google.visualization.ControlWrapper instancji definiujących elementy sterujące do powiązania.
  • wykresy – pojedynczy wykres lub tablica instancji google.visualization.ChartWrapper definiujących wykresy, które będą używane przez elementy sterujące.
draw(dataTable) Brak

Rysuje panel.

getSelection() Tablica obiektów

Zwraca tablicę wybranych elementów wizualnych wykresów na pulpicie nawigacyjnym. Gdy metoda getSelection() jest wywoływana na panelu, zwraca zbiorcze dane dotyczące wszystkich wyborów.

Uwaga: do każdego wykresu, którego chcesz posłuchać, nadal musisz dołączyć detektory zdarzeń.

Rozszerzony opis

Zdarzenia

Obiekt Dashboard wysyła poniższe zdarzenia. Pamiętaj, że aby wywołać zdarzenie, musisz wywołać metodę Dashboard.draw().

Nazwa Opis Usługi
error Uruchamiane, gdy podczas próby renderowania panelu wystąpi błąd. Renderowanie co najmniej 1 elementu sterującego i wykresów znajdujących się w panelu nie powiodło się. id, message,
ready

Panel zakończył rysowanie i można je zaakceptować. Wszystkie elementy sterujące i wykresy, które są częścią panelu, są gotowe do stosowania metody rozmowy zewnętrznej i interakcji użytkownika. Jeśli chcesz zmienić panel (lub wyświetlane w nim dane) po jego narysowaniu, ustaw odbiornik dla tego zdarzenia przed wywołaniem metody draw, a następnie zastosuj zmiany dopiero po wywołaniu zdarzenia.

Zdarzenie ready będzie też uruchamiane:

  • po zakończeniu odświeżania panelu wywołanego przez użytkownika lub zautomatyzowaną interakcję z jednym z ustawień.
  • po automatycznym wywołaniu metody draw() dowolnej sekcji panelu na wykresie.
Brak

Opakowanie pakietów

Obiekt ControlWrapper otaczają kod JSON skonfigurowanej instancji kontrolnej. Klasa ujawnia metody wygodnego definiowania opcji panelu, rysowania i automatycznego zmieniania ich stanu.

Zespół

ControlWrapper(opt_spec)
opt_spec
[Opcjonalny] – obiekt JSON definiujący element sterujący lub zserializowany ciąg znaków danego obiektu. Obsługiwane właściwości obiektu JSON są opisane w tabeli poniżej. Jeśli nie określisz stanu, musisz ustawić wszystkie odpowiednie właściwości za pomocą metod set... wykrytych przez ControlWrapper.
Właściwość Typ Wymagany Domyślna Opis
typ kontroli Ciąg znaków Wymagany brak Nazwa klasy elementu sterującego. W przypadku ustawień Google można pominąć nazwę pakietu google.visualization. Przykłady: CategoryFilter, NumberRangeFilter.
identyfikator kontenera Ciąg znaków Wymagany brak Identyfikator elementu DOM na stronie, na którym zostanie umieszczony element sterujący.
Opcje obiekt Opcjonalna brak Obiekt opisujący opcje elementu sterującego. Możesz użyć notacji literału JavaScript lub podać obiekt do obiektu. Przykład: "options": {"filterColumnLabel": "Age", "minValue": 10, "maxValue": 80}
state obiekt Opcjonalna brak Obiekt opisujący stan elementu sterującego. Stan zbiera wszystkie zmienne, na które może wpływać użytkownik korzystający z elementu sterującego. Stan suwaka zakresu można na przykład opisać jako pozycję zajmowaną przez niski i wysoki suwak. Możesz użyć notacji literalnej JavaScript lub podać obiekt – przykład: "state": {"lowValue": 20, "highValue": 50}

Metody

ControlWrapper udostępnia te dodatkowe metody:

Metoda Typ zwracanej wartości Opis
draw() Brak

Rysuje element sterujący. Normalnie panel, w którym znajduje się element sterujący, rysuje. Po zmianie dowolnego innego ustawienia, takiego jak opcje czy stan, należy wywołać metodę draw().

toJSON() Ciąg znaków Zwraca ciąg znaków w formacie JSON reprezentujący element sterujący.
clone() ControlWrapper Zwraca głęboką kopię kodu sterującego.
getControlType() Ciąg znaków Nazwa klasy elementu sterującego. Jeśli jest to ustawienie Google, nazwa nie zostanie zakwalifikowana za pomocą google.visualization. Na przykład w przypadku ustawienia „CategoryFiltr” zwracałaby wartość „CategoryFilter”, a nie „google.visualization.CategoryFilter”.
getControlName() Ciąg znaków Zwraca nazwę elementu sterującego przypisaną przez użytkownika setControlName().
getControl() Odniesienie do obiektu sterującego Zwraca odwołanie do elementu sterującego utworzonego przez to element ControlWrapper. Zwrócone wartości będą puste, dopóki nie wywołasz obiektu draw() na obiekcie ControlWrapper (lub w panelu, na którym jest on) i wywoła gotowe zdarzenie. Zwracany obiekt ujawnia tylko jedną metodę: resetControl(), która resetuje stan elementu sterującego do stanu, w którym został zainicjowany (np. resetuje element formularza HTML).
getContainerId() Ciąg znaków Identyfikator elementu kontenera DOM elementu sterującego.
getOption(key, opt_default_val) Dowolny typ

Zwraca podaną wartość opcji sterowania

  • key – nazwa opcji do pobrania. Może być odpowiednią nazwą, na przykład 'vAxis.title'.
  • opt_default_value [opcjonalny] – jeśli nieokreślona lub nieokreślona wartość jest zwracana, ta wartość zostanie zwrócona.
getOptions() obiekt Zwraca obiekt opcji dla tego elementu sterującego.
getState() obiekt Zwraca stan elementu sterującego.
setControlType(type) Brak Określa typ elementu sterującego. Przekaż nazwę klasy elementu sterującego, aby utworzyć instancję. Jeśli jest to element sterujący Google, nie zakwalifikuj go za pomocą google.visualization. Aby na przykład ustawić suwak zakresu liczbowego na kolumnie liczbowej, przekaż wartość „NumberRangeFilter”.
setControlName(name) Brak Ustawia dowolną nazwę elementu sterującego. Nie jest to nigdzie widoczne w kontrolce, ale służy tylko jako odniesienie.
setContainerId(id) Brak Ustawia identyfikator elementu DOM elementu sterującego.
setOption(key, value) Brak Ustawia pojedynczą wartość opcji, gdzie klucz to nazwa opcji, a wartość jest wartością. Aby usunąć wybór opcji, przekaż wartość null. Pamiętaj, że klucz może być odpowiednią nazwą, na przykład 'vAxis.title'.
setOptions(options_obj) Brak Ustawia kompletny obiekt opcji dla elementu sterującego.
setState(state_obj) Brak Ustawia stan elementu sterującego. Stan zbiera wszystkie zmienne, na które może wpływać użytkownik korzystający z elementu sterującego. Stan suwaka zakresu można na przykład opisać jako pozycję zajmowaną przez niski i wysoki suwak.

Zdarzenia

Obiekt ControlWrapper zgłasza poniższe zdarzenia. Pamiętaj, że przed wywołaniem jakichkolwiek zdarzeń musisz wywołać metodę ControlWrapper.draw() (lub narysować panel sterujący).

Nazwa Opis Usługi
error Uruchamiane, gdy podczas renderowania elementu sterującego wystąpi błąd. id, message,
ready Element sterujący jest gotowy do przyjmowania interakcji użytkowników i do wywołań metod zewnętrznych. Jeśli chcesz korzystać z elementu sterującego i metod wywołania, po narysowaniu ich należy skonfigurować odbiornik tego zdarzenia przed wywołaniem metody draw i wywołanie jej dopiero po wywołaniu zdarzenia. Możesz też nasłuchiwać zdarzenia ready w panelu, które zawiera metody kontroli i wywołania połączenia dopiero po uruchomieniu zdarzenia. Brak
statechange Uruchamiane, gdy użytkownik wchodzi w interakcję z elementem sterującym, co wpływa na jego stan. Na przykład zdarzenie statechange będzie uruchamiane przy przesuwaniu kciukiem suwaka zakresu. Aby pobrać zaktualizowany stan elementu sterującego po wywołaniu zdarzenia, wywołaj ControlWrapper.getState(). Brak

ChartWrapper

Więcej informacji znajdziesz w dokumentacji dotyczącej google.visualization.ChartWrapper w sekcji dokumentacji interfejsu API wizualizacji.

Jeśli używasz ChartWrapper w panelu, obowiązują poniższe uwagi:

  • Nie ustawiaj jednoznacznie atrybutów dataTable, query, dataSourceUrl i refreshInterval. Panel, na którym znajduje się wykres, dostarcza do niego potrzebne dane.
  • Ustaw jego atrybut view, aby zadeklarować, które kolumny spośród wszystkich kolumn dostępnych w dataTable, które są przypisane do panelu, są odpowiednie dla wykresu, tak jak to opisano w sekcji Tworzenie elementu sterującego i instancji wykresu.

Filtry to elementy graficzne, dzięki którym użytkownicy mogą interaktywnie wybierać dane wyświetlane na wykresie. W tej sekcji opisano filtry wykresu Google: CategoryFilter, ChartRangeFilter, DateRangeFilter, NumberRangeFilter i StringFilter.

Możesz użyć dowolnego z nich jako parametru w polu ControlWrapper.setControlType().

Uwaga: w opisach opcji do opisywania atrybutów zagnieżdżonych używany jest zapis z kropką. Na przykład opcja o nazwie 'ui.label' powinna być zadeklarowana w obiekcie opcji jako var options = {"ui": {"label": "someLabelValue"} };

Filtr kategorii

Selektor do wyboru co najmniej 1 z określonych wartości.

Stan

Nazwa Typ Domyślna Opis
selectedValues, Tablica obiektów lub typów podstawowych brak Zestaw obecnie wybranych wartości. Wybrane wartości muszą być zestawem ogólnych wartości, które można wybrać za pomocą opcji values (wszystkie zbędne wartości są ignorowane). Jeśli CategoryFilter nie umożliwia wielokrotnego wyboru, zachowana jest tylko pierwsza wartość tablicy.

Opcje

Nazwa Typ Domyślna Opis
Indeks kolumn filtra liczba brak Kolumna tabeli danych, na której ma działać filtr. Musisz podać tę opcję lub filterColumnLabel. Jeśli obie te opcje są obecne, ta opcja ma pierwszeństwo.
Etykietakolumny filtra tekst brak Etykieta kolumny, na której powinien działać filtr. Musisz podać tę opcję lub filterColumnIndex. Jeśli występuje oba, plik filterColumnIndex ma pierwszeństwo.
wartości Tablica auto Lista wartości do wyboru. Jeśli używana jest tablica obiektów, powinny one mieć odpowiednią reprezentację toString() do wyświetlenia użytkownikowi. Jeśli wartość jest pusta lub nieokreślona, lista wartości zostanie automatycznie obliczona na podstawie wartości znajdujących się w kolumnie Tabela danych, na której działa ten element sterujący.
useFormattedValue wartość logiczna fałsz Podczas wypełniania listy możliwych do wyboru wartości z kolumny tabeli danych działa ten filtr, niezależnie od tego, czy chcesz użyć rzeczywistych wartości komórki czy ich formatowania.
UI obiekt brak Obiekt z członkami, który służy do konfigurowania różnych aspektów interfejsu sterowania. Aby określić właściwości tego obiektu, możesz użyć notacji literału obiektu, jak tutaj:
{label: 'Metric', labelSeparator: ':'}
ui.caption tekst „Wybierz wartość...” Napisy wyświetlane w widżecie selektora wartości, gdy nie jest wybrany żaden element.
ui.sortValues wartość logiczna prawda Określa, czy wartości do wyboru powinny być sortowane.
ui.selectedValuesLayout tekst „poza” Jak wyświetlać wybrane wartości, gdy można wybrać wiele wartości. Możliwe wartości:
  • 'aside': wybrane wartości są wyświetlane w pojedynczym wierszu tekstu obok widżetu selektora wartości.
  • 'below': wybrane wartości są wyświetlane w pojedynczym wierszu poniżej widżetu.
  • 'belowWrapping': podobna do below, ale wpisy, które nie mieszczą się w selektorze, pojawią się w nowym wierszu,
  • 'belowStacked': wybrane wartości zostaną wyświetlone w kolumnie pod widżetem.
ui.allowNone wartość logiczna prawda Określa, czy użytkownik może nie wybierać żadnej wartości. W przypadku wartości false użytkownik musi wybrać co najmniej 1 z dostępnych wartości. Jeśli podczas inicjowania kontroli opcja jest ustawiona na false i nie podano stanu selectedValues, automatycznie wybierana jest pierwsza wartość z dostępnych.
ui.allowmultiple wartość logiczna prawda Określa, czy można wybrać więcej niż jedną wartość.
ui.allowTypeing wartość logiczna prawda Określa, czy użytkownik może pisać w polu tekstowym, aby zawęzić listę możliwych opcji (za pomocą autouzupełniania).
ui.label, tekst auto Etykieta wyświetlana obok selektora kategorii. Jeśli jej nie określisz, zostanie użyta etykieta kolumny, na której działa ten element sterujący.
ui.labelSeparator, tekst brak Ciąg znaków separatora dołączonego do etykiety, który oddziela etykietę od selektora kategorii.
UI.labelStacking, tekst „poziome” Określa, czy etykieta powinna być wyświetlana powyżej (skumulowane w pionie), czy obok (skumulowane w poziomie) selektora kategorii. Użyj 'vertical' lub 'horizontal'.
ui.cssKlasa tekst „google-visualization-controls-categoryfilter” Klasa CSS przypisana do elementu sterującego na potrzeby stylu niestandardowego.

FiltrZakresówwykresów

Suwak z dwoma palcami nałożonymi na wykres pozwala wybrać zakres wartości z osi ciągłej wykresu.

Stan

Nazwa Typ Domyślna Opis
zakres.start liczba, data, data lub godzina Wartość początkowa zakresu Początek wybranego zakresu (włącznie).
zakres.końcowy liczba, data, data lub godzina Wartość końcowa zakresu Koniec wybranego zakresu (włącznie).

Opcje

Nazwa Typ Domyślna Opis
Indeks kolumn filtra liczba brak Indeks kolumny w tabeli danych, na której działa filtr. Musisz podać tę opcję lub filterColumnLabel. Jeśli występują oba, ta opcja ma pierwszeństwo.

Pamiętaj, że określenie indeksu dotyczy tylko kolumny domeny umieszczonej na osi ciągłej wykresu wyświetlanego w panelu sterowania.

Etykietakolumny filtra tekst brak Etykieta kolumny tabeli danych, na której działa filtr. Musisz podać tę opcję lub filterColumnIndex. Jeśli istnieją oba, pierwszeństwo ma filterColumnIndex.

Pamiętaj, że określenie etykiety kolumny domena ma sens tylko w ciągłej osi wykresu przedstawionego w kontrolce.

UI obiekt brak Obiekt z członkami, który służy do konfigurowania różnych aspektów interfejsu sterowania. Aby określić właściwości tego obiektu, możesz użyć notacji literału obiektu, jak tutaj:
{chartType: 'ScatterChart', chartOptions: {pointSize: 10}}
ui.graphType tekst Wykres mieszany Typ wykresu narysowanego w ramach elementu sterującego.
Może to być jeden z tych wykresów: „Wykres warstwowy”, „Wykres liniowy”, „Wykres mieszany” lub „Wykres punktowy”.
ui.graphOptions obiekt
{
 'enableInteractivity': false,
 'chartArea': {'height': '100%'},
 'legend': {'position': 'none'},
 'hAxis': {'textPosition': 'in'},
 'vAxis': {
  'textPosition': 'none',
  'gridlines': {'color': 'none'}
 }
}
      
Opcje konfiguracji wykresu narysowanego w ramach elementu sterującego. Zezwala na taki sam poziom konfiguracji jak dowolny wykres w panelu i jest zgodny z formatem akceptowanym przez funkcję ChartWrapper.setOptions().

Możesz określić dodatkowe opcje lub zastąpić ustawienia domyślne (pamiętaj jednak, że ustawienia domyślne zostały starannie wybrane pod kątem optymalnego wyglądu).

ui.schemaView Obiekt lub ciąg (obiekt szeregowy) brak Specyfikacja widoku danych, który ma być zastosowany do tabeli danych służącej do rysowania wykresu w formie kontrolnej. Zezwala na taki sam poziom konfiguracji jak dowolny wykres w panelu i jest zgodny z formatem akceptowanym przez funkcję ChartWrapper.setView(). Jeśli nie zostanie podany, do tworzenia wykresu używana jest tabela danych.

Pamiętaj, że oś pozioma rysowanego wykresu musi być ciągła, więc musisz prawidłowo wybrać ui.chartView.

ui.minRangeSize liczba Różnica w wartości danych interpretowana jako 1 piksel Minimalny rozmiar zakresu, który można wybrać (range.end - range.start), określony w jednostkach wartości danych. W przypadku osi numerycznej jest to liczba (nie musi być liczbą całkowitą). W przypadku daty, daty i godziny lub osi czasu jest to liczba całkowita, która określa różnicę w milisekundach.
ui.snapToData wartość logiczna fałsz Jeśli ustawisz wartość prawda, kciuki zakresu będą przyciągane do najbliższych punktów danych. W tym przypadku punkty końcowe zakresu zwróconego przez getState() muszą być wartościami w tabeli danych.

Zdarzenia

Dodatki do zdarzeń ControlWrapper:

Nazwa Opis Usługi
statechange Podobnie jak w przypadku każdego elementu ControlWrapper, ma tylko dodatkową właściwość logiczną inProgress, która określa, czy stan jest obecnie zmieniany (przeciągany jest jeden z kciuków lub sam zakres). w toku

Filtr zakresu dat

Podwójny suwak umożliwiający wybór zakresów dat.

Spróbuj przesunąć suwak, aby zmienić wiersze widoczne w tabeli poniżej.

Stan

Nazwa Typ Domyślna Opis
LowValue liczba brak Dolny zakres wybranego zakresu.
wysokaWartość liczba brak Wyższy zakres w wybranym zakresie.
LowThumbAtMinimum wartość logiczna brak Określa, czy dolny kciuk suwaka jest zablokowany przy minimalnym dozwolonym zakresie. Jeśli jest skonfigurowana, zastępuje lowValue.
highThumbAtMaksymaln wartość logiczna brak Określa, czy górny suwak jest zablokowany w maksymalnym dozwolonym zakresie. Jeśli jest skonfigurowana, zastępuje highValue.

Opcje

Nazwa Typ Domyślna Opis
Indeks kolumn filtra liczba brak Kolumna tabeli danych, na której ma działać filtr. Musisz podać tę opcję lub filterColumnLabel. Jeśli obie te opcje są obecne, ta opcja ma pierwszeństwo. Musi wskazywać kolumnę typu number.
Etykietakolumny filtra tekst brak Etykieta kolumny, na której powinien działać filtr. Musisz podać tę opcję lub filterColumnIndex. Jeśli występuje oba, plik filterColumnIndex ma pierwszeństwo. Musi wskazywać kolumnę typu number.
minValue Data auto Minimalna dozwolona wartość dla niższego zakresu. Jeśli wartość jest nieokreślona, zostanie ona wywnioskowana z zawartości tabeli danych zarządzanej przez element sterujący.
Wartość maksymalna Data auto Maksymalna dozwolona wartość dla zakresu w wyższym zakresie. Jeśli wartość jest nieokreślona, zostanie ona wywnioskowana z zawartości tabeli danych zarządzanej przez element sterujący.
UI obiekt brak Obiekt z członkami, który służy do konfigurowania różnych aspektów interfejsu sterowania. Aby określić właściwości tego obiektu, możesz użyć notacji literału obiektu, jak tutaj:
{label: 'Age', labelSeparator: ':'}
ui.format, obiekt brak Jak przedstawić datę w postaci ciągu znaków. Akceptuje każdy prawidłowy format daty.
ui.step tekst dzień Minimalna możliwa zmiana, która może wystąpić podczas przeciągania kciuka: może to być dowolna jednostka czasu obejmująca maksymalnie dzień. ("miesiąc" i "rok" nie są jeszcze obsługiwane).
ui.ticks liczba auto Liczba znaczników (stałych pozycji na pasku zakresu), które mogą być wyświetlane na suwakach.
ui.unitIncrement tekst '1' Kwota przyrostowa dla jednostek zwiększających się zakresy. Przeniesienie jednostki jest równoważne użyciu klawiszy strzałek do przesuwania kciuka.
ui.blockIncrement liczba 10 Kwota przyrostu dla bloków przyrostu zakresów. Zwiększenie bloku jest równoważne użyciu klawiszy pgUp i pgDown do przesuwania kciuków suwaka.
ui.showRangeValues wartość logiczna prawda Określa, czy etykiety obok suwaka mają wyświetlać się w wybranym zakresie.
UI.orientation tekst „poziome” Orientacja suwaka. Może to być 'horizontal' lub 'vertical'.
ui.label, tekst auto Etykieta wyświetlana obok suwaka. Jeśli jej nie określisz, zostanie użyta etykieta kolumny, której używa ten element sterujący.
ui.labelSeparator, tekst brak Ciąg znaków separatora dołączonego do etykiety, który wizualnie oddziela etykietę od suwaka.
UI.labelStacking, tekst „poziome” Określa, czy etykieta powinna wyświetlać się powyżej (skumulowana pionowo) czy obok (skumulowane poziomo) na suwaku. Użyj 'vertical' lub 'horizontal'.
ui.cssKlasa tekst „google-visualization-controls-rangefilter” Klasa CSS przypisana do elementu sterującego na potrzeby stylu niestandardowego.

Filtr zakresów numerów

Podwójny suwak umożliwiający wybór zakresów wartości liczbowych.

Stan

Nazwa Typ Domyślna Opis
LowValue liczba brak Dolny zakres wybranego zakresu.
wysokaWartość liczba brak Wyższy zakres w wybranym zakresie.
LowThumbAtMinimum wartość logiczna brak Określa, czy dolny kciuk suwaka jest zablokowany przy minimalnym dozwolonym zakresie. Jeśli jest skonfigurowana, zastępuje lowValue.
highThumbAtMaksymaln wartość logiczna brak Określa, czy górny suwak jest zablokowany w maksymalnym dozwolonym zakresie. Jeśli jest skonfigurowana, zastępuje highValue.

Opcje

Nazwa Typ Domyślna Opis
Indeks kolumn filtra liczba brak Kolumna tabeli danych, na której ma działać filtr. Musisz podać tę opcję lub filterColumnLabel. Jeśli obie te opcje są obecne, ta opcja ma pierwszeństwo. Musi wskazywać kolumnę typu number.
Etykietakolumny filtra tekst brak Etykieta kolumny, na której powinien działać filtr. Musisz podać tę opcję lub filterColumnIndex. Jeśli występuje oba, plik filterColumnIndex ma pierwszeństwo. Musi wskazywać kolumnę typu number.
minValue liczba auto Minimalna dozwolona wartość dla niższego zakresu. Jeśli wartość jest nieokreślona, zostanie ona wywnioskowana z zawartości tabeli danych zarządzanej przez element sterujący.
Wartość maksymalna liczba auto Maksymalna dozwolona wartość dla zakresu w wyższym zakresie. Jeśli wartość jest nieokreślona, zostanie ona wywnioskowana z zawartości tabeli danych zarządzanej przez element sterujący.
UI obiekt brak Obiekt z członkami, który służy do konfigurowania różnych aspektów interfejsu sterowania. Aby określić właściwości tego obiektu, możesz użyć notacji literału obiektu, jak tutaj:
{label: 'Age', labelSeparator: ':'}
ui.format, obiekt brak Jak przedstawić liczbę w postaci ciągu znaków. Akceptuje każdy prawidłowy format liczb.
ui.step liczba 1 lub obliczona na podstawie ticks, jeśli określono Minimalna możliwa zmiana przy przeciąganiu kciukiem.
ui.ticks liczba auto Liczba znaczników (stałych pozycji na pasku zakresu), które mogą być wyświetlane na suwakach.
ui.unitIncrement liczba 1 Kwota przyrostowa dla jednostek zwiększających się zakresy. Przeniesienie jednostki jest równoważne użyciu klawiszy strzałek do przesuwania kciuka.
ui.blockIncrement liczba 10 Kwota przyrostu dla bloków przyrostu zakresów. Zwiększenie bloku jest równoważne użyciu klawiszy pgUp i pgDown do przesuwania kciuków suwaka.
ui.showRangeValues wartość logiczna prawda Określa, czy etykiety obok suwaka mają wyświetlać się w wybranym zakresie.
UI.orientation tekst „poziome” Orientacja suwaka. Może to być 'horizontal' lub 'vertical'.
ui.label, tekst auto Etykieta wyświetlana obok suwaka. Jeśli jej nie określisz, zostanie użyta etykieta kolumny, której używa ten element sterujący.
ui.labelSeparator, tekst brak Ciąg znaków separatora dołączonego do etykiety, który wizualnie oddziela etykietę od suwaka.
UI.labelStacking, tekst „poziome” Określa, czy etykieta powinna wyświetlać się powyżej (skumulowana pionowo) czy obok (skumulowane poziomo) na suwaku. Użyj 'vertical' lub 'horizontal'.
ui.cssKlasa tekst „google-visualization-controls-rangefilter” Klasa CSS przypisana do elementu sterującego na potrzeby stylu niestandardowego.

Filtruj ciągi

Proste pole do wprowadzania tekstu, które umożliwia filtrowanie danych za pomocą dopasowania ciągu tekstowego. Aktualizuje się po każdym naciśnięciu klawisza. Wpisz j, aby zawęzić tabelę do Jana i Jessicy.

Stan

Nazwa Typ Domyślna Opis
wartość ciąg lub obiekt brak Tekst aktualnie wpisany w polu sterowania.

Opcje

Nazwa Typ Domyślna Opis
Indeks kolumn filtra liczba brak Kolumna tabeli danych, na której ma działać filtr. Musisz podać tę opcję lub filterColumnLabel. Jeśli obie te opcje są obecne, ta opcja ma pierwszeństwo.
Etykietakolumny filtra tekst brak Etykieta kolumny, na której powinien działać filtr. Musisz podać tę opcję lub filterColumnIndex. Jeśli występuje oba, plik filterColumnIndex ma pierwszeństwo.
typ dopasowania tekst „prefiks” Określa, czy element sterujący powinien łączyć się tylko z dokładnymi wartościami ('exact'), od początku wartości ('prefix') czy dowolnego podłańcucha ('any').
Wielkość liter wartość logiczna fałsz Określa, czy w dopasowaniu ma być uwzględniana wielkość liter.
useFormattedValue wartość logiczna fałsz Określa, czy element sterujący powinien być zgodny z wartościami w komórce czy prawdziwymi wartościami.
UI obiekt brak Obiekt z członkami, który służy do konfigurowania różnych aspektów interfejsu sterowania. Aby określić właściwości tego obiektu, możesz użyć notacji literału obiektu, jak tutaj:
{label: 'Name', labelSeparator: ':'}
ui.realtimeTrigger wartość logiczna prawda Określa, czy element sterujący powinien być zgodny z każdym naciśnięciem klawisza czy tylko wtedy, gdy zmieni się pole do wprowadzania danych (strata fokusu lub naciśnięcie klawisza Enter).
ui.label, tekst auto Etykieta wyświetlana obok pola do wprowadzania danych. Jeśli jej nie określisz, zostanie użyta etykieta kolumny, na której działa ten element sterujący.
ui.labelSeparator, tekst brak Ciąg znaków separatora dołączany do etykiety, który wizualnie oddziela etykietę od pola do wprowadzania danych.
UI.labelStacking, tekst „poziome” Określa, czy etykieta powinna się wyświetlać nad stosem pionowym czy poziomym (skumulowane poziomo). Użyj 'vertical' lub 'horizontal'.
ui.cssKlasa tekst „google-visualization-controls-stringfilter” Klasa CSS przypisana do elementu sterującego na potrzeby stylu niestandardowego.