Диаграммы «Пирог» — это круговые статистические графики, используемые для отображения числовых пропорций путем разделения данных на секторы. В Mermaid.js вы можете автоматически создавать чистые, адаптивные разбивки данных без необходимости работать с сложными библиотеками диаграмм или инструментами векторного дизайна. Движок отрисовки динамически обрабатывает все назначения цветов и расчеты процентов.
Базовая структура синтаксиса
Каждая диаграмма «Пирог» начинается с pie объявления. Вы можете необязательно включить заголовок, за которым следуют записи данных, где метки категорий заключены в кавычки и сопоставлены с положительными числовыми значениями.
pie
title Пример диаграммы «Пирог»
"Категория A" : 45
"Категория B" : 30
"Категория C" : 25
Справочник по синтаксису
В таблице ниже приведены основные структурные параметры, используемые для построения диаграммы «Пирог» в Mermaid.js.
| Компонент | Описание | Пример синтаксиса |
|---|---|---|
| Объявление | Инициализирует движок отрисовки диаграммы «Пирог». | pie |
| Флаг отображения данных | Необязательный модификатор, добавляемый непосредственно после pieдля отображения фактических чисел вместе с вычисленными процентами. |
pie showData |
| Заголовок | Необязательный заголовок, четко отображаемый над центром компоновки диаграммы. | title Источники выручки за III квартал |
| Метка записи данных | Название категории, которое всегда должно быть заключено в двойные кавычки. | "Органический поиск" |
| Разделитель данных | Символ двоеточия, разделяющий строку метки от ее математического значения. | : |
| Значение данных | Положительное число. Поддерживает абсолютные значения или прямые десятичные веса до двух десятичных знаков. | 54.25 |
Реальный шаблон: Источники трафика на веб-сайте
Этот шаблон демонстрирует классическое разделение маркетинговой и аналитической панели. Он использует параметр showData для явного отображения исходных метрик трафика непосредственно внутри легенды, в то время как диаграмма отображает пропорции макета.
pie showData title Основные каналы трафика
"Органический поиск" : 3540
"Прямой трафик" : 2410
"Социальные сети" : 1850
"Сайты-рефералы" : 920
"Email-кампании" : 680
Совет по синтаксису: По умолчанию Mermaid отображает только относительные вычисленные проценты (например, 35%) над каждой секцией диаграммы. Добавление ключевого слова showData сразу после pie изменяет метки, чтобы отображать как проценты на диаграмме, так и точные исходные значения в сопутствующем списке легенды.
Расширенная концепция: директивы и форматирование
Для страниц с высокой плотностью документации вы можете применить встроенную директиву конфигурации в начале фрагмента кода для настройки поведения стилей, изменения смещений размещения текста или изменения структурных стилей линий.
---
config:
pie:
textPosition: 0.6
themeVariables:
pieOuterStrokeWidth: "3px"
---
pie title Распределение операционного бюджета
"Разработка продуктов" : 40.5
"Маркетинг и рост" : 25.25
"Операции с клиентами" : 20.0
"Административные расходы" : 14.25
Распространенные ошибки синтаксиса
Хотя диаграммы в виде кругов имеют один из самых простых синтаксисов в Mermaid, несколько ошибок форматирования могут привести к сбоям при разборе макета. Избегайте этих распространенных ошибок:
- Отрицательные числа: Двигатель отображения принимает только положительные числовые значения. Передача отрицательного значения или нуля нарушит границы математической обработки.
- Требования к кавычкам: Метки категорий данных всегда должны использовать двойные кавычки. Одинарные кавычки или отсутствие кавычек приведут к неправильной сборке.
- Ограничения точности десятичных дробей: Хотя Mermaid плавно обрабатывает точные десятичные дроби с плавающей точкой, по умолчанию он отслеживает параметры до двух десятичных знаков. Округление значений заранее обеспечивает строгую согласованность.
- Плотность срезов: Для четкой визуальной коммуникации рекомендуется ограничить количество срезов на диаграммах от 6 до 8. Если в ваших наборах данных больше элементов, объедините меньшие узлы в категорию «Другое», чтобы сохранить читаемость вашего дизайна.