Аннотированная временная шкала

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

Обзор

Интерактивная линейная диаграмма временных рядов с дополнительными аннотациями.

Вместо этого аннотированная временная шкала теперь автоматически использует аннотационные диаграммы .

Пример 

<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.
разрешить перерисовку логическое значение ЛОЖЬ

Включает более эффективную технику перерисовки для второго и последующих вызовов draw() в этой визуализации. Он только перерисовывает область диаграммы. Чтобы использовать эту опцию, необходимо выполнить следующие требования:

  • allowRedraw должно иметь значение true
  • displayAnnotations должно иметь значение false (то есть вы не можете отображать аннотации)
  • вы должны передать те же параметры и значения (за исключениемallowRedraw и displayAnnotations), что и при первом вызове draw() .
всеЗначенияСуффикс нить никто Суффикс, добавляемый ко всем значениям в шкалах и легенде.
аннотацииШирина число 25 Ширина (в процентах) области аннотаций от всей области диаграммы. Должно быть число в диапазоне 5–80.
цвета Массив строк Цвета по умолчанию Цвета, используемые для линий и меток диаграммы. Массив строк. Каждый элемент представляет собой строку в допустимом цветовом формате HTML. Например, «красный» или «#00cc00».
Формат даты нить Либо «ММММ дд, гггг», либо «ЧЧ:мм ММММ дд, гггг», в зависимости от типа первого столбца (дата или дата-время соответственно). Формат, используемый для отображения информации о дате в правом верхнем углу. Формат этого поля соответствует классу Java SimpleDateFormat.
отображениеАннотации логическое значение ЛОЖЬ Если установлено значение true, на диаграмме будут отображаться аннотации поверх выбранных значений. Если для этого параметра установлено значение true, после каждого числового столбца можно добавить два дополнительных столбца строки аннотации: один для заголовка аннотации и один для текста аннотации.
displayAnnotationsFilter логическое значение ЛОЖЬ Если установлено значение true, на диаграмме будет отображаться фильтр для фильтрации аннотаций. Используйте эту опцию, если имеется много аннотаций.
displayDateBarSeparator логическое значение истинный Отображать ли небольшой разделитель ( | ) между значениями ряда и датой в легенде, где true означает «да».
displayExactValues логическое значение ЛОЖЬ Отображать ли сокращенную и округленную версию значений в верхней части графика для экономии места; false указывает, что это возможно. Например, если установлено значение false, 56123,45 может отображаться как 56,12k.
дисплейЛегендаТочки логическое значение истинный Отображать ли точки рядом со значениями в тексте легенды, где true означает «да».
displayLegendValues логическое значение истинный Отображать ли выделенные значения в легенде, где true означает «да».
DisplayRangeSelector логическое значение истинный

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

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

дисплейZoomButtons логическое значение истинный Показывать ли ссылки масштабирования («1d 5d 1m» и т. д.), где false означает «нет».
наполнять число 0 Число от 0 до 100 (включительно), определяющее альфу заливки под каждой линией линейного графика. 100 означает 100% непрозрачную заливку, 0 означает полное отсутствие заливки. Цвет заливки тот же, что и линия над ней.
выделитьточку нить 'ближайший'

Какую точку в ряду выделить и соответствующие значения отобразить в легенде. Выберите одно из этих значений:

  • «ближайший» — значения, ближайшие по оси X к мыши.
  • «последний» — следующий набор значений слева от мыши.
легендаПозиция нить 'тот же ряд' Помещать ли цветную легенду в одну строку с кнопками масштабирования и датой («sameRow») или в новую строку («newRow»).
Макс число автоматический Максимальное значение, отображаемое по оси Y. Если максимальная точка данных превышает это значение, этот параметр будет игнорироваться, и диаграмма будет настроена так, чтобы отображать следующую крупную отметку выше максимальной точки данных. Это будет иметь приоритет над максимумом оси Y, определяемым scaleType .
мин число автоматический Минимальное значение для отображения по оси Y. Если минимальная точка данных меньше этого значения, этот параметр будет игнорироваться, и диаграмма будет настроена так, чтобы отображать следующую крупную отметку ниже минимальной точки данных. Это будет иметь приоритет над минимумом оси Y, определяемым scaleType .
числовые форматы Строка или карта чисел: пары строк. автоматический

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

Шаблоны должны быть в формате, указанном классом 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 ).

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

толщина число 0 Число от 0 до 10 (включительно), определяющее толщину линий, где 0 — самая тонкая линия.
wрежим нить 'окно' Параметр «Режим окна» (wmode) для Flash-диаграммы. Доступные значения: «непрозрачный», «окно» или «прозрачный».
масштабироватьВремяКонца Дата никто Устанавливает дату/время окончания выбранного диапазона масштабирования.
масштабированиеСтарттиме Дата никто Устанавливает дату/время начала выбранного диапазона масштабирования.

Методы

Метод Тип возврата Описание
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 .
  • Дата start . Время начала диапазона масштабирования.
  • Дата end . Время окончания диапазона масштабирования.
готовый Диаграмма готова для вызовов внешних методов. Если вы хотите взаимодействовать с диаграммой и вызывать методы после ее рисования, вам следует настроить прослушиватель для этого события перед вызовом метода draw и вызывать их только после того, как событие было запущено. Никто
выбирать Когда пользователь нажимает на флажок аннотации (маркер), выбирается соответствующая ячейка в таблице данных. Затем визуализация запускает это событие. Никто

Примечание . Из-за определенных ограничений события могут не создаваться, если вы обращаетесь к странице в браузере как к файлу (например, «file://»), а не с сервера (например, «http://www»). .

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

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

Примечания

Из-за настроек безопасности Flash это (и все визуализации на основе Flash) может работать неправильно при доступе из местоположения файла в браузере (например, file:///c:/webhost/myhost/myviz.html), а не из URL-адрес веб-сервера (например, http://www.myhost.com/myviz.html). Обычно это проблема только тестирования. Эту проблему можно решить, как описано на веб-сайте Macromedia .