Heatmap#

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

Например, если вы хотите получить представление об изменениях температуры за последние несколько лет, вы можете использовать визуализацию тепловых карт для определения тенденций в данных:

Можно использовать визуализацию тепловой карты, если вам нужно:

• Визуализировать большую плотность распределения данных.

• Объединять большие объемы данных с помощью различных цветовых схем, которые легче интерпретировать.

• Выявлять любые отклонения в распределении данных.

• Проведите статистический анализ, чтобы увидеть, как меняются значения или тенденции с течением времени.

Предусловия#

• Пользователь авторизован и имеет права на редактирование дашборда.

• Источник данных предоставляет временные ряды с числовыми значениями.

• Визуализация «Heatmap» доступна в списке типов панелей.

Правила эксплуатации#

• Используйте Heatmap для анализа распределения данных во времени — не подходит для отображения точечных значений.

• Настройте размер бакетов (X и Y) осмысленно: слишком мелкие — вызывают шум, слишком крупные — скрывают детали.

• Применяйте логарифмическую или symlog шкалу при большом разбросе значений для лучшей визуализации.

• Выбирайте цветовую схему с учетом восприятия (включая цветовую слепоту) и контраста с фоном.

• Ограничьте отображение ячеек с низкой/высокой плотностью через Hide cells with values — чтобы исключить шум или аномалии.

• Используйте режим Opacity при необходимости монохромного отображения с акцентом на плотности.

• Включайте Show color scale во всплывающих подсказках — для точной интерпретации значений.

• Не включайте Show legend без необходимости — на малых панелях это может загромождать интерфейс.

• Проверяйте корректность агрегации данных — особенно при использовании Calculate from data = No.

• Избегайте избыточного числа рядов при использовании нескольких осей Y — это усложняет анализ.

Последовательность выполнения#

1. Убедитесь, что плагин визуализации «Heatmap» установлен в продукте PVV.

2. Откройте дашборд визуализации в интерфейсе PVV.

3. Выберите тип визуализации «Heatmap».

4. Настройте параметры конфигурации

   

5. Нажмите кнопку «Save Dashboard», чтобы отобразить визуализацию панели.

Поддерживаемые форматы данных#

Пример#

Приведенная ниже таблица представляет собой упрощенный результат распределения случайных блужданий по времени:

Данные преобразуются следующим образом:

Zoom panel time range#

Можно увеличивать и уменьшать масштаб временного диапазона панели, что, в свою очередь, изменяет временной диапазон панели мониторинга.

Zoom in - щелкните и перетащите на панель, чтобы увеличить определенный временной диапазон. Zoom out - дважды щелкните в любом месте панели, чтобы уменьшить временной диапазон.

При уменьшении масштаба при каждом двойном щелчке диапазон увеличивается вдвое, добавляя одинаковое время к каждой стороне диапазона. Например, если исходный временной диапазон составляет от 9:00 до 9:59, при каждом двойном щелчке диапазон времени изменяется следующим образом:

• Следующий интервал: 8:30 - 10:29

• Следующий интервал: 7:30 - 11:29

Записи с экрана, демонстрирующие эти взаимодействия, приведены в документации по обзору панели.

Параметры конфигурации#

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

Panel options#

В разделе Panel options на панели редактора панелей задайте основные параметры, такие как заголовок и описание панели, а также ссылки на панели.

Heatmap options#

Следующие параметры определяют, как рассчитываются и группируются данные в тепловой карте.

Y-Axis options#

Следующие параметры определяют отображение оси y:

Multiple y-axes#

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

Colors options#

Цветовая гамма определяет соответствие между количеством значений (в каждой группе) и цветом, назначенным каждой группе. Самый левый цвет в спектре соответствует минимальному количеству, а цвет в самой правой части - максимальному количеству. Некоторые цветовые схемы автоматически инвертируются при использовании светлой темы.

Можно изменить цветовой режим на непрозрачность. В этом случае цвет не изменится, но степень непрозрачности будет меняться в зависимости от количества сегментов

Mode#

Используйте следующие опции для определения цветов тепловой карты.

• Scheme - значение области, представленное цветом ячейки.

  • Scheme - Если выбран режим «Схема», выберите цветовую схему.

• Opacity - значение области, представленное непрозрачностью ячейки. Непрозрачная ячейка означает максимальное значение.

  • Color - базовый цвет ячейки.

  • Scale - масштаб для сопоставления значений сегмента с непрозрачностью.

    • Exponential - Шкала экспоненциальной степени. Непрозрачность ячейки рассчитывается как value ^ k, где k - настроенное значение показателя степени. Если показатель меньше 1, вы получите логарифмическую шкалу. Если показатель больше 1, вы получите экспоненциальную шкалу. В случае 1 масштаб будет таким же, как и линейный.

      • Exponent - значение показателя степени, превышающее 0.

    • Linear - Линейный масштаб. Значение сегмента линейно зависит от непрозрачности.

Steps#

Установите значение от 1 до 128.

Reverse#

Переключите переключатель, чтобы изменить цветовую схему на противоположную. Этот параметр применяет только цветовой режим схемы.

Start/end color scale from value#

По умолчанию Grafana вычисляет цвета ячеек на основе минимальных и максимальных значений сегмента. С помощью Min и Max вы можете заменить эти значения. Рассмотрим значение сегмента как ось Z, а Min и Max - как Z-Min и Z-Max соответственно.

