Элементы управления и информационные панели

На этой странице вы увидите, как объединить несколько диаграмм в информационные панели и предоставить пользователям элементы управления для управления отображаемыми данными.

Обзор

Панели мониторинга — это простой способ организации и управления несколькими диаграммами, которые используют одни и те же базовые данные. Используя API-интерфейсы, описанные на этой странице, вы можете освободить себя от бремени связывания и координации всех диаграмм, являющихся частью информационной панели.

Панели мониторинга определяются с помощью классов google.visualization.Dashboard . Экземпляры Dashboard получают DataTable , содержащую данные для визуализации, и заботятся о рисовании и распределении данных по всем диаграммам, являющимся частью информационной панели.

Элементы управления — это виджеты пользовательского интерфейса (такие как средства выбора категорий, ползунки диапазонов, автозаполнения...), с которыми вы взаимодействуете, чтобы управлять данными, управляемыми информационной панелью и диаграммами, которые являются ее частью.

Элементы управления определяются с помощью классов google.visualization.ControlWrapper . Вы можете добавить экземпляры ControlWrapper на панель мониторинга, где они будут вести себя как трубы и клапаны в водопроводной системе. Они собирают пользовательский ввод и используют информацию, чтобы решить, какие данные, которыми управляет панель мониторинга, должны быть доступны для диаграмм, которые являются ее частью.

Взгляните на следующий пример, где средство выбора категории и ползунок диапазона используются для управления данными, визуализируемыми круговой диаграммой.

Примечание. Панель инструментов является интерактивной. Попробуйте использовать элементы управления и посмотрите, как меняется график в режиме реального времени.

Использование элементов управления и информационных панелей

Вот основные шаги по созданию панели мониторинга и ее внедрению на вашу страницу. Ниже вы найдете фрагмент кода, демонстрирующий все эти шаги, а затем подробную информацию о каждом шаге.

  1. Создайте HTML-скелет для панели инструментов . На вашей странице должно быть столько HTML-элементов, сколько необходимо для размещения каждого элемента панели управления. Это включает в себя саму панель инструментов и все элементы управления и диаграммы, которые являются ее частью. Обычно вы будете использовать <div> для каждого из них.
  2. Загрузите свои библиотеки . Для панели мониторинга требуется, чтобы на странице были включены или загружены только две библиотеки: Google AJAX API и пакет controls визуализацией Google.
  3. Подготовьте свои данные . Вам нужно будет подготовить данные для визуализации; это означает либо самостоятельное указание данных в коде, либо запрос данных на удаленный сайт.
  4. Создайте экземпляр информационной панели . Создайте экземпляр своей информационной панели, вызвав ее конструктор и передав ссылку на элемент <div>, который будет ее содержать.
  5. Создавайте столько экземпляров элементов управления и диаграмм, сколько вам нужно . Создайте google.visualization.ChartWrapper и google.visualization.ControlWrapper , чтобы описать каждую диаграмму и элементы управления, которыми управляет панель управления.
  6. Установить зависимости . Вызовите bind() на панели управления и передайте экземпляры элементов управления и диаграммы, чтобы панель управления знала, чем управлять. Как только элемент управления и диаграмма связаны вместе, панель мониторинга обновляет диаграмму в соответствии с ограничениями, которые элемент управления налагает на данные.
  7. Нарисуйте свою приборную панель . Вызовите функцию draw() на панели инструментов и передайте свои данные, чтобы отобразить всю панель инструментов на странице.
  8. Программные изменения после розыгрыша . При желании после первоначального рисования вы можете программно управлять элементами управления, которые являются частью информационной панели, и в ответ на это панель обновляет диаграммы.

Вот простой пример страницы, которая создает простую панель мониторинга с ползунком диапазона, управляющим круговой диаграммой. Полученная информационная панель показана под фрагментом.

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

Вот панель мониторинга, которую создает этот код.

1. Создайте HTML-скелет для панели управления

На вашей странице должно быть столько HTML-элементов (обычно <div>), чтобы содержать как саму панель инструментов, так и все ее элементы управления и диаграммы. При создании экземпляров панели мониторинга, элемента управления и диаграммы необходимо передать ссылку на их элемент, поэтому назначьте идентификатор каждому элементу 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>

Вы можете расположить каждый HTML-элемент так, как хотите, чтобы панель управления выглядела.

2. Загрузите свои библиотеки

Для панели мониторинга требуется, чтобы на странице были включены или загружены только две библиотеки: Google AJAX API и пакет controls визуализацией Google. API (в частности, google.visualization.ChartWrapper ) автоматически определяет другие необходимые пакеты (например, gauge , если вы используете диаграмму Gauge) и загружает их на лету без дальнейшего вмешательства с вашей стороны.

