Обзор
Интерактивная линейная диаграмма временных рядов с необязательными аннотациями.
Аннотированная временная шкала теперь автоматически использует диаграммы аннотаций .
Пример
<html>
<head>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load('current', {'packages':['annotatedtimeline']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Sold Pencils');
data.addColumn('string', 'title1');
data.addColumn('string', 'text1');
data.addColumn('number', 'Sold Pens');
data.addColumn('string', 'title2');
data.addColumn('string', 'text2');
data.addRows([
[new Date(2008, 1 ,1), 30000, undefined, undefined, 40645, undefined, undefined],
[new Date(2008, 1 ,2), 14045, undefined, undefined, 20374, undefined, undefined],
[new Date(2008, 1 ,3), 55022, undefined, undefined, 50766, undefined, undefined],
[new Date(2008, 1 ,4), 75284, undefined, undefined, 14334, 'Out of Stock','Ran out of stock on pens at 4pm'],
[new Date(2008, 1 ,5), 41476, 'Bought Pens','Bought 200k pens', 66467, undefined, undefined],
[new Date(2008, 1 ,6), 33322, undefined, undefined, 39463, undefined, undefined]
]);
var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
chart.draw(data, {displayAnnotations: true});
}
</script>
</head>
<body>
// Note how you must specify the size of the container element explicitly!
<div id='chart_div' style='width: 700px; height: 240px;'></div>
</body>
</html>
Важно: Чтобы использовать эту визуализацию, вы должны явно указать высоту и ширину элемента-контейнера на своей странице. Так, например: <div id="chart_div" style="width:400; height:250"></div>
.
Загрузка
Имя пакета google.charts.load
— "annotatedtimeline"
.
google.charts.load("current", {packages: ['annotatedtimeline']});
Имя класса визуализации — google.visualization.AnnotatedTimeLine
var visualization = new google.visualization.AnnotatedTimeLine(container);
Формат данных
Вы можете отобразить одну или несколько линий на графике. Каждая строка представляет позицию X на графике, то есть определенное время; каждая строка описывается набором от одного до трех столбцов.
- Первый столбец имеет тип
date
илиdatetime
и указывает значение X точки на диаграмме. Если этот столбец имеет типdate
(а неdatetime
), то наименьшее временное разрешение по оси X будет равно одному дню. - Затем каждая строка данных описывается набором из одного-трех дополнительных столбцов, как описано здесь:
- Значение Y — [ Обязательно, число ] Первый столбец в каждом наборе описывает значение строки в соответствующее время из первого столбца. Метка столбца отображается на диаграмме как заголовок этой строки.
- Заголовок аннотации — [ Необязательный, строка ] Если после столбца значений следует строковый столбец, а для параметра
displayAnnotations
установлено значение true, этот столбец содержит короткий заголовок, описывающий эту точку. Например, если эта линия представляет температуру в Бразилии, а эта точка является очень большим числом, заголовок может быть «Самый жаркий день за всю историю наблюдений». - Текст аннотации — [ необязательная строка ] Если для этой серии существует второй строковый столбец, значение ячейки будет использоваться в качестве дополнительного описательного текста для этой точки. Вы должны установить для параметра
displayAnnotations
значение true, чтобы использовать этот столбец. Вы можете использовать теги HTML, если установите дляallowHtml
значениеtrue
; по сути, ограничений по размеру нет, но учтите, что слишком длинные записи могут выйти за пределы области отображения. Вам не обязательно иметь этот столбец, даже если у вас есть столбец заголовка аннотации для этой точки. Метка столбца не используется диаграммой. Например, если бы это был самый жаркий день за всю историю наблюдений, вы могли бы сказать что-то вроде «Следующий ближайший день был на 10 градусов холоднее!».
Параметры конфигурации
Имя | Тип | По умолчанию | Описание |
---|---|---|---|
разрешитьHtml | логический | ЛОЖЬ | Если установлено значение true, любой текст аннотации, включающий теги HTML, будет отображаться как HTML. |
разрешить перерисовку | логический | ЛОЖЬ | Включает более эффективную технику перерисовки для второго и последующих вызовов
|
всеЗначенияСуффикс | нить | никто | Суффикс, добавляемый ко всем значениям на шкалах и в легенде. |
аннотацииШирина | количество | 25 | Ширина (в процентах) области аннотаций от всей области диаграммы. Должно быть число в диапазоне от 5 до 80. |
цвета | Массив строк | Цвета по умолчанию | Цвета, используемые для линий диаграммы и меток. Массив строк. Каждый элемент представляет собой строку в допустимом цветовом формате HTML. Например, «красный» или «#00cc00». |
Формат даты | нить | Либо «ММММ дд, гггг», либо «ЧЧ:мм ММММ дд, гггг», в зависимости от типа первого столбца (дата или дата/время соответственно). | Формат, используемый для отображения информации о дате в правом верхнем углу. Формат этого поля определяется классом java SimpleDateFormat. |
displayAnnotations | логический | ЛОЖЬ | Если установлено значение true, на диаграмме будут отображаться аннотации поверх выбранных значений. Если для этого параметра установлено значение true, после каждого числового столбца можно добавить два необязательных столбца строки аннотации: один для заголовка аннотации и один для текста аннотации. |
displayAnnotationsФильтр | логический | ЛОЖЬ | Если установлено значение true, на диаграмме будет отображаться элемент управления фильтром для фильтрации аннотаций. Используйте этот параметр при наличии большого количества аннотаций. |
DisplayDateBarSeparator | логический | истинный | Отображать ли небольшой разделитель ( | ) между значениями ряда и датой в легенде, где true означает «да». |
DisplayExactValues | логический | ЛОЖЬ | Отображать ли сокращенную, округленную версию значений в верхней части графика для экономии места; false указывает, что может. Например, если установлено значение false, 56123,45 может отображаться как 56,12k. |
displayLegendDots | логический | истинный | Отображать ли точки рядом со значениями в тексте легенды, где true означает да. |
displayLegendValues | логический | истинный | Отображать ли выделенные значения в легенде, где true означает «да». |
DisplayRangeSelector | логический | истинный | Показывать ли область выбора диапазона масштабирования (область внизу графика), где false означает нет. Контур в селекторе масштабирования представляет собой версию последней серии диаграммы в логарифмическом масштабе, масштабированную в соответствии с высотой селектора масштабирования. |
displayZoomButtons | логический | истинный | Показывать ли ссылки на зум («1d 5d 1m» и т. д.), где false означает «нет». |
наполнять | количество | 0 | Число от 0 до 100 (включительно), указывающее альфа заливки под каждой строкой линейного графика. 100 означает 100% непрозрачную заливку, 0 означает полное отсутствие заливки. Цвет заливки такой же, как у линии над ней. |
выделитьточка | нить | 'ближайший' | Какую точку в ряду выделить и соответствующие значения показать в легенде. Выберите одно из следующих значений:
|
легендаПозиция | нить | 'та же строка' | Помещать ли цветную легенду в ту же строку с кнопками масштабирования и датой («sameRow») или в новую строку («newRow»). |
Максимум | количество | автоматический | Максимальное значение для отображения на оси Y. Если максимальная точка данных превышает это значение, этот параметр будет проигнорирован, а диаграмма будет скорректирована таким образом, чтобы следующая крупная отметка деления находилась над максимальной точкой данных. Это будет иметь приоритет над максимальным значением по оси Y, которое определяется scaleType . |
мин | количество | автоматический | Минимальное значение для отображения на оси Y. Если минимальная точка данных меньше этого значения, этот параметр будет проигнорирован, а диаграмма будет скорректирована таким образом, чтобы следующая крупная отметка деления находилась ниже минимальной точки данных. Это будет иметь приоритет над минимумом по оси Y, определяемым scaleType . |
числоформаты | Строка, или карта число:пары строк | автоматический | Задает шаблоны числового формата, которые будут использоваться для форматирования значений в верхней части графика. Шаблоны должны быть в формате, указанном классом java DecimalFormat.
Если указан этот параметр, параметр |
масштабКолонки | Массив чисел | автоматический | Указывает, какие значения отображать на делениях оси Y на графике. По умолчанию с правой стороны используется одна шкала, которая применяется к обеим сериям; но вы можете масштабировать разные стороны графика до разных значений ряда. Этот параметр принимает массив от нуля до трех чисел, указывающих (отсчитываемый от нуля) индекс ряда для использования в качестве значения шкалы. Где отображаются эти значения, зависит от того, сколько значений вы включаете в свой массив:
При отображении более одной шкалы рекомендуется установить для параметра |
тип шкалы | нить | 'исправлено' | Устанавливает максимальное и минимальное значения, отображаемые на оси Y. Доступны следующие варианты:
Если вы укажете минимальные и/или максимальные параметры, они будут иметь приоритет над минимальными и максимальными значениями, определенными вашим типом шкалы. |
толщина | количество | 0 | Число от 0 до 10 (включительно), указывающее толщину линий, где 0 — самая тонкая. |
wmode | нить | 'окно' | Параметр режима окна (wmode) для флеш-диаграммы. Доступные значения: «непрозрачный», «окно» или «прозрачный». |
ZoomEndTime | Датировать | никто | Устанавливает дату/время окончания выбранного диапазона масштабирования. |
zoomStartTime | Датировать | никто | Устанавливает начальную дату/время выбранного диапазона масштабирования. |
Методы
Метод | Тип возврата | Описание |
---|---|---|
draw(data, options) | никто | Рисует график. Вы можете ускорить время отклика для второго и последующих вызовов draw() , используя свойство allowRedraw. |
getSelection() | Массив элементов выбора | Стандартная getSelection() . Выбранные элементы являются элементами ячейки. Пользователь может выбрать только одну ячейку за раз. |
getVisibleChartRange() | Объект с start и end свойствами | Возвращает объект со свойствами start и end , каждое из которых является объектом Date , представляющим текущий выбор времени. |
hideDataColumns( columnIndexes ) | никто | Скрывает указанный ряд данных с диаграммы. Принимает один параметр, который может быть числом или массивом чисел, в котором 0 относится к первой серии данных и т. д. |
setVisibleChartRange( start , end ) | никто | Устанавливает видимый диапазон (масштаб) в указанный диапазон. Принимает два параметра типа Date , которые представляют первое и последнее время желаемого выбранного видимого диапазона. Установите для начала значение null, чтобы включить все, начиная с самой ранней даты и заканчивая концом ; установите для конца значение null, чтобы включить все от начала до последней даты. |
showDataColumns( columnIndexes ) | никто | Показывает указанные ряды данных с диаграммы после того, как они были скрыты с помощью метода hideDataColumns . Принимает один параметр, который может быть числом или массивом чисел, в котором 0 относится к первой серии данных и т. д. |
События
Имя | Описание | Характеристики |
---|---|---|
изменение диапазона | Диапазон масштабирования изменен. Запускается после того, как пользователь изменил видимый диапазон времени, но не после вызова метода setVisibleChartRange .Примечание. Рекомендуется не использовать свойства события, а получить их, вызвав метод getVisibleChartRange . |
|
готовы | Диаграмма готова к вызову внешних методов. Если вы хотите взаимодействовать с диаграммой и вызывать методы после ее рисования, вы должны настроить прослушиватель для этого события до вызова метода draw и вызывать их только после того, как событие было запущено. | Никто |
Выбрать | Когда пользователь щелкает флаг аннотации (маркер), выбирается соответствующая ячейка в таблице данных. Затем визуализация запускает это событие. | Никто |
Примечание . Из-за определенных ограничений события могут не создаваться, если вы обращаетесь к странице в браузере как к файлу (например, «file://»), а не с сервера (например, «http://www»). .
Политика данных
Весь код и данные обрабатываются и отображаются в браузере. Никакие данные не отправляются ни на один сервер.
Примечания
Из-за настроек безопасности Flash это (и все визуализации на основе Flash) может работать неправильно при доступе из местоположения файла в браузере (например, file:///c:/webhost/myhost/myviz.html), а не из URL-адрес веб-сервера (например, http://www.myhost.com/myviz.html). Обычно это проблема только тестирования. Вы можете решить эту проблему, как описано на веб-сайте Macromedia .