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

Обзор

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

Предупреждение о путанице. В настоящее время аннотационная диаграмма 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, определяемым 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.sortAscending

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

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

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

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

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

Тип: номер
По умолчанию: 0
масштабироватьВремяКонца

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

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

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

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

Методы

Метод
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() .

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

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

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