Вы должны использовать 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. Подготовьте свои данные

Когда Visualization API будет загружен, google.charts.setOnLoadCallback() вызовет вашу функцию-обработчик, чтобы вы знали, что все необходимые вспомогательные методы и классы будут готовы для начала подготовки ваших данных.

Dashboards принимает данные в DataTable так же, как диаграммы.

4. Создайте экземпляр панели инструментов

После того, как вы создали свои данные, вы можете создать экземпляр объекта панели мониторинга. Конструктор информационной панели принимает один параметр: ссылку на элемент DOM, в котором нужно отобразить информационную панель.

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

Панели мониторинга представлены как класс Javascript. После создания панели мониторинга вы можете выполнить несколько необязательных действий, таких как добавление прослушивателей событий (например, чтобы получать уведомления, как только панель мониторинга будет «готова»). Инструментальные панели обрабатывают события так же, как и диаграммы, поэтому для получения дополнительной информации обратитесь к разделу « Обработка событий визуализации » или « Красивое отображение ошибок » в разделе диаграммы.

5. Создайте экземпляры элементов управления и диаграмм

Определите столько экземпляров, сколько вам нужно для каждого элемента управления и диаграммы, которые будут частью информационной панели. Используйте google.visualization.ChartWrapper и google.visualization.ControlWrapper для определения диаграмм и элементов управления соответственно.

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

При создании ChartWrapper и ControlWrapper не указывайте ни параметр dataTable , ни параметр dataSourceUrl . Панель инструментов позаботится о том, чтобы предоставить каждому из них соответствующие данные. Однако обязательно укажите необходимые параметры: chartType и containerId для диаграмм, controlType и containerId для элементов управления.

Несколько советов по настройке элементов управления и диаграмм:

  • Вы должны указать всем элементам управления filterColumnIndex (или filterColumnLabel ), чтобы указать, с каким столбцом вашего google.visualization.DataTable работает элемент управления (в приведенном выше примере элемент управления работает со столбцом с надписью Donuts eated ).

  • Используйте параметр конфигурации state для элементов управления, чтобы инициализировать их с явным состоянием при первом отображении. Например, используйте этот параметр, чтобы зафиксировать начальные положения бегунков ползунка диапазона.

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

  • Все диаграммы, являющиеся частью информационной панели, используют одну и ту же базовую таблицу данных, которую вы подготовили на этапе « Подготовка данных ». Однако для правильного отображения диаграмм часто требуется определенное расположение столбцов: например, круговой диаграмме требуется строковый столбец для метки, за которым следует числовой столбец для значения.

    Используйте параметр view при настройке каждого экземпляра ChartWrapper , чтобы объявить, какие столбцы относятся к диаграмме, как в следующем примере.

      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. Установите зависимости

После создания экземпляра панели мониторинга и всех элементов управления и диаграмм, которые будут ее частью, используйте метод bind() , чтобы сообщить панели мониторинга зависимости, существующие между элементами управления и диаграммами.

Как только элемент управления и диаграмма связаны вместе, панель мониторинга обновляет диаграмму в соответствии с ограничениями, которые элемент управления налагает на данные. В создаваемом примере панели мониторинга ползунок диапазона и круговая диаграмма связаны вместе, поэтому всякий раз, когда вы взаимодействуете с первым, последний обновляется, чтобы отображать только данные, соответствующие выбранному диапазону.

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

Вы можете привязывать элементы управления и диаграммы во многих различных конфигурациях: один к одному, один ко многим, многие к одному и многие ко многим. Всякий раз, когда к диаграмме привязываются несколько элементов управления, панель мониторинга обновляет диаграмму в соответствии с комбинированными ограничениями, применяемыми всеми связанными элементами управления. В то же время элемент управления может управлять несколькими диаграммами одновременно. Чтобы указать несколько привязок одновременно, передайте массивы методу bind() вместо отдельных экземпляров. Вы также можете связать несколько вызовов bind() вместе. Вот несколько примеров.

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

Для расширенного использования вы также можете привязать элементы управления к другим элементам управления, чтобы установить цепочки зависимостей. .

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

7. Нарисуйте панель инструментов

Вызовите метод draw() для экземпляра панели мониторинга, чтобы визуализировать всю панель мониторинга. Метод draw() принимает только один параметр: DataTable (или DataView ), который управляет панелью инструментов.

Вы должны вызывать draw() каждый раз, когда вы изменяете состав информационной панели (например, добавляя к ней новые элементы управления или диаграммы) или когда вы изменяете общую DataTable , которая ее поддерживает.

