Pie chart#

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

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

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

Распределение доли браузера на рынке Причины инцидентов по категориям Источники сетевого трафика Демографические данные пользователей

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

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

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

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

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

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

• Ограничивайте количество сегментов (рекомендуется до 5–7) — при большем числе диаграмма становится нечитаемой.

• Применяйте режим Donut при необходимости отобразить дополнительную информацию в центре.

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

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

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

• Не используйте Value mappings и Field overrides без необходимости — они могут визуально искажать пропорции.

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

• Избегайте анимации при частом обновлении — может вызывать визуальный дискомфорт.

• Используйте Data links для навигации по сегментам — с передачей контекста (например, фильтра по категории).

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

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

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

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

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

   

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

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

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

Чтобы создать визуализацию круговой диаграммы, вам нужен набор данных, содержащий набор числовых значений либо в строках, либо в столбцах, либо в обоих вариантах

Одна строка#

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

Несколько строк#

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

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

Чтобы разрешить отображение значений в нескольких строках, измените параметр «Show» в параметрах Value options с Calculate на All values.

Несколько строк и столбцов#

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

Если вы хотите отобразить все ячейки, измените параметр Show в параметрах Value options с Calculate на All values. При этом элементы также помечаются путем объединения всех текстовых полей (если они у вас есть) с именем столбца.

Если вы хотите отображать только значения из данного поля (или столбца), то после установки параметра All values в параметрах «Значения» для параметра Fields для столбца, который вы хотите суммировать при отображении. Метки значений также объединяются, как указано ранее.

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

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

Panel options#

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

Value options#

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

Pie chart options#

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

Pie chart type#

Выберите стиль отображения круговой диаграммы. Выберите Pie или Donut.

Slice sorting#

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

• Descending (По убыванию) - срезы уменьшаются в размере по часовой стрелке (по умолчанию).

• Ascending (По возрастанию) - срезы увеличиваются в размере по часовой стрелке.

• None (Нет) - сортировка не применяется. Сохраняется исходный порядок данных.

Labels#

Выберите метки для отображения на круговой диаграмме. Можно выбрать несколько меток.

• Название - серия или название поля.

• Процент - процентное соотношение от общего числа.

• Значение - Исходное числовое значение.

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

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

Tooltip options#

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

Tooltip mode#

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

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

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

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

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

Values sort order#

Если вы установите для Tooltip mode значение All, отобразится параметр Values sort order. Этот параметр определяет порядок, в котором значения отображаются во всплывающей подсказке.

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

• None - Grafana автоматически сортирует значения, отображаемые во всплывающей подсказке.

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

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

Legend options#

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

Standard options#

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

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

Data links and actions#

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

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

• Title

• URL

• Open in new tab

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

Value mappings#

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

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

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

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

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

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

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

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

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

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

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

Field overrides#

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

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

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

Результат#

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

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

   • Круговая диаграмма отображается без искажений.

   • Все сегменты пропорциональны своим значениям относительно общей суммы.

   • При выборе типа Donut — отображается центральное отверстие.

   • Диаграмма корректно отображает данные как при одном наборе данных, так и при нескольких (если используется агрегация).

2. Проверка источника данных и режима отображения

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

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

     • При выборе All values — отображаются все строки или ячейки, соответствующие выбранным полям.

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

     • Лимит строк (Limit) корректно ограничивает количество отображаемых сегментов.

3. Проверка сортировки сегментов

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

     • При выборе Descending — сегменты упорядочены по убыванию размера по часовой стрелке.

     • При выборе Ascending — сегменты увеличиваются по размеру по часовой стрелке.

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

4. Проверка меток (Labels)

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

     • Отображаются выбранные типы меток: Название, Процент, Значение.

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

     • Длинные названия не перекрывают соседние сегменты или обрезаются адекватно.

     • Метки читаемы на фоне цветов сегментов (при необходимости измените цветовую схему на более контрастную).

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

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

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

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

     • В режиме All — отображаются все сегменты, а активный выделен жирным.

     • Порядок значений во всплывающей подсказке соответствует выбранному Values sort order (по возрастанию, убыванию или автоматически).

     • Настройки Max width и Max height ограничивают размер подсказки.

     • Расстояние Hover proximity корректно определяет чувствительность наведения.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

     • При клике на сегмент:

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

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

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

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

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

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

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

      • При большом числе сегментов (например, >20) — легенда и диаграмма остаются читаемыми.

      • На малых размерах панели диаграмма масштабируется без потери функциональности.

      • Текст не обрезается или переносится адекватно.

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

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

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

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

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

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