Kreisdiagramme sind kreisförmige statistische Grafiken, die verwendet werden, um numerische Anteile darzustellen, indem die Daten in Sektoren aufgeteilt werden. In Mermaid.js können Sie saubere, responsive Datenaufteilungen automatisch erstellen, ohne sich mit komplexen Diagrammbibliotheken oder Vektor-Design-Tools herumzuschlagen. Die Rendering-Engine verarbeitet alle Farbzuweisungen und Prozentberechnungen dynamisch.
Grundlegende Syntaxstruktur
Jedes Kreisdiagramm beginnt mit derpie Deklaration. Sie können optional einen Titel hinzufügen, gefolgt von Datenzeilen, bei denen Kategorielabel in Anführungszeichen eingeschlossen und mit positiven numerischen Werten gepaart werden.
pie
title Beispiel-Kreisdiagramm
"Kategorie A" : 45
"Kategorie B" : 30
"Kategorie C" : 25
Syntaxreferenz
Die folgende Tabelle erläutert die grundlegenden strukturellen Optionen, die zur Erstellung einer Kreisdiagrammkarte in Mermaid.js verwendet werden.
| Komponente | Beschreibung | Syntaxbeispiel |
|---|---|---|
| Deklaration | Initialisiert die Rendering-Engine für das Kreisdiagramm. | pie |
| Flag zum Anzeigen von Daten | Ein optionaler Modifikator, der unmittelbar nachpiehinzugefügt wird, um tatsächliche Zahlen neben berechneten Prozentsätzen anzuzeigen. |
pie showData |
| Titel | Ein optionaler Überschrift, der deutlich über dem Zentrum der Diagrammstruktur gedruckt wird. | title Quelle des Umsatzes im Q3 |
| Bezeichnung der Dateneingabe | Der Kategorienname, der immer in doppelte Anführungszeichen gesetzt werden muss. | "Organische Suche" |
| Daten-Trennzeichen | Ein Doppelpunkt, der Ihren Beschriftungsstring von seinem mathematischen Wert trennt. | : |
| Datenwert | Eine positive Zahl. Unterstützt absolute Zählwerte oder direkte Dezimalgewichte bis zu zwei Dezimalstellen. | 54.25 |
Realitätsnahe Vorlage: Quellen des Website-Verkehrs
Diese Vorlage zeigt eine klassische Aufteilung eines Marketing- und Analyse-Dashboards. Sie verwendet die showData -Parameter, um die rohen Verkehrsmetriken explizit direkt innerhalb der Legende anzuzeigen, während der Diagramm die Layoutverhältnisse darstellt.
pie showData titel Hauptkanäle für Webverkehr
"Organische Suche" : 3540
"Direkter Verkehr" : 2410
"Soziale Medien" : 1850
"Verweisende Seiten" : 920
"E-Mail-Kampagnen" : 680
Syntax-Tipp: Standardmäßig zeigt Mermaid nur die relativen berechneten Prozentsätze (z. B. 35 %) über jedem Diagrammbereich an. Durch Hinzufügen des showData -Schlüsselworts unmittelbar nach pie werden die Beschriftungen so geändert, dass sowohl der Prozentsatz im Diagramm als auch die genauen Rohwerte in der begleitenden Legendenliste angezeigt werden.
Fortgeschrittenes Konzept: Direktiven & Formatierung
Für Dokumentationsseiten mit hoher Dichte können Sie eine Inline-Konfigurationsanweisung am Anfang Ihres Codeausschnitts anwenden, um Stilverhalten anzupassen, Textplatzierungsverschiebungen zu ändern oder strukturelle Linienstile zu modifizieren.
---
config:
pie:
textPosition: 0.6
themeVariables:
pieOuterStrokeWidth: "3px"
---
pie titel Zuweisung des operativen Budgets
"Produktentwicklung" : 40.5
"Marketing & Wachstum" : 25.25
"Kundenservice" : 20.0
"Verwaltungsüberhead" : 14.25
Häufige Syntax-Fehler
Obwohl Tortendiagramme eine der einfachsten Syntaxen in Mermaid haben, führen einige Formatierungsfehler zu Fehlern bei der Layoutanalyse. Vermeiden Sie diese häufigen Fehler:
- Negative Zahlen: Der Rendering-Engine akzeptiert nur positive numerische Werte. Die Übergabe einer negativen Zahl oder Null führt zu einem Abbruch der mathematischen Verarbeitung.
- Anführungszeichen-Anforderungen: Datenkategorielabels müssen immer doppelte Anführungszeichen verwenden. Einzelne Anführungszeichen oder fehlende Anführungszeichen führen dazu, dass die Erstellung nicht ordnungsgemäß gelingt.
- Grenzen der Dezimalgenauigkeit: Während Mermaid präzise Gleitkommazahlen reibungslos verarbeitet, verfolgt es standardmäßig Parameter bis zu zwei Dezimalstellen. Das Runden der Werte vorher stellt eine strikte Konsistenz sicher.
- Scheibendichten: Für eine klare visuelle Kommunikation ist es Best Practice, Ihre Diagramme auf 6 bis 8 Sektoren zu beschränken. Wenn Ihre Datensätze mehr Elemente enthalten, gruppieren Sie kleinere Knoten unter einer Kategorie „Sonstige“, um Ihre Gestaltung scannbar zu halten.