Экземпляр информационной панели запускает событие ready всякий раз, когда метод draw() завершает отрисовку всех элементов управления и диаграмм, являющихся его частью. Событие error запускается, если какой-либо из управляемых элементов управления или диаграммы не удается отрисовать. Дополнительные сведения об обработке событий см. в разделе Обработка событий .

Примечание. Перед попыткой изменить композицию панели мониторинга или отрисовать ее снова следует прослушивать событие ready .

8. Программные изменения после розыгрыша

Как только панель инструментов завершит начальное draw() , она будет запущена и автоматически будет реагировать на любое действие, которое вы на ней выполняете (например, изменение выбранного диапазона ползунка управления, являющегося частью панели инструментов).

Если вам нужно программно изменить состояние информационной панели, вы можете сделать это, работая непосредственно с экземплярами ControlWrapper и ChartWrapper , которые являются ее частью. Эмпирическое правило состоит в том, чтобы выполнять любые необходимые изменения непосредственно в конкретном экземпляре ControlWrapper (или ChartWrapper ): например, изменить параметр управления или состояние с помощью setOption() и setState() соответственно, а затем вызвать его метод draw() . После этого панель мониторинга обновится в соответствии с запрошенными изменениями.

В следующем примере показан такой случай.

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <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> 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 type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <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> 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(); }; }
Полная веб-страница
<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

В этом разделе перечислены объекты, предоставляемые Controls and Dashboards API, а также стандартные методы, предоставляемые всеми элементами управления.

Приборная доска

Представляет набор взаимодействующих элементов управления и диаграмм, использующих одни и те же базовые данные.

Конструктор

Dashboard(containerRef)
containerRef
Ссылка на действительный элемент-контейнер на странице, в котором будет храниться содержимое информационной панели.

Методы

Dashboard предоставляет следующие методы:

Метод Тип возврата Описание
bind( controls , charts ) google.visualization.Dashboard

Привязывает один или несколько элементов управления к одному или нескольким другим участникам панели мониторинга (диаграммам или другим элементам управления), чтобы все последние перерисовывались всякий раз, когда любой из первых собирает программные действия или взаимодействия с пользователем, влияющие на данные, управляемые панелью мониторинга. Возвращает сам экземпляр информационной панели для объединения нескольких вызовов bind() .

  • элементы управления — либо один экземпляр, либо массив экземпляров google.visualization.ControlWrapper , определяющих элементы управления для привязки.
  • диаграммы — либо один, либо массив экземпляров google.visualization.ChartWrapper , определяющих диаграммы, которые будут управляться элементами управления.
draw( dataTable ) Никто

Рисует приборную панель.

  • dataTable — любое из следующего: объект DataTable ; объект DataView ; JSON-представление DataTable; или массив, следующий синтаксису google.visualization.arrayToDataTable() .
getSelection() Массив объектов

Возвращает массив выбранных визуальных объектов диаграмм на информационной панели. Метод getSelection() при вызове на информационной панели возвращает совокупность всех выборок, сделанных на всех диаграммах внутри нее, что позволяет использовать единую ссылку при работе с выборками диаграмм.

Примечание. Прослушиватели событий для выбранного события по-прежнему необходимо прикреплять к каждой диаграмме, которую вы хотите прослушивать.

Расширенное описание

События

Объект Dashboard вызывает следующие события. Обратите внимание, что вы должны вызвать Dashboard.draw() до того, как будут выброшены какие-либо события.

Имя Описание Характеристики
error Запускается, когда возникает ошибка при попытке отобразить панель мониторинга. Один или несколько элементов управления и диаграмм, являющихся частью информационной панели, могли не отобразиться. идентификатор, сообщение
ready

Приборная панель завершила отрисовку и готова к принятию изменений. Все элементы управления и диаграммы, являющиеся частью информационной панели, готовы к внешнему вызову методов и взаимодействию с пользователем. Если вы хотите изменить панель мониторинга (или данные, которые она отображает) после ее рисования, вам следует настроить прослушиватель для этого события до вызова метода draw , а затем применить ваши изменения только после запуска события.

ready событие также сработает:

  • после завершения обновления панели мониторинга, вызванного пользователем или программным взаимодействием с одним из элементов управления,
  • после программного вызова метода draw() любой части диаграммы на приборной панели.
 Никто

КонтролВраппер

Объект ControlWrapper представляет собой оболочку JSON-представления сконфигурированного экземпляра элемента управления. Класс предоставляет удобные методы для определения элемента управления информационной панели, его рисования и программного изменения его состояния.

Конструктор

