Круговая диаграмма
Круговая диаграмма — это круговое статистическое изображение, разделённое на несколько секторов для отображения числовых пропорций. На круговой диаграмме длина дуги каждого сектора пропорциональна представляемому им количеству.
Mermaid может рендерить круговые диаграммы.
Код
Копировать
Встраивание
pie title The most popular pets
"Dogs" : 386
"Cats" : 85
"Rats" : 15
Синтаксис
Рисование круговой диаграммы в Mermaid очень просто.
showData обозначает рендеринг фактических числовых значений после текста легенды; это необязательно.
- Далее следует синтаксис title и его строковое значение, задающее заголовок круговой диаграммы; это необязательно.
- Затем идёт набор данных; секторы круговой диаграммы располагаются по часовой стрелке в порядке меток.
label некоторой части круговой диаграммы, заключённая в двойные кавычки.
Далее следует двоеточие : в качестве разделителя.
Затем идёт positive numeric value , обозначающее конкретное числовое значение, поддерживается до двух знаков после запятой.
mermaid.grammar_pie_data_option_title_value
Пример
Код
Копировать
Встраивание
---
config:
pie:
textPosition: 0.5
themeVariables:
pieOuterStrokeWidth: "5px"
---
pie showData
title Key elements in Product X
"Calcium" : 42.96
"Potassium" : 50.05
"Magnesium" : 10.01
"Iron" : 5
Конфигурация
Круговая диаграмма поддерживает следующие параметры конфигурации:
| Параметр | Описание | Значение по умолчанию |
|---|---|---|
| textPosition | Осевое положение метки сектора круговой диаграммы: от 0.0 в центре до 1.0 на краю круга. | 0.75 |
| donutHole | Пропорция отверстия кольца. Допустимый диапазон значений — от 0 до 0.9. | 0.1 |
| legendPosition | Положение легенды относительно диаграммы. Допустимые значения: top, bottom, left, right и center. | top |
| highlightSlice | Выделение определённого сектора с совпадающей меткой; установка hover позволяет выделять сектор, на который наведён курсор. | hover |
