Ein XY-Chart ist eine umfassende Komponente zur Datenvisualisierung, die verwendet wird, um sowohl Liniendiagramme als auch Balkendiagramme in einer standardmäßigen zweidimensionalen Gitterkoordinatenanordnung darzustellen. Eingeführt, um ältere eigenständige Diagrammschemata zu ersetzen und zu vereinen, der xychart-beta Rendering-Engine verarbeitet dynamisch benutzerdefinierte numerische Datensätze, skaliert responsive Struktur-Gitter automatisch und unterstützt die gleichzeitige Darstellung mehrerer unabhängiger überlagerter Datensätze.
Grundlegende Syntaxstruktur
Jeder XY-Chart beginnt mit der xychart-beta Deklarationskopf. Danach folgt die Konfiguration eines horizontalen X-Achsen-Kategorien-Arrays, eines vertikalen Y-Achsen-Titels oder eines Datenbereichs-Limits sowie mindestens einer expliziten Datenplottingserie (z. B. einer line oder bar Block).
xychart-beta
title "Beispiel-Leistungsdiagramm"
x-axis [Jan, Feb, Mär, Apr]
y-axis "Umsatz (USD)"
bar [4500, 5200, 6100, 5800]
Syntaxreferenz
Die folgende Tabelle zeigt die wichtigsten Datendefinitionen und Konfigurationsschlüssel auf, die erforderlich sind, um einen XY-Chart korrekt in Mermaid.js zu strukturieren.
| Syntaxkomponente | Akzeptierte Formate | Beschreibung & Nutzungsvorschriften |
|---|---|---|
| Deklaration | Schlüsselwort | Initialisiert den 2D-Layout-Diagrammbereich. Muss genau das xychart-beta Zeichenfolgenblock verwenden. |
| Titel | Angeführte Zeichenfolge | Ein optionaler globaler Überschrift, der zentriert unmittelbar über dem Diagramm-Gitter angezeigt wird. |
| X-Achsen-Konfiguration | Liste in eckigen Klammern / Bereich | Definiert die Beschriftungen der horizontalen Skala. Akzeptiert kategorische Textzeichenfolgen in eckigen Klammern[A, B, C] oder numerische Punktbereiche[100 --> 500]. |
| Y-Achsen-Konfiguration | Titelzeichenfolge / Skalenbegrenzungen | Richtet die vertikalen Skaleneinstellungen ein. Kann einfach eine Achsentitelzeichenfolge sein oder angepasst werden, um die unteren/oberen Wertebereiche mithilfe von"Titel" 0 --> 100. |
| Säulen-Darstellungsserie | Numerisches Array | Rendert Datensätze als senkrechte Säulen. Die Anzahl der Elemente im Datenarray muss genau der Länge Ihrer X-Achsen-Kategorie entsprechen. |
| Linien-Darstellungsserie | Numerisches Array | Rendert Datensätze als kontinuierliche Linien, die die Datenpunkte über den Gitterarbeitsbereich verbinden. |
Erweiterte Datenanpassung (Anweisungen)
Sie können das visuelle Erscheinungsbild Ihres Diagrammarbeitsbereichs verfeinern, indem Sie eine Frontmatter-Konfigurationsblöcke am absoluten Anfang Ihres Dokumentcode-Ausschnitts einbetten. Dadurch erhalten Sie vollständige Layoutkontrolle über benutzerdefinierte Hex-Farben, Linienstärken der Plot-Serien und Sichtbarkeitsfelder für das Gitter.
XY-Diagramm-Konfigurations-Attribut-Matrix
| Eigenschaftskonfigurations-Schlüssel | Wertoptionen | Visueller Ergebnis |
|---|---|---|
showLine |
wahr | falsch |
Schaltet ein, ob die Hintergrundstrukturachsen-Gitterlinien über die Koordinaten angezeigt werden. |
chartWidth |
Ganzzahl (Pixel) | Legt die feste Begrenzungs-Breite der Canvas-Anordnung des Gittersystems fest. |
chartHeight |
Ganzzahl (Pixel) | Legt die feste Begrenzungs-Höhe der Canvas-Anordnung des Gittersystems fest. |
themeVariables.xyChart |
Farbzuordnungs-Arrays | Fügt explizite hexadezimale Stilfarbblöcke (z. B. backgroundColor, titleColor, oder benutzerdefinierte Farblistenplätze plotColorPalette) in Ihre Diagramme ein. |
Realitätsnahes Blueprint: Mehrreihiger technischer Vergleich
Dieses umfassende Blueprint verfolgt eine Bewertung der Infrastrukturleistung. Es nutzt eine benutzerdefinierte Konfigurationsanweisung, um die Canvas-Abmessungen festzulegen, Hintergrund-Gitterlinienpfade anzuzeigen und eine explizite hexadezimale Farbpalette einzufügen. Es ordnet vier unterschiedliche Quartalsphasen zu und stellt sie als kombiniertes visuelles Kombinationsdiagramm dar (überlappende Balkenreihen und Linienreihen zusammen).
---
config:
xychart:
chartWidth: 700
chartHeight: 400
showLine: true
themeVariables:
xychart:
titleColor: "#0072B1"
plotColorPalette: "#0072B1, #E06000"
---
xychart-beta
title "Ressourcen- vs. Ausführungs-Metriken Q1-Q4"
x-axis ["Quartal 1", "Quartal 2", "Quartal 3", "Quartal 4"]
y-axis "Leistungs-Metrik-Einheiten" 0 --> 100
bar [45, 65, 80, 95]
line [55, 60, 72, 88]
Syntax-Tipp: Wenn mehrere Datendiagramme überlagert werden (z. B. beim Ausführen eines bar Datensatzes und eines line Datensatzes innerhalb derselben Layout-Canvas), wird der Rendering-Engine sie stapeln oder nacheinander in der Reihenfolge zeichnen, in der sie im Text-Skript geschrieben sind. Ordnen Sie Ihre Datensblöcke bewusst an, um visuelle Ausschnitte an den Canvas-Linien zu vermeiden.
Häufige Syntax-Fehler & Systembeschränkungen
Beim Kompilieren von dimensionsbasierten Matrixpfaden können einige subtile Konfigurationsfehler die Koordinatenberechnungen stören. Behalten Sie diese Fehlerbehebungsparameter im Auge:
- Datentypenlänge nicht übereinstimmend: Jeder einzelne
baroderLinieDas Datenreihen-Array *muss* genau die gleiche Anzahl von Einträgen enthalten wie in IhremX-AchseListenparameter. Wenn Sie 4 Kategorien auf Ihrer X-Achse haben, aber eine Datenliste mit 5 Zahlen bereitstellen, wird die Diagrammerstellung vollständig fehlschlagen. - Anführungszeichen-Grenzen: Wenn Sie Kategorien innerhalb der eckigen Klammern einer Achsenliste angeben, müssen Textblöcke, die Leerzeichen oder Sonderzeichen enthalten, sauber in doppelte Anführungszeichen gesetzt werden (z. B.
["Phase 1", "Phase 2"]). - Numerische Koordinaten-Grenzen: Wenn Sie manuelle Bereiche auf einer Achsenskala festlegen (z. B.
0 --> 500), müssen Sie explizit zwei Bindestriche gefolgt von einem Größer-als-Zeichen verwenden (-->). Wenn Sie einen Bindestrich vergessen oder die Operatorzeichen durch Leerzeichen trennen, wird ein Verarbeitungslayout-Fehler ausgelöst. - Positive Ganzzahl-Gewichte: Skalenwerte werden linearen Raumblöcken zugeordnet. Stellen Sie sicher, dass die an Ihre Reihe übergebenen Werte keine nicht-escaped Zeicheninhalte oder leere Parameter-Null-Plätze innerhalb von Arrays enthalten.