ControlWrapper(opt_spec)
opt_spec
[ Необязательный ] — либо объект JSON, определяющий элемент управления, либо сериализованная строковая версия этого объекта. Поддерживаемые свойства объекта JSON показаны в следующей таблице. Если они не указаны, вы должны установить все соответствующие свойства, используя методы set... , предоставляемые ControlWrapper.
Имущество Тип Необходимый По умолчанию Описание
тип управления Нить Необходимый никто Имя класса элемента управления. Имя пакета google.visualization можно не указывать для элементов управления Google. Примеры: CategoryFilter , NumberRangeFilter .
идентификатор контейнера Нить Необходимый никто Идентификатор элемента DOM на вашей странице, в котором будет размещаться элемент управления.
опции Объект По желанию никто Объект, описывающий параметры элемента управления. Вы можете использовать литеральную нотацию JavaScript или указать дескриптор объекта. Пример: "options": {"filterColumnLabel": "Age", "minValue": 10, "maxValue": 80}
государство Объект По желанию никто Объект, описывающий состояние элемента управления. Состояние собирает все переменные, на которые может повлиять пользователь, работающий с элементом управления. Например, состояние ползунка диапазона можно описать в терминах позиций, которые занимают нижний и верхний большой палец ползунка. Вы можете использовать литеральную нотацию Javascript или указать дескриптор объекта. Пример: "state": {"lowValue": 20, "highValue": 50}

Методы

ControlWrapper предоставляет следующие дополнительные методы:

Метод Тип возврата Описание
draw() Никто

Рисует элемент управления. Обычно приборная панель, на которой находится элемент управления, берет на себя его отрисовку. Вы должны вызвать draw() , чтобы вызвать программную перерисовку элемента управления после того, как вы измените любые другие его настройки, такие как параметры или состояние.

toJSON() Нить Возвращает строковую версию JSON-представления элемента управления.
clone() КонтролВраппер Возвращает глубокую копию оболочки элемента управления.
getControlType() Нить Имя класса элемента управления. Если это элемент управления Google, имя не будет google.visualization . Так, например, если бы это был элемент управления CategoryFilter, он вернул бы «CategoryFilter», а не «google.visualization.CategoryFilter».
getControlName() Нить Возвращает имя элемента управления, назначенное setControlName() .
getControl() Ссылка на объект управления Возвращает ссылку на элемент управления, созданный этим ControlWrapper. Это будет возвращать значение null до тех пор, пока вы не вызовете функцию draw() для объекта ControlWrapper (или на удерживающей его приборной панели), и он вызовет событие готовности. Возвращенный объект предоставляет только один метод: resetControl() , который сбрасывает состояние элемента управления до того, с которым он был инициализирован (например, сброс элемента формы HTML).
getContainerId() Нить Идентификатор элемента контейнера DOM элемента управления.
getOption( key , opt_default_val ) Любой тип

Возвращает указанное значение параметра управления

  • key - имя параметра для получения. Может быть полным именем, например 'vAxis.title' .
  • opt_default_value [ Необязательный ] — если указанное значение не определено или равно null, будет возвращено это значение.
getOptions() Объект Возвращает объект параметров для этого элемента управления.
getState() Объект Возвращает состояние элемента управления.
setControlType( type ) Никто Устанавливает тип управления. Передайте имя класса элемента управления для создания экземпляра. Если это элемент управления Google, не уточняйте его с помощью google.visualization . Так, например, для ползунка диапазона над числовым столбцом передайте «NumberRangeFilter».
setControlName( name ) Никто Задает произвольное имя для элемента управления. Это нигде не показано на элементе управления, а только для справки.
setContainerId( id ) Никто Задает идентификатор содержащего DOM-элемента для элемента управления.
setOption( key , value ) Никто Задает значение одного параметра управления, где ключ — это имя параметра, а значение — значение. Чтобы отключить параметр, передайте значение null в качестве значения. Обратите внимание, что ключ может быть полным именем, например 'vAxis.title' .
setOptions( options_obj ) Никто Задает полный объект параметров для элемента управления.
setState(state_obj) Никто Задает состояние управления. Состояние собирает все переменные, на которые может повлиять пользователь, работающий с элементом управления. Например, состояние ползунка диапазона можно описать в терминах позиций, которые занимают нижний и верхний большой палец ползунка.

События

Объект ControlWrapper генерирует следующие события. Обратите внимание, что вы должны вызвать ControlWrapper.draw() (или нарисовать панель инструментов, содержащую элемент управления), прежде чем будут сгенерированы какие-либо события.

