Taartdiagram
Een cirkeldiagram is een ronde statistische grafiek die in meerdere sectoren wordt verdeeld om numerieke verhoudingen weer te geven. In een cirkeldiagram is de booglengte van elke sector evenredig met het weergegeven aantal.
Mermaid kan cirkeldiagrammen renderen.
Kopiëren
Insluiten
pie title The most popular pets
"Dogs" : 386
"Cats" : 85
"Rats" : 15
Syntaxis
Het tekenen van een cirkeldiagram in Mermaid is heel eenvoudig.
showData geeft aan dat de werkelijke numerieke waarde na de legendatekst wordt gerenderd; dit is optioneel.
- Daarna volgt de syntaxis title met de tekenreekswaarde ervan, die de titel van het cirkeldiagram instelt; dit is optioneel.
- Vervolgens komt de dataset; de sectoren van het cirkeldiagram worden met de klok mee gerangschikt in de volgorde van de labels.
Het label van een bepaald onderdeel van het cirkeldiagram, tussen dubbele aanhalingstekens.
Daarna volgt een dubbele punt : als scheidingsteken.
Daarna volgt een positive numeric value die de specifieke waarde aangeeft, met ondersteuning voor maximaal twee decimalen.
mermaid.grammar_pie_data_option_title_value
Voorbeeld
Kopiëren
Insluiten
---
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
Configuratie
Het cirkeldiagram ondersteunt de volgende configuratieparameters:
| Parameter | Beschrijving | Standaardwaarde |
|---|---|---|
| textPosition | De axiale positie van de labels van de sectoren van het cirkeldiagram, van 0.0 in het midden tot 1.0 aan de rand van de cirkel. | 0.75 |
| donutHole | De verhouding van het ringvormige gat. Geldig bereik is 0 tot 0.9. | 0.1 |
| legendPosition | De positie van de legenda ten opzichte van het diagram. Geldige waarden zijn top, bottom, left, right en center. | top |
| highlightSlice | Markeer een specifieke sector met een overeenkomend label; stel deze in op hover om de sector waarover de muis zweeft te markeren. | hover |
