Аннотационная диаграмма

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

Обзор

Диаграммы аннотаций — это интерактивные линейные диаграммы временных рядов, поддерживающие аннотации. Обратите внимание, что аннотированная временная шкала теперь автоматически использует аннотационную диаграмму.

Предупреждение о путанице: в настоящее время диаграмма аннотаций Google отличается от аннотаций , которые поддерживают другие диаграммы Google (в настоящее время области, столбцы, столбцы, комбинированные, линейные и точечные). На этих диаграммах аннотации указываются в отдельном столбце с данными и отображаются в виде коротких фрагментов текста, на которые пользователи могут навести указатель мыши, чтобы увидеть полный текст аннотации. Напротив, на диаграмме аннотаций полные аннотации отображаются справа, как показано ниже.

Пример

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id='chart_div' style='width: 900px; height: 600px;'></div> 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 type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id='chart_div' style='width: 900px; height: 600px;'></div> 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); }
<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.

Тип: строка
По умолчанию: «ММММ дд, гггг» или «ЧЧ:мм ММММ дд, гггг», в зависимости от типа первого столбца (дата или дата/время соответственно).
displayAnnotations

Если установлено значение false, диаграмма будет скрывать таблицу аннотаций, а аннотации и текст аннотации не будут видны (таблица аннотаций также не будет отображаться, если в ваших данных нет аннотаций, независимо от этой опции). Если для этого параметра установлено значение true, после каждого числового столбца можно добавить два необязательных столбца строки аннотации: один для заголовка аннотации и один для текста аннотации.

Тип: логический
По умолчанию: правда
displayAnnotationsФильтр

Если установлено значение true, на диаграмме будет отображаться элемент управления фильтром для фильтрации аннотаций. Используйте этот параметр при наличии большого количества аннотаций.

Тип: логический
По умолчанию: ложь
DisplayDateBarSeparator

Отображать ли небольшой разделитель ( | ) между значениями ряда и датой в легенде, где true означает «да».

Тип: логический
По умолчанию: правда
DisplayExactValues

Отображать ли сокращенную, округленную версию значений в верхней части графика для экономии места; false указывает, что может. Например, если установлено значение false, 56123,45 может отображаться как 56,12k.

Тип: логический
По умолчанию: ложь
displayLegendDots

Отображать ли точки рядом со значениями в тексте легенды, где true означает да.

Тип: логический
По умолчанию: правда
displayLegendValues

Отображать ли выделенные значения в легенде, где true означает «да».

Тип: логический
По умолчанию: правда
DisplayRangeSelector

Показывать ли область выбора диапазона масштабирования (область внизу графика), где false означает нет.

Контур в селекторе масштабирования представляет собой версию первой серии диаграммы в логарифмическом масштабе, масштабированную в соответствии с высотой селектора масштабирования.

Тип: логический
По умолчанию: правда
displayZoomButtons

Показывать ли кнопки масштабирования ("1d 5d 1m" и т. д.), где false означает "нет".

Тип: логический
По умолчанию: правда
наполнять

Число от 0 до 100 (включительно), указывающее альфа заливки под каждой строкой линейного графика. 100 означает 100% непрозрачность, а 0 означает полное отсутствие заливки. Цвет заливки такой же, как у линии над ней.

Тип: номер
По умолчанию: 0
легендаПозиция

Помещать ли цветную легенду в ту же строку с кнопками масштабирования и датой («sameRow») или в новую строку («newRow»).

Тип: строка
По умолчанию: 'sameRow'
Максимум

Максимальное значение для отображения на оси Y. Если максимальная точка данных превышает это значение, этот параметр будет проигнорирован, а диаграмма будет скорректирована таким образом, чтобы следующая крупная отметка деления находилась над максимальной точкой данных. Это будет иметь приоритет над максимальным значением по оси Y, которое определяется scaleType .

Это похоже на maxValue в основных диаграммах.

Тип: номер
По умолчанию: автоматически
мин

Минимальное значение для отображения на оси Y. Если минимальная точка данных меньше этого значения, этот параметр будет проигнорирован, а диаграмма будет скорректирована таким образом, чтобы следующая крупная отметка деления находилась ниже минимальной точки данных. Это будет иметь приоритет над минимумом по оси Y, определяемым scaleType .

Это похоже на minValue в основных диаграммах.

Тип: номер
По умолчанию: автоматически
числоформаты

Задает шаблоны числового формата, которые будут использоваться для форматирования значений в верхней части графика.

Шаблоны должны быть в формате, указанном классом java DecimalFormat.

  • Если не указано, используется шаблон формата по умолчанию.
  • Если указан один шаблон строки, он используется для всех значений.

  • Если указана карта, ключи представляют собой (отсчитываемые от нуля) индексы рядов, а значения — шаблоны, используемые для форматирования указанных рядов.

    Вы не обязаны включать формат для каждой серии на диаграмме; любая неуказанная серия будет использовать формат по умолчанию.

Если указан этот параметр, параметр displayExactValues ​​игнорируется.

Тип: Строка или карта пар число:строка
По умолчанию: автоматически
масштабКолонки

Указывает, какие значения отображать на делениях оси Y на графике. По умолчанию с правой стороны используется одна шкала, которая применяется к обеим сериям; но вы можете масштабировать разные стороны графика до разных значений ряда.

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

  • Если вы укажете пустой массив, на диаграмме не будут отображаться значения Y рядом с делениями.
  • Если указать одно значение, масштаб указанного ряда будет отображаться только в правой части графика.
  • Если вы укажете два значения, шкала для второго ряда будет добавлена ​​справа от графика.
  • Если указать три значения, в середину диаграммы будет добавлена ​​шкала для третьего ряда.
  • Любые значения после третьего в массиве будут игнорироваться.