Имя Описание Характеристики
error Запускается, когда возникает ошибка при попытке отобразить элемент управления. идентификатор, сообщение
ready Элемент управления готов принять взаимодействие с пользователем и вызовы внешних методов. Если вы хотите взаимодействовать с элементом управления и вызывать методы после его рисования, вы должны настроить прослушиватель для этого события перед вызовом метода draw и вызывать их только после того, как событие было запущено. В качестве альтернативы вы можете прослушивать событие ready на панели инструментов, удерживая методы управления и управления вызовами только после того, как событие было запущено. Никто
statechange Запускается, когда пользователь взаимодействует с элементом управления, влияя на его состояние. Например, statechange изменения состояния будет срабатывать всякий раз, когда вы перемещаете ползунок диапазона. Чтобы получить обновленное состояние элемента управления после запуска события, вызовите ControlWrapper.getState() . Никто

ChartWrapper

См. документацию google.visualization.ChartWrapper в справочном разделе по API визуализаций.

Следующие примечания применимы при использовании ChartWrapper как части информационной панели:

  • Не устанавливайте dataTable , query , dataSourceUrl и refreshInterval явно. Приборная панель, содержащая диаграмму, позаботится о том, чтобы предоставить ей необходимые данные.
  • Установите его атрибут view , чтобы объявить, какие столбцы из всех представленных в dataTable , переданных на панель инструментов, имеют отношение к диаграмме, как показано в разделе Создание экземпляров элемента управления и диаграммы .

Фильтры — это графические элементы, которые люди могут использовать для интерактивного выбора данных, отображаемых на диаграмме. В этом разделе описываются фильтры Google Chart: CategoryFilter , ChartRangeFilter , DateRangeFilter , NumberRangeFilter и StringFilter .

Вы можете использовать любой из них в качестве параметра для ControlWrapper.setControlType() .

Примечание. При описании параметров для описания атрибутов вложенных объектов используется нотация через точку. Например, параметр с именем 'ui.label' должен быть объявлен в объекте параметров как var options = {"ui": {"label": "someLabelValue"} };

КатегорияФильтр

Средство выбора для выбора одного или нескольких из набора определенных значений.

Состояние

Имя Тип По умолчанию Описание
выбранные значения Массив объектов или примитивных типов никто Текущий набор значений. Выбранные значения должны быть набором общих выбираемых значений, определенных параметром values ​​(любое лишнее будет игнорироваться). Если CategoryFilter не допускает множественный выбор, сохраняется только первое значение массива.

Опции

Имя Тип По умолчанию Описание
индекс столбца фильтра количество никто Столбец datatable, с которым должен работать фильтр. Обязательно укажите либо этот параметр, либо filterColumnLabel . Если оба присутствуют, этот вариант имеет приоритет.
filterColumnLabel нить никто Метка столбца, с которым должен работать фильтр. Обязательно укажите либо этот параметр, либо filterColumnIndex . Если оба присутствуют, filterColumnIndex имеет приоритет.
ценности Множество авто Список значений на выбор. Если используется массив объектов, они должны иметь подходящее представление toString() для отображения пользователю. Если значение равно null или не определено, список значений будет автоматически вычисляться из значений, представленных в столбце DataTable, с которым работает этот элемент управления.
использованиеформатедвалуе логический ЛОЖЬ При автоматическом заполнении списка выбираемых значений из столбца DataTable этот фильтр работает, независимо от того, следует ли использовать фактические значения ячеек или их отформатированные значения.
пользовательский интерфейс Объект нулевой Объект с элементами для настройки различных аспектов пользовательского интерфейса элемента управления. Чтобы указать свойства этого объекта, вы можете использовать литеральную нотацию объекта, как показано здесь: 
{label: 'Metric', labelSeparator: ':'}
ui.caption нить 'Выберите значение...' Заголовок, отображаемый внутри виджета выбора значений, когда не выбран ни один элемент.
ui.sortValues логический истинный Следует ли сортировать значения для выбора.
ui.selectedValuesLayout нить 'в сторону' Как отображать выбранные значения, когда разрешен множественный выбор. Возможные значения:
  • 'aside' : выбранные значения будут отображаться в одной текстовой строке рядом с виджетом выбора значений,
  • 'below' : выбранные значения будут отображаться в одной текстовой строке под виджетом,
  • 'belowWrapping' : аналогично below , но записи, которые не помещаются в средстве выбора, будут перенесены на новую строку,
  • 'belowStacked' : выбранные значения будут отображаться в столбце под виджетом.
