Diagram kołowy
Wykres kołowy to okrągła figura statystyczna podzielona na wiele wycinków w celu pokazania proporcji wartości. Na wykresie kołowym długość łuku każdego wycinka jest proporcjonalna do reprezentowanej przez niego ilości.
Mermaid może renderować wykresy kołowe.
Kod
Kopiuj
Osadź
pie title The most popular pets
"Dogs" : 386
"Cats" : 85
"Rats" : 15
Składnia
Rysowanie wykresu kołowego w Mermaid jest bardzo proste.
showData oznacza renderowanie rzeczywistych wartości po tekście legendy; jest to opcjonalne.
- Następnie występuje składnia title i jej wartość tekstowa, ustawiająca tytuł wykresu kołowego; jest to opcjonalne.
- Następnie występuje zestaw danych; wycinki wykresu kołowego będą ułożone zgodnie z ruchem wskazówek zegara w kolejności etykiet.
label jednej części wykresu kołowego, ujęta w podwójne cudzysłowy.
Po niej następuje dwukropek : jako separator.
Następnie występuje positive numeric value reprezentująca konkretną wartość, obsługująca maksymalnie dwa miejsca po przecinku.
mermaid.grammar_pie_data_option_title_value
Przykład
Kod
Kopiuj
Osadź
---
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
Konfiguracja
Wykres kołowy obsługuje następujące parametry konfiguracji:
| Parametr | Opis | Wartość domyślna |
|---|---|---|
| textPosition | Pozycja osiowa etykiety wycinka wykresu kołowego, od 0.0 w środku do 1.0 na krawędzi okręgu. | 0.75 |
| donutHole | Proporcja otworu pierścieniowego. Zakres prawidłowych wartości wynosi od 0 do 0.9. | 0.1 |
| legendPosition | Pozycja legendy względem diagramu. Prawidłowe wartości to top, bottom, left, right i center. | top |
| highlightSlice | Wyróżnij konkretny wycinek z pasującą etykietą; ustawienie hover powoduje wyróżnienie wycinka pod kursorem. | hover |
