Обзор
Динамический график для изучения нескольких индикаторов во времени. Диаграмма отображается в браузере с использованием 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 . Пример: «2008Q3».
- Последующие столбцы могут иметь тип «число» или «строка». Числовые столбцы будут отображаться в раскрывающихся меню для осей X, Y, цвета и размера. Строковые столбцы будут отображаться только в раскрывающемся меню для цвета. См. пример выше.
Настройка начального состояния
Вы можете указать, что анимационная диаграмма начинается с определенного состояния: то есть набора выбранных сущностей и настроек представления. Для этого вам нужно сначала создать и отобразить диаграмму, затем внести любые изменения состояния, которые вы хотите отображать на диаграмме (выбрать значения, изменить настройки и т. д.), затем экспортировать эти настройки в виде строки и, наконец, использовать это строку в вашем коде, назначив ее опции «состояние». Следующие два раздела описывают, как экспортировать, а затем использовать код состояния.
- Откройте рабочую диаграмму и задайте параметры, которые хотите зафиксировать. Параметры, которые вы можете указать, включают уровни непрозрачности, масштабирование и логарифмическое или линейное масштабирование.
- Откройте панель настроек , щелкнув значок гаечного ключа в правом нижнем углу графика.
- Щелкните ссылку « Дополнительно » в левом нижнем углу, чтобы добавить панель « Дополнительно » в набор.
- Разверните панель « Дополнительно » и скопируйте содержимое текстового поля « Состояние » в буфер обмена. (Примечание: вместо использования меню, описанного в шагах 2–4, вы можете вставить на свою страницу кнопку, которая вызывает
getState()
и отображает текущее состояние в окне сообщения.) - Назначьте строку состояния, скопированную на предыдущем шаге, параметру параметров «состояние» в вашем коде, как показано здесь. При передаче в метод
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 .