ui.allowНет логический истинный Разрешено ли пользователю не выбирать любое значение. Если false , пользователь должен выбрать хотя бы одно значение из доступных. Во время инициализации элемента управления, если для параметра установлено значение false и не задано состояние selectedValues , автоматически выбирается первое значение из доступных.
ui.allowНесколько логический истинный Можно ли выбрать несколько значений вместо одного.
ui.allowВвод логический истинный Разрешено ли пользователю вводить текстовое поле, чтобы сузить список возможных вариантов (с помощью автозаполнения), или нет.
ui.метка нить авто Метка, отображаемая рядом с выбором категории. Если не указано, будет использоваться метка столбца, с которым работает элемент управления.
ui.labelSeparator нить никто Строка-разделитель, добавленная к метке, чтобы визуально отделить метку от средства выбора категории.
ui.labelСтэкинг нить 'горизонтальный' Должна ли метка отображаться над (вертикальное расположение) или рядом (горизонтальное расположение) средства выбора категории. Используйте 'vertical' или 'horizontal' .
ui.cssкласс нить 'google-visualization-controls-categoryfilter' Класс CSS для назначения элементу управления для пользовательского стиля.

ДиаграммаДиапазонФильтр

Ползунок с двумя ползунками, наложенными на диаграмму, для выбора диапазона значений на непрерывной оси диаграммы.

Состояние

Имя Тип По умолчанию Описание
диапазон.старт число, дата, дата/время или время дня Начальное значение диапазона Начало выбранного диапазона включительно.
диапазон.конец число, дата, дата/время или время дня Конечное значение диапазона Конец выбранного диапазона включительно.

Опции

Имя Тип По умолчанию Описание
индекс столбца фильтра количество никто Индекс столбца в таблице данных, с которым работает фильтр. Обязательно укажите либо этот параметр, либо filterColumnLabel . Если присутствуют оба, этот вариант имеет приоритет.

Обратите внимание, что имеет смысл указывать только индекс столбца домена , воплощенного в непрерывной оси диаграммы, нарисованной внутри элемента управления.

filterColumnLabel нить никто Метка столбца таблицы данных, с которой работает фильтр. Обязательно укажите либо этот параметр, либо filterColumnIndex . Если оба присутствуют, filterColumnIndex имеет приоритет.

Обратите внимание, что имеет смысл указывать только метку столбца предметной области , которая воплощена на непрерывной оси диаграммы, нарисованной внутри элемента управления.

пользовательский интерфейс Объект нулевой Объект с элементами для настройки различных аспектов пользовательского интерфейса элемента управления. Чтобы указать свойства этого объекта, вы можете использовать литеральную нотацию объекта, как показано здесь: 
{chartType: 'ScatterChart', chartOptions: {pointSize: 10}}
ui.chartType нить 'КомбоДиаграмма' Тип диаграммы, нарисованной внутри элемента управления.
Может быть одним из: «AreaChart», «LineChart», «ComboChart» или «ScatterChart».
ui.chartOptions Объект 
{
 'enableInteractivity': false,
 'chartArea': {'height': '100%'},
 'legend': {'position': 'none'},
 'hAxis': {'textPosition': 'in'},
 'vAxis': {
  'textPosition': 'none',
  'gridlines': {'color': 'none'}
 }
}
Параметры конфигурации диаграммы, нарисованной внутри элемента управления. Позволяет тот же уровень конфигурации, что и любая диаграмма на панели инструментов, и соответствует тому же формату, который принят ChartWrapper.setOptions() .

Вы можете указать дополнительные параметры или переопределить параметры по умолчанию (обратите внимание, что значения по умолчанию были тщательно выбраны для оптимального внешнего вида).

ui.chartView Объект или строка (сериализованный объект) нулевой Спецификация представления для применения к таблице данных, используемой для рисования диаграммы внутри элемента управления. Допускает тот же уровень конфигурации, что и любая диаграмма на панели инструментов, и соответствует тому же формату, который принят ChartWrapper.setView() . Если не указано иное, для построения диаграммы используется сама таблица данных.

Обратите внимание, что горизонтальная ось нарисованного графика должна быть непрерывной , поэтому будьте внимательны при указании ui.chartView соответствующим образом.

ui.minRangeSize количество Разница значений данных интерпретируется как 1 пиксель Минимальный выбираемый размер диапазона ( range.end - range.start ), указанный в единицах измерения значения данных. Для числовой оси это число (не обязательно целое). Для оси даты, даты и времени или времени дня это целое число, указывающее разницу в миллисекундах.
ui.snapToData логический ЛОЖЬ Если true, бегунки диапазона привязываются к ближайшим точкам данных. В этом случае конечные точки диапазона, возвращаемого getState() , обязательно являются значениями в таблице данных.

События

Дополнения к событиям ControlWrapper :

