XY chart#

XY-диаграммы позволяют визуализировать произвольные значения x и y в виде графика, что позволяет легко показать взаимосвязь между двумя переменными. XY-диаграммы обычно используются для создания точечных диаграмм. Можно использовать их для создания пузырьковых диаграмм, где значения полей определяют размер каждого пузырька:

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

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

• В системе настроены источники данных, содержащие числовые поля для визуализации.

• Данные в источнике включают как минимум два числовых поля (X и Y) или поле времени и числовое поле.

• Плагин визуализации «XY chart» установлен и доступен в интерфейсе GRAF.

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

• Используйте XY chart для анализа взаимосвязи между двумя числовыми переменными — не подходит для отображения временных трендов (используйте Time series).

• Применяйте Points — для точечных диаграмм, Lines или Both — при необходимости показать последовательность или динамику.

• Используйте Size field — для создания пузырьковых диаграмм, где размер точки отражает третью переменную.

• Настройте Color field — для визуального разделения данных по категориям или интенсивности.

• Применяйте Logarithmic или Symlog шкалу — при большом разбросе значений на оси Y.

• Используйте Field overrides — для индивидуальной настройки формы, цвета или размера точек отдельных рядов.

• Включайте Tooltip mode: Single — чтобы избежать перегрузки информацией при наведении.

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

• Проверяйте корректность X-field и Y-field при ручном режиме отображения (Manual series mapping).

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

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

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

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

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

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

   

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

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

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

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

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

Panel options#

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

XY Chart options#

Следующие параметры позволяют управлять отображением данных на диаграмме xy:

Series mapping#

Укажите, как данные рядов отображаются на диаграмме. Выберите из:

• Auto - Автоматически генерирует ряды из всех доступных фреймов данных (или наборов данных). Можно выполнить фильтрацию, чтобы выбрать только один кадр.

• Manual - явно определите ряд, выбрав один из доступных фреймов данных.

В зависимости от выбранного вами варианта отображения рядов параметры Frame, X-field, и Y-field различаются.

Show#

Укажите, как значения будут представлены в визуализации. Выберите один из вариантов:

• Points - Отображать значения в виде точек. При выборе этого параметра также отображается параметр Размер точки.

• Lines - Добавить линию между значениями. При выборе этого параметра также отображаются параметры Стиль линии и ширина линии.

• Both - Отображают как точки, так и линии.

Line style#

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

• Solid - Отображать сплошную линию. Это настройка по умолчанию.