• Start - минимальное значение, используемое для расчета цвета ячейки. Если значение ячейки меньше минимального, то оно сопоставляется с минимальным цветом. Минимальное значение серии является значением по умолчанию.

• End - максимальное значение, используемое для расчета цвета ячейки. Если значение параметра Bucket больше Max, то оно отображается в цвет maximum. Значение series max является значением по умолчанию.

Cell display options#

Используйте эти настройки для управления отображением ячеек тепловой карты:

Tooltip options#

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

Tooltip mode#

При наведении курсора на визуализацию может отображать всплывающие подсказки. Выберите, как будут выглядеть всплывающие подсказки.

• Single - Всплывающая подсказка при наведении курсора показывает только один ряд, на который вы наводите курсор в визуализации.

• All - Всплывающая подсказка при наведении курсора мыши отображает все серии в визуализации. Система выделяет серию, на которую вы наводите курсор, жирным шрифтом в списке серий во всплывающей подсказке.

• Hidden - не отображает всплывающую подсказку при работе с визуализацией.

Используйте переопределение, чтобы скрыть отдельные серии из всплывающей подсказки.

Show color scale#

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

Legend options#

Выберите, хотите ли вы отображать условные обозначения тепловой карты в визуализации, переключив переключатель Показывать условные обозначения.

Exemplars#

Установите цвет, используемый для отображения типовых данных.

Data links and actions#

Ссылки на данные позволяют подключаться к другим панелям, информационным панелям и внешним ресурсам, а действия позволяют запускать простые вызовы API без проверки подлинности. В обоих случаях вы можете выполнять эти задачи, сохраняя контекст исходной панели.

Для каждого канала передачи данных установите следующие параметры:

• Title;

• URL;

• Open in new tab;

Дополнительные сведения смотри в разделе Настройка ссылок на данные и действий.

Field overrides#

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

Выберите один из следующих вариантов переопределения:

Дополнительные сведения смотри в разделе Настройка переопределений полей.

Результат#

После настройки и сохранения панели с визуализацией Heatmap выполните следующие шаги для проверки корректности ее работы:

1. Проверка отображения тепловой карты
   Убедитесь, что:

   • На панели отображается тепловая карта с ячейками, окрашенными в соответствии с плотностью данных.

   • По оси X отложено время, по оси Y — диапазоны значений (бакеты).

   • Цветовая гамма (или непрозрачность) корректно отражает количество попаданий в каждый бакет.

2. Проверка настройки бакетов

   • Убедитесь, что:

     • Бакеты по оси X (временные интервалы) соответствуют заданному размеру (например, 1h, 30m).

     • Бакеты по оси Y (диапазоны значений) корректно делят данные (по Size или Count).

   • При изменении шкалы Y (Linear, Logarithmic, Symlog) — перерасчет бакетов происходит корректно.

3. Проверка цветовой схемы

   • Убедитесь, что:

     • Цвета ячеек соответствуют выбранной цветовой схеме.

     • При включенном режиме Opacity — изменяется прозрачность, а не цвет.

     • При включенной опции Reverse — цветовая шкала инвертирована.

   • Проверьте, что значения Start и End для цветовой шкалы ограничивают отображение, и ячейки за пределами этих значений окрашиваются в крайние цвета.

4. Проверка взаимодействия с графиком

   • Проверьте функции масштабирования:

     • Zoom in — выделите область на графике, временной диапазон должен сузиться.

     • Zoom out — двойной клик должен расширять временной диапазон вдвое.

   • Убедитесь, что при масштабировании данные перерасчитываются и перерисовываются.

5. Проверка всплывающих подсказок (tooltip)

   • Наведите курсор на ячейку — должна появиться всплывающая подсказка.

   • Убедитесь, что:

     • В подсказке отображаются:

       • Временной интервал (ось X).

       • Диапазон значений (ось Y).

       • Количество попаданий (или другая агрегированная метрика).

     • При включенной опции Show histogram (Y axis) — во всплывающей подсказке отображается гистограмма распределения.

     • При включенной опции Show color scale — отображается шкала с указанием текущего значения.

   • Проверьте режимы:

     • Single — подсказка только для активной ячейки.

     • All — отображаются данные всех рядов (если их несколько).

     • Hidden — подсказки не появляются.

6. Проверка легенды

   • Убедитесь, что:

     • Легенда отображается при включенной опции Show legend.

     • Цветовая шкала в легенде соответствует используемой в графике.

     • При наведении на легенду подсвечиваются соответствующие ячейки.

7. Проверка фильтрации ячеек

   • Если заданы условия:

     • Hide cells with values <= X

     • Hide cells with values >= Y

   • Убедитесь, что ячейки с соответствующими значениями скрыты.

8. Проверка работы с несколькими осями Y

   • Если настроены несколько рядов с разными единицами измерения:

     • Убедитесь, что для каждого ряда корректно задана своя ось Y.

     • Проверьте, что данные не искажаются при наложении.

9. Проверка ссылок на данные (data links)

   • Если добавлены ссылки:

     • Клик по ячейке должен переходить по-указанному URL.

     • Параметры (например, временной диапазон, значения) должны передаваться в ссылку.

     • При включенной опции Open in new tab — ссылка открывается в новой вкладке.

10. Проверка адаптивности и производительности

    • Обновите страницу — тепловая карта должна корректно перерисоваться.

    • Откройте дашборд на разных устройствах — график должен масштабироваться.

    • При большом объеме данных — убедитесь, что визуализация не тормозит, а данные агрегируются.

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