Имя Описание Характеристики
statechange То же, что задокументировано для каждого ControlWrapper, только имеет дополнительное логическое свойство inProgress , которое указывает, изменяется ли состояние в данный момент (перетаскивается либо один из ползунков, либо сам диапазон). в ходе выполнения

DateRangeFilter

Двойной ползунок для выбора диапазонов дат.

Попробуйте переместить ползунок, чтобы изменить строки, отображаемые в таблице ниже.

Состояние

Имя Тип По умолчанию Описание
низкое значение количество никто Нижняя граница выбранного диапазона включительно.
высокое значение количество никто Наивысшая степень выбранного диапазона включительно.
lowThumbAtMinimum логический никто Блокируется ли нижний палец ползунка в минимально допустимом диапазоне. Если установлено, переопределяет lowValue .
highThumbAtMaximum логический никто Заблокирован ли верхний большой палец ползунка в максимально допустимом диапазоне. Если установлено, переопределяет highValue .

Опции

Имя Тип По умолчанию Описание
индекс столбца фильтра количество никто Столбец datatable, с которым должен работать фильтр. Обязательно укажите либо этот параметр, либо filterColumnLabel . Если оба присутствуют, этот вариант имеет приоритет. Должен указывать на столбец с number типа .
filterColumnLabel нить никто Метка столбца, с которым должен работать фильтр. Обязательно укажите либо этот параметр, либо filterColumnIndex . Если оба присутствуют, filterColumnIndex имеет приоритет. Должен указывать на столбец с number типа .
минимальное значение Свидание авто Минимально допустимое значение для нижней границы диапазона. Если не определено, значение будет выводиться из содержимого DataTable, управляемого элементом управления.
максимальное значение Свидание авто Максимально допустимое значение для верхнего предела диапазона. Если не определено, значение будет выводиться из содержимого DataTable, управляемого элементом управления.
пользовательский интерфейс Объект нулевой Объект с элементами для настройки различных аспектов пользовательского интерфейса элемента управления. Чтобы указать свойства этого объекта, вы можете использовать литеральную нотацию объекта, как показано здесь: 
{label: 'Age', labelSeparator: ':'}
формат пользовательского интерфейса Объект никто Как представить дату в виде строки. Принимает любой допустимый формат даты .
пользовательский интерфейс нить день Минимально возможное изменение при перетаскивании бегунков ползунка: может быть любая единица времени до «дня». ("месяц" и "год" пока не поддерживаются.)
ui.ticks количество авто Количество тиков (фиксированные позиции в полосе диапазона), которые могут занимать бегунки ползунка.
ui.unitIncrement нить '1' Величина приращения для единичных приращений экстентов диапазона. Единичное приращение эквивалентно использованию клавиш со стрелками для перемещения ползунка.
ui.blockIncrement количество 10 Величина приращения для блочных приращений экстентов диапазона. Увеличение блока эквивалентно использованию клавиш pgUp и pgDown для перемещения бегунков ползунка.
ui.showRangeValues логический истинный Должны ли быть метки рядом с ползунком, отображающие экстенты выбранного диапазона.
ui.ориентация нить 'горизонтальный' Ориентация слайдера. Либо 'horizontal' либо 'vertical' .
ui.метка нить авто Метка, отображаемая рядом с ползунком. Если не указано, будет использоваться метка столбца, с которым работает элемент управления.
ui.labelSeparator нить никто Строка-разделитель, добавленная к метке, чтобы визуально отделить метку от ползунка.
ui.labelСтэкинг нить 'горизонтальный' Должна ли метка отображаться над (вертикальное расположение) или рядом (горизонтальное расположение) ползунка. Используйте 'vertical' или 'horizontal' .
ui.cssкласс нить 'google-visualization-controls-rangefilter' Класс CSS для назначения элементу управления для пользовательского стиля.

NumberRangeFilter

Двойной ползунок для выбора диапазонов числовых значений.

Состояние

Имя Тип По умолчанию Описание
низкое значение количество никто Нижняя граница выбранного диапазона включительно.
высокое значение количество никто Наивысшая степень выбранного диапазона включительно.
lowThumbAtMinimum логический никто Блокируется ли нижний палец ползунка в минимально допустимом диапазоне. Если установлено, переопределяет lowValue .
highThumbAtMaximum логический никто Заблокирован ли верхний большой палец ползунка в максимально допустимом диапазоне. Если установлено, переопределяет highValue .

Опции

