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

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

Обзор

Панели мониторинга — это простой способ организовать и управлять несколькими диаграммами, использующими одни и те же базовые данные. Используя 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 если вы используете диаграмму датчиков) и загружает их на лету без вашего дальнейшего вмешательства.

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

После загрузки 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 eat ),

  • Используйте параметр конфигурации 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() . Затем панель мониторинга будет обновлена ​​в соответствии с запрошенными изменениями.

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

Полная веб-страница
<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

В этом разделе перечислены объекты, предоставляемые API элементов управления и информационных панелей, а также стандартные методы, предоставляемые всеми элементами управления.

Панель приборов

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

Конструктор

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

Методы

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

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

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

Объект 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() ControlWrapper Возвращает глубокую копию оболочки элемента управления.
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 ) Любой тип

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

  • ключ — имя опции для получения. Может быть квалифицированным именем, например 'vAxis.title' .
  • opt_default_value [ Необязательно ] — если указанное значение не определено или равно нулю, это значение будет возвращено.
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() . Никто

ДиаграммаОбертка

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

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

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

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

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

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

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

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

Состояние

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

Параметры

Имя Тип По умолчанию Описание
фильтрКолумнИндекс число никто Столбец таблицы данных, с которой должен работать фильтр. Обязательно укажите эту опцию или filterColumnLabel . Если присутствуют оба параметра, этот параметр имеет приоритет.
FilterColumnLabel нить никто Метка столбца, с которым должен работать фильтр. Обязательно укажите эту опцию или filterColumnIndex . Если оба присутствуют, filterColumnIndex имеет приоритет.
ценности Множество авто Список значений на выбор. Если используется массив объектов, они должны иметь подходящее представление toString() для отображения пользователю. Если значение равно null или не определено, список значений будет автоматически вычисляться на основе значений, присутствующих в столбце DataTable, с которым работает этот элемент управления.
использоватьFormattedValue логическое значение ЛОЖЬ При автоматическом заполнении списка выбираемых значений из столбца DataTable этот фильтр определяет, следует ли использовать фактические значения ячеек или их форматированные значения.
пользовательский интерфейс Объект нулевой Объект с членами для настройки различных аспектов пользовательского интерфейса элемента управления. Чтобы указать свойства этого объекта, вы можете использовать буквальную запись объекта, как показано здесь: 
{label: 'Metric', labelSeparator: ':'}
ui.caption нить «Выберите значение...» Заголовок, отображаемый внутри виджета выбора значения, когда ни один элемент не выбран.
ui.sortValues логическое значение истинный Следует ли сортировать значения для выбора.
ui.selectedValuesLayout нить 'в стороне' Как отобразить выбранные значения, если разрешен множественный выбор. Возможные значения:
  • 'aside' : выбранные значения будут отображаться в одной текстовой строке рядом с виджетом выбора значений,
  • 'below' : выбранные значения будут отображаться в одной текстовой строке под виджетом,
  • 'belowWrapping' : аналогично below , но записи, которые не могут поместиться в средстве выбора, будут перенесены на новую строку,
  • 'belowStacked' : выбранные значения будут отображаться в столбце под виджетом.
ui.allowNone логическое значение истинный Разрешено ли пользователю не выбирать какое-либо значение. Если false пользователь должен выбрать хотя бы одно значение из доступных. Если во время инициализации элемента управления для параметра установлено значение false и не задано состояние selectedValues , автоматически выбирается первое значение из доступных.
ui.allowMultiple логическое значение истинный Можно ли выбрать несколько значений, а не одно.
ui.allowTyping логическое значение истинный Разрешено ли пользователю вводить текстовое поле, чтобы сузить список возможных вариантов (через автозаполнение), или нет.
ui.label нить авто Ярлык, который будет отображаться рядом со средством выбора категории. Если не указано, будет использоваться метка столбца, над которым работает элемент управления.
ui.labelSeparator нить никто К метке добавляется разделительная строка, которая визуально отделяет метку от средства выбора категории.
ui.labelСтекирование нить 'горизонтальный' Должна ли метка отображаться над (вертикальное расположение) или рядом (горизонтальное расположение) средством выбора категории. Используйте либо 'vertical' , либо 'horizontal' .
ui.cssClass нить '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 логическое значение ЛОЖЬ Если это правда, ползунки диапазона привязываются к ближайшим точкам данных. В этом случае конечные точки диапазона, возвращаемого getState() обязательно являются значениями в таблице данных.

События

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

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

DateRangeFilter

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

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

Состояние

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

Параметры

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

NumberRangeFilter

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

Состояние

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

Параметры

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

Строковый фильтр

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

Состояние

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

Параметры

Имя Тип По умолчанию Описание
фильтрКолумнИндекс число никто Столбец таблицы данных, с которой должен работать фильтр. Обязательно укажите эту опцию или filterColumnLabel . Если присутствуют оба параметра, этот параметр имеет приоритет.
FilterColumnLabel нить никто Метка столбца, с которым должен работать фильтр. Обязательно укажите эту опцию или filterColumnIndex . Если оба присутствуют, filterColumnIndex имеет приоритет.
Тип совпадения нить 'префикс' Должен ли элемент управления соответствовать только точным значениям ( 'exact' ), префиксам, начинающимся с начала значения ( 'prefix' ) или любой подстроке ( 'any' ).
с учетом регистра логическое значение ЛОЖЬ Должно ли сопоставление учитывать регистр или нет.
использоватьFormattedValue логическое значение ЛОЖЬ Должен ли элемент управления соответствовать значениям в формате ячейки или фактическим значениям.
пользовательский интерфейс Объект нулевой Объект с членами для настройки различных аспектов пользовательского интерфейса элемента управления. Чтобы указать свойства этого объекта, вы можете использовать буквальную запись объекта, как показано здесь: 
{label: 'Name', labelSeparator: ':'}
ui.realtimeTrigger логическое значение истинный Должен ли элемент управления совпадать при каждом нажатии клавиши или только при «изменении» поля ввода (потеря фокуса или нажатие клавиши Enter).
ui.label нить авто Метка, отображаемая рядом с полем ввода. Если не указано, будет использоваться метка столбца, над которым работает элемент управления.
ui.labelSeparator нить никто К метке добавляется строка-разделитель, которая визуально отделяет метку от поля ввода.
ui.labelСтекирование нить 'горизонтальный' Независимо от того, должна ли этикетка отображаться выше (вертикальное укладку) или рядом с (горизонтальное укладку) поле ввода. Используйте 'vertical' или 'horizontal' .
UI.cssclass нить 'google-visualization-controls-stringfilter' Класс CSS назначить управлению, для пользовательского стиля.