Обзор
Диаграммы аннотаций — это интерактивные линейные диаграммы временных рядов, поддерживающие аннотации. Обратите внимание, что аннотированная временная шкала теперь автоматически использует аннотационную диаграмму.
Предупреждение о путанице. В настоящее время аннотационная диаграмма Google отличается от аннотаций , которые поддерживают другие диаграммы 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':['annotationchart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('date', 'Date'); data.addColumn('number', 'Kepler-22b mission'); data.addColumn('string', 'Kepler title'); data.addColumn('string', 'Kepler text'); data.addColumn('number', 'Gliese 163 mission'); data.addColumn('string', 'Gliese title'); data.addColumn('string', 'Gliese text'); data.addRows([ [new Date(2314, 2, 15), 12400, undefined, undefined, 10645, undefined, undefined], [new Date(2314, 2, 16), 24045, 'Lalibertines', 'First encounter', 12374, undefined, undefined], [new Date(2314, 2, 17), 35022, 'Lalibertines', 'They are very tall', 15766, 'Gallantors', 'First Encounter'], [new Date(2314, 2, 18), 12284, 'Lalibertines', 'Attack on our crew!', 34334, 'Gallantors', 'Statement of shared principles'], [new Date(2314, 2, 19), 8476, 'Lalibertines', 'Heavy casualties', 66467, 'Gallantors', 'Mysteries revealed'], [new Date(2314, 2, 20), 0, 'Lalibertines', 'All crew lost', 79463, 'Gallantors', 'Omniscience achieved'] ]); var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div')); var options = { displayAnnotations: true }; chart.draw(data, options); } </script> </head> <body> <div id='chart_div' style='width: 900px; height: 600px;'></div> </body> </html>
Загрузка
Имя пакета google.charts.load
— "annotationchart"
.
google.charts.load("current", {packages: ['annotationchart']});
Имя класса визуализации — google.visualization.AnnotationChart
.
var visualization = new google.visualization.AnnotationChart(container);
Формат данных
Вы можете отобразить одну или несколько линий на графике. Каждая строка представляет позицию X на графике, то есть определенное время; каждая строка описывается набором из одного-трех столбцов.
- Первый столбец имеет тип
date
илиdatetime
и определяет значение X точки на диаграмме. Если этот столбец имеет типdate
(а неdatetime
), то наименьшее разрешение времени по оси X будет составлять один день. - Каждая строка данных затем описывается набором из одного-трех дополнительных столбцов, как описано здесь:
- Значение Y — [ Обязательный, Число ] Первый столбец в каждом наборе описывает значение строки в соответствующий момент времени из первого столбца. Метка столбца отображается на диаграмме как заголовок этой строки.
- Заголовок аннотации — [ необязательно, строка ] Если строковый столбец следует за столбцом значений и для параметра
displayAnnotations
установлено значение true, этот столбец содержит краткий заголовок, описывающий эту точку. Например, если эта линия представляет температуру в Бразилии и эта точка имеет очень большое значение, заголовок может быть «Самый жаркий день за всю историю наблюдений». - Текст аннотации — [ Необязательная строка ] Если для этой серии существует второй строковый столбец, значение ячейки будет использоваться в качестве дополнительного описательного текста для этой точки. Чтобы использовать этот столбец, необходимо установить для параметра
displayAnnotations
значение true. Вы можете использовать теги HTML, если дляallowHtml
установлено значениеtrue
; ограничений по размеру практически нет, но учтите, что слишком длинные записи могут переполнить раздел отображения. Вам не обязательно иметь этот столбец, даже если у вас есть столбец заголовка аннотации для этой точки. Метка столбца не используется диаграммой. Например, если бы это был самый жаркий день за всю историю наблюдений, вы могли бы сказать что-то вроде: «Следующий ближайший день был на 10 градусов прохладнее!».
Параметры конфигурации
Имя | |
---|---|
разрешитьHtml | Если установлено значение true, любой текст аннотации, включающий теги HTML, будет отображаться как HTML. Тип: логический По умолчанию: ложь |
всеЗначенияСуффикс | Суффикс, который будет добавлен ко всем значениям в легенде и меткам галочек на вертикальных осях. Тип: строка По умолчанию: нет |
аннотацииШирина | Ширина (в процентах) области аннотаций от всей области диаграммы. Должно быть число в диапазоне 5–80. Тип: номер По умолчанию: 25 |
цвета | Цвета, используемые для линий и меток диаграммы. Массив строк. Каждый элемент представляет собой строку в допустимом цветовом формате HTML. Например, «красный» или «#00cc00». Тип: Массив строк. По умолчанию: цвета по умолчанию |
Формат даты | Формат, используемый для отображения информации о дате в правом верхнем углу. Формат этого поля соответствует классу Java SimpleDateFormat. Тип: строка По умолчанию: «ММММ дд, гггг» или «ЧЧ:мм ММММ дд, гггг», в зависимости от типа первого столбца (дата или дата-время соответственно). |
отображениеАннотации | Если установлено значение false, диаграмма скроет таблицу аннотаций, а аннотации и annotationText не будут видны (таблица аннотаций также не будет отображаться, если в ваших данных нет аннотаций, независимо от этого параметра). Если для этого параметра установлено значение true, после каждого числового столбца можно добавить два дополнительных столбца строки аннотации: один для заголовка аннотации и один для текста аннотации. Тип: логический По умолчанию: правда |
displayAnnotationsFilter | Если установлено значение true, на диаграмме будет отображаться элемент управления фильтром для фильтрации аннотаций. Используйте эту опцию, если имеется много аннотаций. Тип: логический По умолчанию: ложь |
displayDateBarSeparator | Отображать ли небольшой разделитель ( | ) между значениями ряда и датой в легенде, где true означает «да». Тип: логический По умолчанию: правда |
displayExactValues | Отображать ли сокращенную и округленную версию значений в верхней части графика для экономии места; false указывает, что это возможно. Например, если установлено значение false, 56123,45 может отображаться как 56,12k. Тип: логический По умолчанию: ложь |
дисплейЛегендаТочки | Отображать ли точки рядом со значениями в тексте легенды, где true означает «да». Тип: логический По умолчанию: правда |
displayLegendValues | Отображать ли выделенные значения в легенде, где true означает «да». Тип: логический По умолчанию: правда |
DisplayRangeSelector | Показывать ли область выбора диапазона масштабирования (область внизу диаграммы), где false означает «нет». Контур в селекторе масштабирования представляет собой версию первой серии диаграммы в логарифмическом масштабе, масштабированную в соответствии с высотой селектора масштабирования. Тип: логический По умолчанию: правда |
дисплейZoomButtons | Показывать ли кнопки масштабирования («1d 5d 1m» и т. д.), где false означает «нет». Тип: логический По умолчанию: правда |
наполнять | Число от 0 до 100 (включительно), определяющее альфу заливки под каждой линией линейного графика. 100 означает 100% непрозрачность, а 0 означает отсутствие заливки вообще. Цвет заливки тот же, что и линия над ней. Тип: номер По умолчанию: 0 |
легендаПозиция | Помещать ли цветную легенду в одну строку с кнопками масштабирования и датой («sameRow») или в новую строку («newRow»). Тип: строка По умолчанию: 'sameRow' |
Макс | Максимальное значение, отображаемое по оси Y. Если максимальная точка данных превышает это значение, этот параметр будет игнорироваться, и диаграмма будет настроена так, чтобы отображать следующую крупную отметку выше максимальной точки данных. Это будет иметь приоритет над максимумом оси Y, определяемым Это похоже на Тип: номер По умолчанию: автоматический |
мин | Минимальное значение для отображения по оси Y. Если минимальная точка данных меньше этого значения, этот параметр будет игнорироваться, и диаграмма будет настроена так, чтобы отображать следующую крупную отметку ниже минимальной точки данных. Это будет иметь приоритет над минимумом оси Y, определяемым Это похоже на Тип: номер По умолчанию: автоматический |
числовые форматы | Указывает шаблоны числового формата, которые будут использоваться для форматирования значений в верхней части графика. Шаблоны должны быть в формате, указанном классом Java DecimalFormat.
Если указан этот параметр, параметр Тип: строка или карта чисел:пары строк. По умолчанию: автоматический |
масштабСтолбцы | Указывает, какие значения отображать на делениях оси Y на графике. По умолчанию с правой стороны используется единая шкала, которая применяется к обеим сериям; но вы можете масштабировать разные стороны графика до разных значений ряда. Эта опция принимает массив от нуля до трех чисел, определяющий индекс (отсчитываемый от нуля) ряда, который будет использоваться в качестве значения масштаба. Расположение этих значений зависит от того, сколько значений вы включаете в массив:
При отображении более одного масштаба рекомендуется установить для параметра Тип: Массив чисел По умолчанию: Автоматически |
масштабФормат | Числовой формат, который будет использоваться для меток деления оси. Значение по умолчанию Тип: строка По умолчанию: '#' |
тип шкалы | Устанавливает максимальное и минимальное значения, отображаемые по оси Y. Доступны следующие варианты:
Если вы укажете параметры минимума и/или максимума, они будут иметь приоритет над минимальными и максимальными значениями, определяемыми вашим типом шкалы. Тип: строка По умолчанию: «фиксированное» |
стол | Содержит параметры, относящиеся к таблице аннотаций. Чтобы указать свойства этого объекта, вы можете использовать литеральную запись объекта: var options: { table: { sortAscending: true, sortColumn: 1 } }; Тип: объект По умолчанию: ноль |
table.sortAscending | Если установлено значение Тип: логический По умолчанию: ложь |
таблица.sortColumn | Индекс столбца таблицы аннотаций, по которому будут сортироваться аннотации. Индекс должен быть либо 0 для столбца метки аннотации, либо 1 для столбца текста аннотации. Тип: номер По умолчанию: 0 |
толщина | Число от 0 до 10 (включительно), определяющее толщину линий, где 0 — самая тонкая линия. Тип: номер По умолчанию: 0 |
масштабироватьВремяКонца | Устанавливает дату/время окончания выбранного диапазона масштабирования. Тип: Дата По умолчанию: нет |
масштабированиеСтарттиме | Устанавливает дату/время начала выбранного диапазона масштабирования. Тип: Дата По умолчанию: нет |
Методы
Метод | |
---|---|
clearChart() | Очищает диаграмму и освобождает все выделенные ресурсы. Тип возврата: нет |
draw(data, options, state) | Рисует диаграмму. Тип возврата: нет |
getContainer() | Получает дескриптор элемента контейнера, содержащего диаграмму аннотаций. Тип возвращаемого значения: дескриптор элемента DOM. |
getSelection() | Стандартная реализация Тип возвращаемого значения: Массив элементов выбора. |
getVisibleChartRange() | Возвращает объект со свойствами Тип возвращаемого значения: объект со свойствами start и end . |
hideDataColumns( columnIndexes ) | Скрывает указанный ряд данных с диаграммы. Принимает один параметр, который может быть числом или массивом чисел, в котором 0 относится к первой серии данных и т. д. Тип возврата: нет |
setVisibleChartRange( start , end ) | Устанавливает видимый диапазон (масштаб) в указанный диапазон. Принимает два параметра типа Тип возврата: нет |
showDataColumns( columnIndexes ) | Показывает указанные серии данных с диаграммы после того, как они были скрыты с помощью Тип возврата: нет |
События
Имя | |
---|---|
rangechange | Вызывается, когда пользователь меняет ползунок диапазона. Новые конечные точки диапазона будут доступны как google.visualization.events.addListener(chart, 'rangechange', rangechange_handler); function rangechange_handler(e) { console.log('You changed the range to ', e['start'], ' and ', e['end']); } Свойства: начало, конец |
ready | Диаграмма готова для вызовов внешних методов. Если вы хотите взаимодействовать с диаграммой и вызывать методы после ее рисования, вам следует настроить прослушиватель этого события до вызова метода Свойства: нет |
select | Запускается, когда пользователь щелкает визуальный объект. Чтобы узнать, что было выбрано, вызовите Свойства: нет |
Политика данных
Весь код и данные обрабатываются и отображаются в браузере. Никакие данные не отправляются ни на один сервер.