Панель инструментов

  1. Обзор
  2. Пример
  3. Применение
    1. Типы вывода
    2. Синтаксис
  4. Политика данных

Обзор

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

Автор: Google

Пример

Выберите один из вариантов на панели инструментов. 

<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']});
    var visualization;

    function draw() {
      drawVisualization();
      drawToolbar();
    }

    function drawVisualization() {
      var container = document.getElementById('visualization_div');
      visualization = new google.visualization.PieChart(container);
      new google.visualization.Query('https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA').
          send(queryCallback);
    }

    function queryCallback(response) {
      visualization.draw(response.getDataTable(), {is3D: true});
    }

    function drawToolbar() {
      var components = [
          {type: 'igoogle', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA',
           gadget: 'https://www.google.com/ig/modules/pie-chart.xml',
           userprefs: {'3d': 1}},
          {type: 'html', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'},
          {type: 'csv', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'},
          {type: 'htmlcode', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA',
           gadget: 'https://www.google.com/ig/modules/pie-chart.xml',
           userprefs: {'3d': 1},
           style: 'width: 800px; height: 700px; border: 3px solid purple;'}
      ];

      var container = document.getElementById('toolbar_div');
      google.visualization.drawToolbar(container, components);
    };

    google.charts.setOnLoadCallback(draw);
  </script>
</head>
<body>
  <div id="visualization_div" style="width: 270px; height: 200px;"></div>
  <div id="toolbar_div"></div>
</body>
</html>

Применение

Добавьте панель инструментов на свою страницу, вызвав метод google.visualization.drawToolbar() , заполнив его разрешенными типами экспорта и данными, необходимыми для каждого.

Чтобы использовать панель инструментов, ваша визуализация должна получить данные из URL-адреса; вы не можете передавать заполненные вручную объекты DataTable или DataView. Вы передадите URL-адрес данных, используемых для заполнения вашей визуализации, в метод drawToolbar() .

Если вы хотите предоставить компонент iGoogle или встраиваемый iFrame, содержащий гаджет, у вас должен быть URL-адрес для гаджет-версии визуализации.

Типы вывода

Панель инструментов может предлагать пользователю выбор одного или нескольких следующих типов вывода, в зависимости от того, как вы настраиваете панель инструментов в методе drawToolbar() :

  • Простая версия данных в формате CSV (которую ваш браузер либо отобразит, либо предложит загрузить и сохранить, в зависимости от конфигурации вашего браузера и/или
  • HTML-таблица, содержащая данные, открытая в новом окне браузера и/или
  • HTML-код <iframe> для встраивания этой визуализации на веб-страницу и/или
  • Ссылка на страницу, позволяющая пользователю встроить этот гаджет на свою страницу iGoogle.

Синтаксис

google.visualization.drawToolbar(container, components)

Параметры

контейнер
Дескриптор элемента DOM на странице. API отобразит панель инструментов в этом элементе. Это похоже на параметр контейнера для стандартной визуализации. Вам следует поместить панель инструментов рядом с визуализацией, которая ее использует.
компоненты
Массив объектов, каждый из которых описывает формат, в который можно экспортировать данные или визуализацию. Панель инструментов будет предоставлять пользователю параметры в порядке их добавления в массив. Каждый объект имеет свойство типа, описывающее формат, а также одно или несколько дополнительных свойств, в зависимости от типа:
  • type: 'csv' — этот параметр экспортирует данные в файл значений, разделенных запятыми. В браузере откроется диалоговое окно «Сохранить как».
    • datasource : ' string ' — URL-адрес источника данных.
  • type: html' — эта опция экспортирует данные в таблицу HTML. Страница с таблицей данных откроется в новом окне браузера.
    • datasource : строка URL-адреса источника данных.
  • type: igoogle — этот параметр позволяет пользователю добавить визуализацию на свою страницу iGoogle. В браузере откроется страница «Добавить в iGoogle». Используйте это только в том случае, если визуализация доступна в гаджет-версии.
    • datasource : строка URL-адреса источника данных.
    • гаджет : XML-строка URL-адреса гаджетизированной версии. Обратите внимание, что визуализация, с которой связана панель инструментов, не обязательно должна быть версией гаджета.
    • userprefs : необязательный объект настроек, соответствующий этой визуализации, определяющий настройки визуализации.
  • type: htmlcode — этот параметр создает блок HTML-кода, который пользователь может встроить в веб-страницу для отображения визуализации внутри iframe. В браузере откроется всплывающее окно с точным HTML-элементом гаджета. Используйте это только в том случае, если визуализация доступна в гаджет-версии.
    • datasource : строка URL-адреса источника данных.
    • гаджет : XML-строка URL-адреса гаджета.
    • userprefs : необязательный объект настроек, соответствующий этой визуализации, определяющий настройки визуализации.
    • style : необязательная строка для стиля iframe. Например: 'ширина: 300 пикселей; высота: 500 пикселей;'.

Пример

function drawToolbar() {
  var components = [
      {type: 'igoogle', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA',
       gadget: 'https://www.google.com/ig/modules/pie-chart.xml',
       userprefs: {'3d': 1}},
      {type: 'html', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'},
      {type: 'csv', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'},
      {type: 'htmlcode', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA',
       gadget: 'https://www.google.com/ig/modules/pie-chart.xml'}
  ];

  var container = document.getElementById('toolbar_div');
  google.visualization.drawToolbar(container, components);
};

Политика данных

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

Локализация

Панель инструментов в настоящее время поддерживает только английский язык (США).