Визуализация: анимационная диаграмма

  1. Обзор
  2. Пример
  3. Загрузка
  4. Установка исходного состояния
  5. Формат данных
  6. Параметры конфигурации
  7. Методы
  8. События
  9. Политика данных
  10. Примечания

Обзор

Динамический график для изучения нескольких индикаторов с течением времени. Диаграмма отображается в браузере с помощью Flash.

Примечание для разработчиков . Из-за настроек безопасности Flash это (и все визуализации на основе Flash) может работать неправильно при доступе из местоположения файла в браузере (например, file:///c:/webhost/myhost/myviz.html). ), а не с URL-адреса веб-сервера (например, http://www.myhost.com/myviz.html). Обычно это проблема только тестирования. Эту проблему можно решить, как описано на веб-сайте Adobe .

Пример

(Обратите внимание, что следующий код не будет работать при загрузке как локальный файл; его необходимо загрузить с веб-сервера.)

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {packages:["motionchart"]});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Fruit');
        data.addColumn('date', 'Date');
        data.addColumn('number', 'Sales');
        data.addColumn('number', 'Expenses');
        data.addColumn('string', 'Location');
        data.addRows([
          ['Apples',  new Date (1988,0,1), 1000, 300, 'East'],
          ['Oranges', new Date (1988,0,1), 1150, 200, 'West'],
          ['Bananas', new Date (1988,0,1), 300,  250, 'West'],
          ['Apples',  new Date (1989,6,1), 1200, 400, 'East'],
          ['Oranges', new Date (1989,6,1), 750,  150, 'West'],
          ['Bananas', new Date (1989,6,1), 788,  617, 'West']
        ]);

        var chart = new google.visualization.MotionChart(document.getElementById('chart_div'));

        chart.draw(data, {width: 600, height:300});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 600px; height: 300px;"></div>
  </body>
</html>

Загрузка

Имя пакета google.charts.load — "motionchart" .

  google.charts.load('current', {'packages': ['motionchart']});

Имя класса визуализации — google.visualization.MotionChart .

  var visualization = new google.visualization.MotionChart(container);

Формат данных

  • Первый столбец должен иметь тип «строка» и содержать имена объектов (например, «Яблоки», «Апельсины», «Бананы» в приведенном выше примере).
  • Второй столбец должен содержать значения времени. Время может быть выражено в любом из следующих форматов:
    • Год — тип столбца: «число». Пример: 2008 год.
    • Месяц, день и год . Тип столбца: «дата»; значения должны быть экземплярами Date javascript.
    • Номер недели . Тип столбца: «строка»; значения должны использовать шаблон YYYYWww, соответствующий стандарту ISO 8601 . Пример: «2008W03».
    • Квартал — тип столбца: «строка»; значения должны иметь шаблон YYYYQq, соответствующий стандарту ISO 8601 . Пример: «3 квартал 2008 г.».
  • Последующие столбцы могут иметь тип «число» или «строка». Числовые столбцы будут отображаться в раскрывающихся меню для осей X, Y, цвета и размера. Столбцы строк будут отображаться только в раскрывающемся меню «Цвет». См. пример выше.

Установка исходного состояния

Вы можете указать, что диаграмма движения начинается с определенного состояния: то есть набора выбранных объектов и настроек представления. Для этого вам нужно сначала создать и отобразить диаграмму, затем внести любые изменения состояния, которые вы хотите, чтобы диаграмма отображала (выбрать значения, изменить настройки и т. д.), затем экспортировать эти настройки в виде строки и, наконец, использовать это строку в вашем коде, назначив ее опции «state». В следующих двух разделах описывается, как экспортировать и затем использовать код штата.

  1. Откройте рабочую диаграмму и задайте настройки, которые вы хотите сохранить. Настройки, которые вы можете указать, включают уровни непрозрачности, масштабирование и логарифмическое и линейное масштабирование.
  2. Откройте панель «Настройки» , щелкнув символ гаечного ключа в правом нижнем углу диаграммы.
  3. Нажмите ссылку «Дополнительно» в левом нижнем углу, чтобы добавить панель «Дополнительно» в набор.
  4. Разверните панель «Дополнительно» и скопируйте содержимое текстового поля «Состояние» в буфер обмена. (Примечание: вместо использования меню, описанного в шагах 2–4, вы можете вставить на свою страницу кнопку, которая вызывает getState() и отображает текущее состояние в окне сообщения.)
  5. Назначьте строку состояния, скопированную на предыдущем шаге, параметру «state» в вашем коде, как показано здесь. При передаче в метод draw() диаграмма будет инициализирована в состояние, указанное при запуске.