Имя Тип По умолчанию Описание
индекс столбца фильтра количество никто Столбец datatable, с которым должен работать фильтр. Обязательно укажите либо этот параметр, либо filterColumnLabel . Если оба присутствуют, этот вариант имеет приоритет. Должен указывать на столбец с number типа .
filterColumnLabel нить никто Метка столбца, с которым должен работать фильтр. Обязательно укажите либо этот параметр, либо filterColumnIndex . Если оба присутствуют, filterColumnIndex имеет приоритет. Должен указывать на столбец с number типа .
минимальное значение количество авто Минимально допустимое значение для нижней границы диапазона. Если не определено, значение будет выводиться из содержимого DataTable, управляемого элементом управления.
максимальное значение количество авто Максимально допустимое значение для верхнего предела диапазона. Если не определено, значение будет выводиться из содержимого DataTable, управляемого элементом управления.
пользовательский интерфейс Объект нулевой Объект с элементами для настройки различных аспектов пользовательского интерфейса элемента управления. Чтобы указать свойства этого объекта, вы можете использовать литеральную нотацию объекта, как показано здесь: 
{label: 'Age', labelSeparator: ':'}
формат пользовательского интерфейса Объект никто Как представить число в виде строки. Принимает любой допустимый числовой формат .
пользовательский интерфейс количество 1 или вычисляется из ticks , если определено Минимально возможное изменение при перетаскивании бегунков ползунка.
ui.ticks количество авто Количество тиков (фиксированные позиции в полосе диапазона), которые могут занимать бегунки ползунка.
ui.unitIncrement количество 1 Величина приращения для единичных приращений экстентов диапазона. Единичное приращение эквивалентно использованию клавиш со стрелками для перемещения ползунка.
ui.blockIncrement количество 10 Величина приращения для блочных приращений экстентов диапазона. Увеличение блока эквивалентно использованию клавиш pgUp и pgDown для перемещения бегунков ползунка.
ui.showRangeValues логический истинный Должны ли быть метки рядом с ползунком, отображающие экстенты выбранного диапазона.
ui.ориентация нить 'горизонтальный' Ориентация слайдера. Либо 'horizontal' либо 'vertical' .
ui.метка нить авто Метка, отображаемая рядом с ползунком. Если не указано, будет использоваться метка столбца, с которым работает элемент управления.
ui.labelSeparator нить никто Строка-разделитель, добавленная к метке, чтобы визуально отделить метку от ползунка.
ui.labelСтэкинг нить 'горизонтальный' Должна ли метка отображаться над (вертикальное расположение) или рядом (горизонтальное расположение) ползунка. Используйте 'vertical' или 'horizontal' .
ui.cssкласс нить 'google-visualization-controls-rangefilter' Класс CSS для назначения элементу управления для пользовательского стиля.

StringFilter

Простое поле ввода текста, позволяющее фильтровать данные с помощью сопоставления строк. Он обновляется после каждого нажатия клавиши: попробуйте ввести j , чтобы сузить таблицу ниже до Джона и Джессики.

Состояние

Имя Тип По умолчанию Описание
ценность строка или объект никто Текст, введенный в данный момент в поле ввода элемента управления.

Опции

Имя Тип По умолчанию Описание
индекс столбца фильтра количество никто Столбец datatable, с которым должен работать фильтр. Обязательно укажите либо этот параметр, либо filterColumnLabel . Если оба присутствуют, этот вариант имеет приоритет.
filterColumnLabel нить никто Метка столбца, с которым должен работать фильтр. Обязательно укажите либо этот параметр, либо filterColumnIndex . Если оба присутствуют, filterColumnIndex имеет приоритет.
тип соответствия нить 'префикс' Должен ли элемент управления соответствовать только точным значениям ( 'exact' ), префиксам, начинающимся с начала значения ( 'prefix' ), или любой подстроке ( 'any' ).
деликатный случай логический ЛОЖЬ Должен ли сопоставление быть чувствительным к регистру или нет.
использованиеформатедвалуе логический ЛОЖЬ Whether the control should match against cell formatted values or againt actual values.
ui Object null An object with members to configure various aspects of the control's UI. To specify properties of this object, you can use object literal notation, as shown here: 
{label: 'Name', labelSeparator: ':'}
ui.realtimeTrigger логический истинный Whether the control should match any time a key is pressed or only when the input field 'changes' (loss of focus or pressing the Enter key).
ui.label нить авто The label to display next to the input field. If unspecified, the label of the column the control operates on will be used.
ui.labelSeparator нить никто A separator string appended to the label, to visually separate the label from the input field.
ui.labelStacking нить 'horizontal' Whether the label should display above (vertical stacking) or beside (horizontal stacking) the input field. Use either 'vertical' or 'horizontal' .
ui.cssClass нить 'google-visualization-controls-stringfilter' The CSS class to assign to the control, for custom styling.