Ympyräkaavio
Piirakkakaavio on pyöreä tilastokuva, joka jaetaan useisiin sektoreihin numeeristen osuuksien näyttämiseksi. Piirakkakaaviossa kunkin sektorin kaaren pituus on verrannollinen sen edustamaan määrään.
Mermaid voi renderöidä piirakkakaavioita.
Koodi
Kopioi
Upotus
pie title The most popular pets
"Dogs" : 386
"Cats" : 85
"Rats" : 15
Syntaksi
Piirakkakaavion piirtäminen Mermaidissa on hyvin yksinkertaista.
showData tarkoittaa todellisten numeeristen arvojen renderöintiä selitetekstin jälkeen, ja se on valinnaista.
- Sen jälkeen tulee title-syntaksi ja sen merkkijonoarvo, joka asettaa piirakkakaavion otsikon, ja se on valinnaista.
- Seuraavaksi tulee tietojoukko; piirakkakaavion sektorit järjestetään myötäpäivään merkintöjen järjestyksessä.
Piirakkakaavion yhden osan label, joka on suljettu lainausmerkkeihin.
Perässä on kaksoispiste : erottimena.
Sen jälkeen tulee positive numeric value, joka edustaa konkreettista arvoa ja tukee enintään kahta desimaalia.
mermaid.grammar_pie_data_option_title_value
Esimerkki
Koodi
Kopioi
Upotus
---
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
Kokoonpano
Piirakkakaavio tukee seuraavia kokoonpanoparametreja:
| Parametri | Kuvaus | Oletusarvo |
|---|---|---|
| textPosition | Piirakkakaavion sektorimerkinnän aksiaalinen sijainti, keskustan 0.0:sta ympyrän reunan 1.0:aan. | 0.75 |
| donutHole | Rengasreiän suhde. Kelvollinen arvoalue on 0–0.9. | 0.1 |
| legendPosition | Selitteen sijainti suhteessa kaavioon. Kelvollisia arvoja ovat top, bottom, left, right ja center. | top |
| highlightSlice | Korosta tietty sektori, jolla on vastaava merkintä; aseta arvoksi hover korostaaksesi kohdistettua sektoria. | hover |
