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

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

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

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

displayZoomButtons логический истинный Показывать ли ссылки на зум («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 — самая тонкая.
wmode нить 'окно' Параметр режима окна (wmode) для флеш-диаграммы. Доступные значения: «непрозрачный», «окно» или «прозрачный».
ZoomEndTime Датировать никто Устанавливает дату/время окончания выбранного диапазона масштабирования.
zoomStartTime Датировать никто Устанавливает начальную дату/время выбранного диапазона масштабирования.

Методы

Метод Тип возврата Описание
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 .