XY-diagram
Het XY-diagram is een uitgebreide diagrammodule voor het weergeven van gegevens met behulp van x- en y-assen
Voorbeeld
Kopiëren
Insluiten
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]
Syntaxis
Alle tekstwaarden die uit slechts één woord bestaan, mogen zonder dubbele aanhalingstekens worden geschreven. Als een tekstwaarde meerdere woorden bevat, vooral spaties, moet deze tussen dubbele aanhalingstekens worden geplaatst.
Richting
Het diagram kan horizontaal of verticaal worden getekend; standaard is verticaal.
Kopiëren
Insluiten
xychart-beta horizontal
...
Titel
De titel is een korte beschrijving van het diagram en wordt altijd bovenaan het diagram gerenderd.
Voorbeeld
Kopiëren
Insluiten
xychart-beta
title "This is a simple example"
...
x-as
De x-as vertegenwoordigt voornamelijk categorische waarden, hoewel deze ook als numeriek bereik kan worden gebruikt.
Voorbeeld
- mermaid.grammar_quadrant_example_x_axis_min_max_use
- mermaid.grammar_quadrant_example_x_axis_title_text
y-as
De y-as wordt gebruikt om een numeriek bereik weer te geven en kan geen categorische waarden hebben.
Voorbeeld
- y-axis title min --> max
- Er wordt alleen een titel toegevoegd; het bereik wordt automatisch op basis van de gegevens gegenereerd
Lijndiagram
Het lijndiagram biedt de mogelijkheid om lijnen grafisch weer te geven.
Voorbeeld
- mermaid.grammar_quadrant_example_line_2_3_valide
- mermaid.grammar_quadrant_example_line_series_2_3_valide
Staafdiagram
Het staafdiagram kan staven grafisch weergeven.
Voorbeeld
- mermaid.grammar_quadrant_example_bar_2_3_valide
- mermaid.grammar_quadrant_example_bar_series_2_3_valide
Eenvoudig voorbeeld
De enige twee vereiste elementen zijn de diagramnaam xychart en een dataset. Zo kun je een diagram met een eenvoudige configuratie tekenen.
Kopiëren
Insluiten
xychart-beta
line [+1.3, .6, 2.4, -.34]
Diagramconfiguratie
| Parameter | Beschrijving | Standaardwaarde |
|---|---|---|
| width | Diagrambreedte | 700 |
| height | Diagramhoogte | 500 |
| titlePadding | Verticale binnenmarge van de titel | 10 |
| titleFontSize | De lettergrootte van de titel | 20 |
| showTitle | Of de titel wordt weergegeven | true |
| xAxis | Configuratie van de x-as | AxisConfig |
| yAxis | Configuratie van de y-as | AxisConfig |
| plotReservedSpacePercent | Het minimumpercentage ruimte dat elke grafiek in het diagram inneemt | 50 |
| showDataLabel | Of de bijbehorende waarde in het staafdiagram wordt weergegeven | false |
AxisConfig
| Parameter | Beschrijving | Standaardwaarde |
|---|---|---|
| showLabel | Of aslabels of markeringswaarden worden weergegeven | true |
| labelFontSize | De lettergrootte van de te tekenen labels | 14 |
| labelPadding | De verticale afstand boven en onder labels | 5 |
| showTitle | Of astekst wordt weergegeven | true |
| titleFontSize | De lettergrootte van astekst | 16 |
| titlePadding | De verticale afstand boven en onder astekst | 5 |
| showTick | Of markeringen worden weergegeven | true |
| tickLength | De lengte van markeringen | 5 |
| tickWidth | De breedte van markeringen | 2 |
| showAxisLine | Of aslijnen worden weergegeven | true |
| axisLineWidth | De dikte van aslijnen | 2 |
Diagram-themavariabelen
Het thema van xychart bevindt zich in de eigenschap xychart en kan met de volgende syntaxis worden aangepast:
Kopiëren
Insluiten
---
config:
themeVariables:
xyChart:
titleColor: '#ff0000'
---
| Parameter | Beschrijving |
|---|---|
| backgroundColor | De achtergrondkleur van het hele diagram |
| titleColor | De kleur van de titeltekst |
| xAxisLabelColor | De kleur van de x-aslabels |
| xAxisTitleColor | De kleur van de x-astitel |
| xAxisTickColor | De kleur van de x-asmarkeringen |
| xAxisLineColor | De kleur van de x-aslijn |
| yAxisLabelColor | De kleur van de y-aslabels |
| yAxisTitleColor | De kleur van de y-astitel |
| yAxisTickColor | De kleur van de y-asmarkeringen |
| yAxisLineColor | De kleur van de y-aslijn |
| plotColorPalette | Dit kan met de volgende syntaxis worden aangepast, bijvoorbeeld "#f3456, #43445" |
Voorbeeld van configuratie en thema
Kopiëren
Insluiten
---
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]
