Kreisdiagramm
Ein Kreisdiagramm ist eine kreisförmige statistische Grafik, die in mehrere Sektoren unterteilt wird, um Zahlenverhältnisse darzustellen. In einem Kreisdiagramm ist die Bogenlänge jedes Sektors proportional zur dargestellten Menge.
Mermaid kann Kreisdiagramme rendern.
Kopieren
Einbetten
pie title The most popular pets
"Dogs" : 386
"Cats" : 85
"Rats" : 15
Syntax
Das Zeichnen eines Kreisdiagramms in Mermaid ist sehr einfach.
showData bedeutet, die tatsächlichen Zahlenwerte nach dem Legendtext zu rendern; dies ist optional.
- Darauf folgt die title-Syntax mit ihrem Zeichenkettenwert, um einen Titel für das Kreisdiagramm festzulegen; dies ist optional.
- Als Nächstes kommen die Daten; die Sektoren des Kreisdiagramms werden in der Reihenfolge der Labels im Uhrzeigersinn angeordnet.
Der label eines Teils im Kreisdiagramm, in doppelte Anführungszeichen gesetzt.
Darauf folgt ein Doppelpunkt : als Trennzeichen.
Danach folgt ein positiver numeric value , der den konkreten Zahlenwert angibt, mit Unterstützung für bis zu zwei Dezimalstellen.
mermaid.grammar_pie_data_option_title_value
Beispiel
Kopieren
Einbetten
---
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
Das Kreisdiagramm unterstützt die folgenden Konfigurationsparameter:
| Parameter | Beschreibung | Standardwert |
|---|---|---|
| textPosition | Die axiale Position der Sektorlabels im Kreisdiagramm, von 0.0 in der Mitte bis 1.0 am Rand des Kreises. | 0.75 |
| donutHole | Das Verhältnis des ringförmigen Lochs. Der gültige Wertebereich liegt zwischen 0 und 0.9. | 0.1 |
| legendPosition | Die Position der Legende relativ zum Diagramm. Gültige Werte sind top, bottom, left, right und center. | top |
| highlightSlice | Hebe einen bestimmten Sektor mit passendem Label hervor; auf hover gesetzt wird der Sektor hervorgehoben, über dem sich der Mauszeiger befindet. | hover |
