XY-diagram
XY-diagrammet er et alsidigt diagrammodul, der bruger x-aksen og y-aksen til at repræsentere data
Eksempel
Kopiér
Integrer
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]
Syntaks
Alle tekstværdier, der kun består af et enkelt ord, kan skrives uden dobbelte anførselstegn. Hvis en tekstværdi indeholder flere ord, især hvis den indeholder mellemrum, skal den omsluttes med dobbelte anførselstegn.
Retning
Diagrammet kan tegnes vandret eller lodret; standarden er lodret.
Kopiér
Integrer
xychart-beta horizontal
...
Titel
Titlen er en kort beskrivelse af diagrammet, og den rendres altid øverst i diagrammet.
Eksempel
Kopiér
Integrer
xychart-beta
title "This is a simple example"
...
x-akse
X-aksen repræsenterer primært kategoriske værdier, selvom den også kan bruges som et numerisk interval.
Eksempel
- mermaid.grammar_quadrant_example_x_axis_min_max_use
- mermaid.grammar_quadrant_example_x_axis_title_text
y-akse
Y-aksen bruges til at repræsentere et numerisk interval og kan ikke have kategoriske værdier.
Eksempel
- y-axis title min --> max
- Den tilføjer kun titlen, og intervallet genereres automatisk ud fra dataene
Kurvediagram
Kurvediagrammet tilbyder funktionen til grafisk at vise linjer.
Eksempel
- mermaid.grammar_quadrant_example_line_2_3_valide
- mermaid.grammar_quadrant_example_line_series_2_3_valide
Søjlediagram
Søjlediagrammet kan vise søjler grafisk.
Eksempel
- mermaid.grammar_quadrant_example_bar_2_3_valide
- mermaid.grammar_quadrant_example_bar_series_2_3_valide
Simpelt eksempel
De eneste to nødvendige elementer er diagramnavnet xychart og et datasæt. Derfor kan du tegne diagrammet med en enkel konfiguration.
Kopiér
Integrer
xychart-beta
line [+1.3, .6, 2.4, -.34]
Diagramkonfiguration
| Parameter | Beskrivelse | Standardværdi |
|---|---|---|
| width | Diagrambredde | 700 |
| height | Diagramhøjde | 500 |
| titlePadding | Titelens indvendige afstand over og under | 10 |
| titleFontSize | Titelens skriftstørrelse | 20 |
| showTitle | Om titlen skal vises | true |
| xAxis | Konfiguration af x-akse | AxisConfig |
| yAxis | Konfiguration af y-akse | AxisConfig |
| plotReservedSpacePercent | Den mindste procentdel af pladsen i diagrammet, som hver figur optager | 50 |
| showDataLabel | Om den tilsvarende værdi skal vises inde i søjlen | false |
AxisConfig
| Parameter | Beskrivelse | Standardværdi |
|---|---|---|
| showLabel | Om akseetiketter eller markeringsværdier skal vises | true |
| labelFontSize | Skriftstørrelsen for de etiketter, der skal tegnes | 14 |
| labelPadding | Afstand over og under etiketter | 5 |
| showTitle | Om aksetitlen skal vises | true |
| titleFontSize | Skriftstørrelse for aksetitler | 16 |
| titlePadding | Afstand over og under aksetitler | 5 |
| showTick | Om markeringer skal vises | true |
| tickLength | Markeringernes længde | 5 |
| tickWidth | Markeringernes bredde | 2 |
| showAxisLine | Om akselinjen skal vises | true |
| axisLineWidth | Akseliniens tykkelse | 2 |
Diagrammets temavariable
Temaet for xychart ligger i xychart-egenskaben og kan tilpasses med følgende syntaks:
Kopiér
Integrer
---
config:
themeVariables:
xyChart:
titleColor: '#ff0000'
---
| Parameter | Beskrivelse |
|---|---|
| backgroundColor | Hele diagrammets baggrundsfarve |
| titleColor | Farven på titelteksten |
| xAxisLabelColor | Farven på x-aksens etiketter |
| xAxisTitleColor | Farven på x-aksens titel |
| xAxisTickColor | Farven på x-aksens markeringer |
| xAxisLineColor | Farven på x-aksens linje |
| yAxisLabelColor | Farven på y-aksens etiketter |
| yAxisTitleColor | Farven på y-aksens titel |
| yAxisTickColor | Farven på y-aksens markeringer |
| yAxisLineColor | Farven på y-aksens linje |
| plotColorPalette | Kan tilpasses med følgende syntaks, f.eks. "#f3456, #43445" |
Eksempel på konfiguration og tema
Kopiér
Integrer
---
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]