• Dash - Отображать пунктирную линию. При выборе этой опции отображается раскрывающийся список, в котором вы можете выбрать длину и интервал для штрихов линии. По умолчанию длина и интервал установлены на `10, 10.

• Dots - отображать пунктирные линии. При выборе этой опции отображается раскрывающийся список, в котором можно выбрать интервал между точками. По умолчанию интервал между точками установлен равным 0, 10 (первое число обозначает длину точки, которая всегда равна нулю).

Tooltip options#

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

Legend options#

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

Axis options#

Параметры в разделе Axis определяют способ отображения осей x и y. Некоторые параметры не вступают в силу, пока вы не нажмете кнопку за пределами редактируемого поля. Можно нажать Enter.

Placement#

Выберите расположение оси y. Выберите одно из следующих значений:

• Auto - Автоматическое назначение оси y ряду. Если имеется два или более ряда с разными единицами измерения, Grafana назначает левую ось первой единице измерения, а правую - последующим единицам измерения.

• Left - Отобразить все оси y с левой стороны.

• Right - Отобразить все оси y с правой стороны.

• Hidden - Скрыть все оси. Чтобы выборочно скрыть оси, добавьте переопределение поля, предназначенное для определенных полей.

Scale#

Установите шкалу значений по оси y. Выберите один из вариантов:

• Linear - делит шкалу на равные части.

• Logarithmic - используйте логарифмическую шкалу. Если вы выберете этот параметр, в списке «База журнала» выберите двоичную (с основанием 2) или обычную (с основанием 10) логарифмическую шкалу.

• Symlog - используйте симметричную логарифмическую шкалу. Если вы выберете этот параметр, выберите также:

  • Log base - выберите двоичную (с основанием 2) или обычную (с основанием 10) логарифмическую шкалу.

  • Linear threshold - установите порог, при котором шкала изменяется с линейной на логарифмическую.

Soft min and soft max#

Установите параметр Soft min или soft max, чтобы лучше контролировать пределы оси y. По умолчанию Grafana автоматически устанавливает диапазон для оси y на основе набора данных.

Настройки Soft min и soft max могут предотвратить увеличение небольших изменений в данных, когда они в основном плоские. Напротив, жесткие значения min и max помогают избежать искажения полезных деталей в данных, отсекая периодические всплески после определенной точки.

Чтобы задать жесткие ограничения для оси y, задайте стандартные параметры min/max. Дополнительные сведения смотри в разделе Настройка стандартных параметров. В следующих примерах показано, как этот параметр работает при визуализации временных рядов:

Standard options#

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

Чтобы узнать больше, обратитесь к разделу Настройка стандартных параметров.

Data links and actions#

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

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

• Title;

• URL;

• Open in new tab;

• One click - открывает ссылку для передачи данных одним щелчком мыши. Только для одной ссылки для передачи данных может быть активирован один клик одновременно.

Для каждого действия задайте следующие параметры вызова API:

Value mappings#

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

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

• Condition - Выберите, что будет отображаться в отображаемом тексте, и (необязательно) цвет:

  • Value - Значения для конкретных значений

  • Range - Числовые диапазоны

  • Regex - Регулярные выражения

  • Special - специальные значения, такие как Null, NaN (не число), или логические значения, такие как true и false

• Display text -Отображаемый текст

• Color - Цвет (необязательно)

• Icon - Значок (только на холсте

Чтобы узнать больше, обратитесь к разделу Настройка сопоставлений значений.

Thresholds#

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

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

Field overrides#

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

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

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

Результат#

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

1. Проверка отображения данных на графике
   Убедитесь, что:

   • Все точки (или линии) отображаются корректно на координатной плоскости.

   • Значения по осям X и Y соответствуют данным из источника.

   • При использовании Series mapping: Auto — ряды определяются автоматически по полям фрейма.

   • При выборе Manual — отображается только указанный ряд, с выбранными X-field и Y-field.

2. Проверка режима отображения (Show)

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

     • При выборе Points — отображаются только точки.

     • При выборе Lines — точки соединены линиями в порядке следования данных.

     • При выборе Both — отображаются и точки, и линии.

   • Проверьте, что Point size, Point shape, Line style и Line width соответствуют заданным настройкам.

3. Проверка размера и цвета точек (Size field и Color field)

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

     • При указании Size field — размер точек пропорционален значениям этого поля.

     • Минимальный и максимальный размеры точек соответствуют настройкам Min point size и Max point size.

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

     • Цветовая схема (Color scheme) применяется корректно.

4. Проверка стиля линий

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

     • При выборе Solid — линии сплошные.

     • При выборе Dash — линии пунктирные, с настроенной длиной штриха и интервала (по умолчанию 10, 10).

     • При выборе Dots — линии отображаются в виде точек с заданным интервалом (по умолчанию 0, 10).

5. Проверка осей (Axis options)

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

     • Ось Y отображается слева, справа или скрыта в соответствии с настройкой Placement.

     • При наличии нескольких рядов с разными единицами измерения — Auto корректно распределяет оси.

     • Подпись оси (Label) отображается и соответствует выбранной единице измерения.

     • Сетка отображается при включенном Show grid lines.

     • Шкала оси Y соответствует выбранному типу: Linear, Logarithmic или Symlog.

     • При выборе Logarithmic или Symlog — указана корректная Log base (2 или 10).

     • При использовании Symlog — задан Linear threshold, и переход от линейной к логарифмической шкале происходит корректно.

     • При включенном Centered zero — ноль находится по центру оси.

     • Пределы оси соответствуют настройкам Soft min и Soft max (плавное масштабирование).

     • Жесткие ограничения (если заданы в Standard options > Min/Max) применяются и не позволяют выходить за указанные границы.

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

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

     • При наведении на точку отображается всплывающая подсказка.

     • В режиме Single — показывается информация только по текущему ряду.

     • В режиме Hidden — подсказки не отображаются.

     • Максимальная ширина подсказки (Max width) соблюдается.

     • Подсказка содержит корректные значения X, Y и, при необходимости, размер и цвет.

7. Проверка легенды (Legend)

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

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

     • Режим отображения (List или Table) соответствует выбранному.

     • Расположение (Placement) — Bottom или Right — отображается корректно.

     • При размещении справа — ширина легенды соответствует настройке Width.

     • В легенде отображаются выбранные значения: Min, Max, Avg, Total и др.

     • Цвета и формы в легенде соответствуют рядам на графике.

8. Проверка единиц измерения и форматирования

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

     • Единицы измерения (Unit) применяются ко всем значениям (в осях, легенде, подсказках).

     • Количество знаков после запятой (Decimals) отображается корректно.

     • Пустые или null значения заменяются текстом из No value (по умолчанию — -).

     • Отображаемые имена полей (Display name) соответствуют настройкам, включая использование переменных.

9. Проверка цветовой схемы и стилизации

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

     • Цвета рядов соответствуют выбранной Color scheme.

     • При использовании Value mappings — определенные значения отображаются с заданным цветом и текстом.

     • Переопределения (Field overrides) применяются к нужным полям (например, изменение цвета, формы, размера точек).

10. Проверка интерактивности и ссылок

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

      • При клике на точку:

        • Если настроена одна Data link — происходит переход по ссылке (один клик, если включено).

        • Если несколько — открывается меню выбора.

      • Контекст (временной диапазон, переменные дашборда) передается при переходе.

      • Заголовки и URL ссылок отображаются корректно.

      • Действия (API-вызовы) выполняются при нажатии на соответствующие кнопки.

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

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

      • График быстро загружается даже при большом количестве точек.

      • При изменении размера панели — график и элементы масштабируются корректно.

      • На малых экранах — легенда, оси и метки остаются читаемыми.

12. Проверка отображения в разных режимах

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

      • Визуализация корректно отображается в режиме редактирования и в режиме просмотра.

      • Все настройки сохраняются после перезагрузки дашборда.

      • При открытии в полноэкранном режиме — элементы не накладываются друг на друга.

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