var options = {};
options['state'] =
'{"iconKeySettings":[],"stateVersion":3,"time":"notime","xAxisOption":"_NOTHING","playDuration":15,"iconType":"BUBBLE","sizeOption":"_NOTHING","xZoomedDataMin":null,"xZoomedIn":false,"duration":{"multiplier":1,"timeUnit":"none"},"yZoomedDataMin":null,"xLambda":1,"colorOption":"_NOTHING","nonSelectedAlpha":0.4,"dimensions":{"iconDimensions":[]},"yZoomedIn":false,"yAxisOption":"_NOTHING","yLambda":1,"yZoomedDataMax":null,"showTrails":true,"xZoomedDataMax":null};';

options['width'] = 600;
options['height'] = 400;
chart.draw(data, options);

Параметры конфигурации

Имя Тип По умолчанию Описание
высота число 300 Высота диаграммы в пикселях.
ширина число 500 Ширина диаграммы в пикселях.
состояние нить никто Исходное состояние отображения диаграммы. Это сериализованный объект JSON, который описывает уровень масштабирования, выбранные измерения, выбранные пузырьки/объекты и другие описания состояний. См. раздел «Настройка исходного состояния» , чтобы узнать, как это установить.
показатьChartButtons логическое значение истинный false скрывает кнопки, управляющие типом диаграммы (пузырьки/линии/столбцы) в правом верхнем углу.
шоухедер логическое значение истинный false скрывает метку заголовка сущностей (полученную из метки первого столбца в таблице данных).
шоуселектлисткомпонент логическое значение истинный false скрывает список видимых объектов.
шоусайдпанель логическое значение истинный false скрывает правую панель.
showXMetricPicker логическое значение истинный false скрывает средство выбора метрики для x.
showYMetricPicker логическое значение истинный false скрывает средство выбора метрики для y.
showXScalePicker логическое значение истинный false скрывает средство выбора масштаба для x.
показатьYScalePicker логическое значение истинный false скрывает средство выбора масштаба для y.
показатьAdvancedPanel логическое значение истинный false отключает раздел параметров на панели настроек.

Методы

Метод Тип возврата Описание
draw(data, options) никто Рисует диаграмму с предоставленными параметрами.
getState() нить Возвращает текущее состояние диаграммы движения, сериализованное в строку JSON. Чтобы назначить это состояние диаграмме, назначьте эту строку параметру state в методе draw() . Это часто используется для указания пользовательского состояния диаграммы при запуске вместо использования состояния по умолчанию.

События

Имя Описание Характеристики
error Вызывается, когда возникает ошибка при попытке отобразить диаграмму. идентификатор, сообщение
готовый Диаграмма готова для вызовов внешних методов. Если вы хотите взаимодействовать с диаграммой и вызывать методы после ее рисования, вам следует настроить прослушиватель этого события до вызова метода рисования и вызывать их только после того, как событие было запущено. Никто
изменение состояния Пользователь каким-то образом взаимодействовал с диаграммой. Вызовите getState() , чтобы узнать текущее состояние диаграммы. Никто

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

Весь код и данные обрабатываются и отображаются в браузере. Никакие данные не отправляются ни на один сервер.

Примечания

Из-за настроек безопасности Flash это (и все визуализации на основе Flash) может работать неправильно при доступе из местоположения файла в браузере (например, file:///c:/webhost/myhost/myviz.html), а не из URL-адрес веб-сервера (например, http://www.myhost.com/myviz.html). Обычно это проблема только тестирования. Эту проблему можно решить, как описано на веб-сайте Macromedia .