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

Обзор

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

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

Пример

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['motionchart']}); </script> <div id="chart_div" style="width: 600px; height: 300px;"></div> 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 type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['motionchart']}); </script> <div id="chart_div" style="width: 600px; height: 300px;"></div> 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}); }

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

<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 . Пример: «2008Q3».
  • Последующие столбцы могут иметь тип «число» или «строка». Числовые столбцы будут отображаться в раскрывающихся меню для осей X, Y, цвета и размера. Строковые столбцы будут отображаться только в раскрывающемся меню для цвета. См. пример выше.

Настройка начального состояния

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

  1. Откройте рабочую диаграмму и задайте параметры, которые хотите зафиксировать. Параметры, которые вы можете указать, включают уровни непрозрачности, масштабирование и логарифмическое или линейное масштабирование.
  2. Откройте панель настроек , щелкнув значок гаечного ключа в правом нижнем углу графика.
  3. Щелкните ссылку « Дополнительно » в левом нижнем углу, чтобы добавить панель « Дополнительно » в набор.
  4. Разверните панель « Дополнительно » и скопируйте содержимое текстового поля « Состояние » в буфер обмена. (Примечание: вместо использования меню, описанного в шагах 2–4, вы можете вставить на свою страницу кнопку, которая вызывает getState() и отображает текущее состояние в окне сообщения.)
  5. Назначьте строку состояния, скопированную на предыдущем шаге, параметру параметров «состояние» в вашем коде, как показано здесь. При передаче в метод 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 скрывает метку заголовка сущностей (полученную из метки первого столбца в таблице данных).
показатьSelectListComponent логический истинный false скрывает список видимых сущностей.
показатьбоковую панель логический истинный false скрывает правую панель.
показатьXMetricPicker логический истинный false скрывает средство выбора метрик для x.
показатьYMetricPicker логический истинный false скрывает средство выбора метрик для y.
показатьXScalePicker логический истинный 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 .