Cirkeldiagram
Ett cirkeldiagram är en cirkulär statistisk graf som delas upp i flera sektorer för att visa numeriska proportioner. I ett cirkeldiagram är varje sektors båglängd proportionell mot den kvantitet den representerar.
Mermaid kan rendera cirkeldiagram.
Kod
Kopiera
Bädda in
pie title The most popular pets
"Dogs" : 386
"Cats" : 85
"Rats" : 15
Syntax
Att rita ett cirkeldiagram i Mermaid är mycket enkelt.
showData betyder att det faktiska numeriska värdet renderas efter förklaringstexten, vilket är valfritt.
- Därefter följer title -syntaxen och dess strängvärde, som anger en titel för cirkeldiagrammet, vilket är valfritt.
- Därefter följer datamängden; cirkeldiagrammets sektorer ordnas medurs i etikettens ordning.
label för en del av cirkeldiagrammet, omgiven av dubbla citattecken.
Följt av ett kolon : som avgränsare.
Därefter följer positive numeric value , som anger det specifika numeriska värdet, med stöd för upp till två decimaler.
mermaid.grammar_pie_data_option_title_value
Exempel
Kod
Kopiera
Bädda in
---
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
Konfiguration
Cirkeldiagrammet stöder följande konfigurationsparametrar:
| Parameter | Beskrivning | Standardvärde |
|---|---|---|
| textPosition | Cirkeldiagrammets sektoretiketters axiella position, från 0.0 i mitten till 1.0 vid cirkelns kant. | 0.75 |
| donutHole | Andel av ringhålet. Giltigt värdeintervall är 0 till 0.9. | 0.1 |
| legendPosition | Teckenförklaringens position i förhållande till diagrammet. Giltiga värden är top, bottom, left, right och center. | top |
| highlightSlice | Markera en specifik sektor med matchande etikett; ställ in på hover för att markera den sektor som muspekaren hålls över. | hover |