При отображении более одной шкалы рекомендуется установить для параметра scaleType значение «allfixed» или «allmaximized».

Тип: Массив чисел
По умолчанию: автоматически
масштабФормат

Числовой формат, который будет использоваться для меток деления оси. Значение по умолчанию '#' отображается как целое число.

Тип: строка
По умолчанию: '#'
тип шкалы

Устанавливает максимальное и минимальное значения, отображаемые на оси Y. Доступны следующие варианты:

  • «максимизированный» — ось Y будет охватывать минимальное и максимальное значения ряда. Если у вас более одной серии, используйте allmaximized.
  • 'fixed' [ по умолчанию ] — ось Y изменяется в зависимости от значений значений данных:
    • Если все значения >=0, ось Y будет простираться от нуля до максимального значения данных.
    • Если все значения <=0, ось Y будет простираться от нуля до минимального значения данных.
    • Если значения являются как положительными, так и отрицательными, ось Y будет варьироваться от максимума ряда до минимума ряда.
      Для нескольких серий используйте allfixed.
  • 'allmaximized' — то же, что и 'maximized', но используется при отображении нескольких масштабов. Обе диаграммы будут развернуты в одном масштабе, что означает, что одна из них будет искажена по оси Y, но при наведении курсора на каждую серию будет отображаться ее истинное значение.
  • «allfixed» — то же, что и «fixed», но используется при отображении нескольких масштабов. Этот параметр настраивает каждую шкалу в соответствии с рядом, к которому она применяется (используйте это в сочетании с scaleColumns ).

Если вы укажете минимальные и/или максимальные параметры, они будут иметь приоритет над минимальными и максимальными значениями, определенными вашим типом шкалы.

Тип: строка
По умолчанию: фиксированный
стол

Содержит параметры, относящиеся к таблице аннотаций. Чтобы указать свойства этого объекта, вы можете использовать литеральную нотацию объекта:

var options: {
  table: {
    sortAscending: true,
    sortColumn: 1
  }
};
Тип: объект
По умолчанию: ноль
table.sortПо возрастанию

Если установлено значение true , меняет порядок таблицы аннотаций и отображает их в возрастающем порядке.

Тип: логический
По умолчанию: ложь
table.sortColumn

Индекс столбца таблицы аннотаций, для которого будут сортироваться аннотации. Индекс должен быть либо 0 для столбца метки аннотации, либо 1 для столбца текста аннотации.

Тип: номер
По умолчанию: 0
толщина

Число от 0 до 10 (включительно), указывающее толщину линий, где 0 — самая тонкая.

Тип: номер
По умолчанию: 0
ZoomEndTime

Устанавливает дату/время окончания выбранного диапазона масштабирования.

Тип: Дата
По умолчанию: нет
zoomStartTime

Устанавливает начальную дату/время выбранного диапазона масштабирования.

Тип: Дата
По умолчанию: нет

Методы

Метод
clearChart()

Очищает диаграмму и освобождает все выделенные ей ресурсы.

Тип возврата: нет
draw(data, options, state)

Рисует график.

Тип возврата: нет
getContainer()

Извлекает дескриптор элемента-контейнера, содержащего диаграмму аннотаций.

Тип возвращаемого значения: дескриптор элемента DOM.
getSelection()

Стандартная getSelection() . Выбранные элементы являются элементами ячейки. Пользователь может выбрать только одну ячейку за раз.

Тип возвращаемого значения: Массив элементов выбора
getVisibleChartRange()

Возвращает объект со свойствами start и end , каждое из которых является объектом Date , представляющим текущий выбор времени.

Тип возвращаемого значения: объект с start и end свойствами.
hideDataColumns( columnIndexes )

Скрывает указанный ряд данных с диаграммы. Принимает один параметр, который может быть числом или массивом чисел, в котором 0 относится к первой серии данных и т. д.

Тип возврата: нет
setVisibleChartRange( start , end )

Устанавливает видимый диапазон (масштаб) в указанный диапазон. Принимает два параметра типа Date , которые представляют первое и последнее время желаемого выбранного видимого диапазона. Установите для начала значение null, чтобы включить все, начиная с самой ранней даты и заканчивая концом ; установите для конца значение null, чтобы включить все от начала до последней даты.

Тип возврата: нет
showDataColumns( columnIndexes )

Показывает указанные ряды данных с диаграммы после того, как они были скрыты с помощью метода hideDataColumns . Принимает один параметр, который может быть числом или массивом чисел, в котором 0 относится к первой серии данных и т. д.

Тип возврата: нет

События

Имя
rangechange

Запускается, когда пользователь меняет ползунок диапазона. Новые конечные точки диапазона будут доступны как event ['start'] и event ['end'] :

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

Диаграмма готова к вызову внешних методов. Если вы хотите взаимодействовать с диаграммой и вызывать методы после ее рисования, вы должны настроить прослушиватель для этого события до вызова метода draw и вызывать их только после запуска события.

Свойства: нет
select

Запускается, когда пользователь щелкает визуальный объект. Чтобы узнать, что было выбрано, вызовите getSelection() .

Свойства: нет

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

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