XY-Diagramm

Im Kontext von mermaid-js ist das XY-Diagramm ein umfassendes Diagrammmodul, das verschiedene Arten von Diagrammen umfasst, die sowohl die x-Achse als auch die y-Achse zur Datenrepräsentation nutzen. Derzeit umfasst es zwei grundlegende Diagrammtypen: das Säulendiagramm und das Liniendiagramm. Diese Diagramme sind darauf ausgelegt, Daten, die zwei numerische Variablen umfassen, visuell darzustellen und zu analysieren.

Es ist wichtig zu beachten, dass während die aktuelle Implementierung von mermaid-js diese beiden Diagrammtypen umfasst, das Framework so gestaltet ist, dass es dynamisch und anpassungsfähig ist. Daher hat es die Kapazität zur Erweiterung und zur Aufnahme zusätzlicher Diagrammtypen in der Zukunft. Das bedeutet, dass Benutzer mit einer sich entwickelnden Suite von Diagrammoptionen innerhalb des XY-Diagrammmoduls rechnen können, die verschiedene Anforderungen an die Datenvisualisierung erfüllt, während im Laufe der Zeit neue Diagrammtypen eingeführt werden.

Beispiel

Code:

Syntax

NOTE

Alle Textwerte, die nur ein Wort enthalten, können ohne `"` geschrieben werden. Wenn ein Textwert viele Worte enthält, insbesondere wenn er Leerzeichen enthält, schließen Sie den Wert in `"`

Orientierungen

Das Diagramm kann horizontal oder vertikal gezeichnet werden, der Standardwert ist vertikal.

xychart-beta horizontal
...

Titel

Der Titel ist eine kurze Beschreibung des Diagramms und wird immer oben im Diagramm angezeigt.

Beispiel

xychart-beta
    title "Dies ist ein einfaches Beispiel"
    ...

NOTE

Wenn der Titel ein einzelnes Wort ist, ist es nicht nötig, `" ` zu verwenden, aber wenn er Leerzeichen hat, ist `"` erforderlich.

x-Achse

Die x-Achse dient hauptsächlich als kategorialer Wert, obwohl sie auch als numerischer Bereichswert funktionieren kann, wenn nötig.

Beispiel

1. x-axis title min --> max die x-Achse wird mit dem angegebenen Bereich als numerisch fungieren.
2. x-axis "title with space" [cat1, "cat2 with space", cat3] x-Achse ist kategorisch, die Kategorien sind vom Texttyp.

y-Achse

Die y-Achse wird verwendet, um numerische Bereichswerte darzustellen, sie kann keine kategorialen Werte haben.

Beispiel

1. y-axis title min --> max
2. y-axis title es wird nur den Titel hinzufügen, der Bereich wird aus den Daten automatisch generiert.

NOTE

Sowohl die x- als auch die y-Achse sind optional; wenn sie nicht bereitgestellt werden, versuchen wir, den Bereich zu erstellen.

Liniendiagramm

Ein Liniendiagramm bietet die Möglichkeit, Linien grafisch darzustellen.

Beispiel

1. line [2.3, 45, .98, -3.4] es kann alle gültigen numerischen Werte haben.

Säulendiagramm

Ein Säulendiagramm bietet die Möglichkeit, Balken grafisch darzustellen.

Beispiel

1. bar [2.3, 45, .98, -3.4] es kann alle gültigen numerischen Werte haben.

Einfachstes Beispiel

Die beiden einzigen Dinge, die erforderlich sind, sind der Diagrammname (xychart-beta) und ein Datensatz. So können Sie ein Diagramm mit einer einfachen Konfiguration zeichnen:

xychart-beta
    line [+1.3, .6, 2.4, -.34]

Diagrammkonfigurationen

Parameter	Beschreibung	Standardwert
width	Breite des Diagramms	700
height	Höhe des Diagramms	500
titlePadding	Oben und unten Padding des Titels	10
titleFontSize	Schriftgröße des Titels	20
showTitle	Titel soll angezeigt werden oder nicht	true
xAxis	Konfiguration der x-Achse	AxisConfig
yAxis	Konfiguration der y-Achse	AxisConfig
chartOrientation	'vertikal' oder 'horizontal'	'vertikal'
plotReservedSpacePercent	Mindestfläche, die Plots im Diagramm einnehmen	50

AxisConfig

Parameter	Beschreibung	Standardwert
showLabel	Achsenbeschriftungen oder Tick-Werte anzeigen	true
labelFontSize	Schriftgröße des zu zeichnenden Labels	14
labelPadding	Oben und unten Padding des Labels	5
showTitle	Achsentitel soll angezeigt werden oder nicht	true
titleFontSize	Schriftgröße des Achsentitels	16
titlePadding	Oben und unten Padding des Achsentitels	5
showTick	Tick soll angezeigt werden oder nicht	true
tickLength	Wie lang der Tick sein wird	5
tickWidth	Wie breit der Tick sein wird	2
showAxisLine	Achsenlinie soll angezeigt werden oder nicht	true
axisLineWidth	Dicke der Achsenlinie	2

Diagramm-Thema-Variablen

NOTE

Themen für xychart befinden sich im Attribut xychart. Um die Variablen festzulegen, verwenden Sie diese Syntax %%{init: { "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%%

Parameter	Beschreibung
backgroundColor	Hintergrundfarbe des gesamten Diagramms
titleColor	Farbe des Titeltextes
xAxisLabelColor	Farbe der x-Achsen-Beschriftungen
xAxisTitleColor	Farbe des Titels der x-Achse
xAxisTickColor	Farbe des Ticks der x-Achse
xAxisLineColor	Farbe der Linie der x-Achse
yAxisLabelColor	Farbe der y-Achsen-Beschriftungen
yAxisTitleColor	Farbe des Titels der y-Achse
yAxisTickColor	Farbe des Ticks der y-Achse
yAxisLineColor	Farbe der Linie der y-Achse
plotColorPalette	String von Farben, die durch Komma getrennt sind, z.B. "#f3456, #43445"

Beispiel zu Konfiguration und Thema

Code: