Обзор
Диаграммы аннотаций — это интерактивные линейные диаграммы временных рядов, поддерживающие аннотации. Обратите внимание, что аннотированная временная шкала теперь автоматически использует аннотационную диаграмму.
Предупреждение о путанице. В настоящее время аннотационная диаграмма 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 |  Запускается, когда пользователь щелкает визуальный объект. Чтобы узнать, что было выбрано, вызовите   Свойства: нет  | 
Политика данных
Весь код и данные обрабатываются и отображаются в браузере. Никакие данные не отправляются ни на один сервер.