XY-Diagramm
Ein XY-Diagramm ist ein umfassendes Diagrammmodul, ein Diagramm, das die x-Achse und die y-Achse zur Datendarstellung verwendet
Beispiel
Kopieren
Einbetten
xychart-beta
title "Sales Revenue"
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
Syntax
Alle Textwerte, die nur aus einem einzigen Wort bestehen, können ohne doppelte Anführungszeichen geschrieben werden. Wenn ein Textwert mehrere Wörter enthält, insbesondere Leerzeichen, muss er in doppelte Anführungszeichen gesetzt werden.
Richtung
Das Diagramm kann horizontal oder vertikal gezeichnet werden, Standard ist vertikal.
Kopieren
Einbetten
xychart-beta horizontal
...
Titel
Der Titel ist eine kurze Beschreibung des Diagramms und wird immer oben im Diagramm gerendert.
Beispiel
Kopieren
Einbetten
xychart-beta
title "This is a simple example"
...
x-Achse
Die x-Achse stellt hauptsächlich kategoriale Werte dar, obwohl sie auch als numerischer Bereich verwendet werden kann.
Beispiel
- mermaid.grammar_quadrant_example_x_axis_min_max_use
- mermaid.grammar_quadrant_example_x_axis_title_text
y-Achse
Die y-Achse dient zur Darstellung eines numerischen Bereichs und darf keine kategorialen Werte haben.
Beispiel
- y-axis title min --> max
- Es wird nur ein Titel hinzugefügt, der Bereich wird automatisch anhand der Daten generiert
Liniendiagramm
Das Liniendiagramm bietet die Funktion, Linien grafisch darzustellen.
Beispiel
- mermaid.grammar_quadrant_example_line_2_3_valide
- mermaid.grammar_quadrant_example_line_series_2_3_valide
Balkendiagramm
Das Balkendiagramm kann Balken grafisch darstellen.
Beispiel
- mermaid.grammar_quadrant_example_bar_2_3_valide
- mermaid.grammar_quadrant_example_bar_series_2_3_valide
Einfaches Beispiel
Die einzigen beiden benötigten Elemente sind der Diagrammname xychart und ein Datensatz. Daher kannst du das Diagramm mit einer einfachen Konfiguration zeichnen.
Kopieren
Einbetten
xychart-beta
line [+1.3, .6, 2.4, -.34]
Diagrammkonfiguration
| Parameter | Beschreibung | Standardwert |
|---|---|---|
| width | Diagrammbreite | 700 |
| height | Diagrammhöhe | 500 |
| titlePadding | Oberer und unterer Innenabstand des Titels | 10 |
| titleFontSize | Die Schriftgröße des Titels | 20 |
| showTitle | Ob der Titel angezeigt wird | true |
| xAxis | x-Achsen-Konfiguration | AxisConfig |
| yAxis | y-Achsen-Konfiguration | AxisConfig |
| plotReservedSpacePercent | Der minimale Prozentsatz des Raums, den die einzelnen Grafiken im Diagramm einnehmen | 50 |
| showDataLabel | Ob der entsprechende Wert im Balkendiagramm angezeigt wird | false |
AxisConfig
| Parameter | Beschreibung | Standardwert |
|---|---|---|
| showLabel | Ob Achsenlabels oder Skalenwerte angezeigt werden | true |
| labelFontSize | Die Schriftgröße der zu zeichnenden Labels | 14 |
| labelPadding | Der Abstand der Labels nach oben und unten | 5 |
| showTitle | Ob der Achsentitel angezeigt wird | true |
| titleFontSize | Die Schriftgröße des Achsentitels | 16 |
| titlePadding | Der Abstand des Achsentitels nach oben und unten | 5 |
| showTick | Ob Skalenstriche angezeigt werden | true |
| tickLength | Länge der Skalenstriche | 5 |
| tickWidth | Breite der Skalenstriche | 2 |
| showAxisLine | Ob die Achsenlinie angezeigt wird | true |
| axisLineWidth | Dicke der Achsenlinie | 2 |
Diagramm-Themenvariablen
Das Thema von xychart befindet sich in der xychart-Eigenschaft und kann mit folgender Syntax angepasst werden:
Kopieren
Einbetten
---
config:
themeVariables:
xyChart:
titleColor: '#ff0000'
---
| Parameter | Beschreibung |
|---|---|
| backgroundColor | Die Hintergrundfarbe des gesamten Diagramms |
| titleColor | Die Farbe des Titeltextes |
| xAxisLabelColor | Die Farbe der x-Achsen-Labels |
| xAxisTitleColor | Die Farbe des x-Achsentitels |
| xAxisTickColor | Die Farbe der x-Achsen-Skalenstriche |
| xAxisLineColor | Die Farbe der x-Achsenlinie |
| yAxisLabelColor | Die Farbe der y-Achsen-Labels |
| yAxisTitleColor | Die Farbe des y-Achsentitels |
| yAxisTickColor | Die Farbe der y-Achsen-Skalenstriche |
| yAxisLineColor | Die Farbe der y-Achsenlinie |
| plotColorPalette | Es kann mit folgender Syntax angepasst werden, zum Beispiel "#f3456, #43445" |
Konfigurations- und Themenbeispiel
Kopieren
Einbetten
---
config:
xyChart:
width: 900
height: 600
showDataLabel: true
themeVariables:
xyChart:
titleColor: "#f96"
---
xychart-beta
title "Sales Revenue"
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
