XY-diagram
XY-diagrammet er en omfattende diagrammodul, et diagram som bruker x-aksen og y-aksen for datarepresentasjon
Eksempel
Kopier
Bygg inn
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 tekstverdier som bare inneholder ett ord, kan skrives uten doble anførselstegn. Hvis tekstverdien inneholder flere ord, spesielt mellomrom, må den omsluttes med doble anførselstegn.
Retning
Diagrammet kan tegnes horisontalt eller vertikalt, standard er vertikalt.
Kopier
Bygg inn
xychart-beta horizontal
...
Tittel
Tittelen er en kort beskrivelse av diagrammet, og den rendres alltid øverst i diagrammet.
Eksempel
Kopier
Bygg inn
xychart-beta
title "This is a simple example"
...
x-akse
x-aksen representerer først og fremst kategoriske verdier, selv om den også kan brukes som et numerisk område.
Eksempel
- mermaid.grammar_quadrant_example_x_axis_min_max_use
- mermaid.grammar_quadrant_example_x_axis_title_text
y-akse
y-aksen brukes til å representere numeriske områder, og kan ikke ha kategoriske verdier.
Eksempel
- y-axis title min --> max
- Den legger bare til en tittel, og området genereres automatisk basert på dataene
Linjediagram
Linjediagrammet tilbyr funksjonen for å vise linjer grafisk.
Eksempel
- mermaid.grammar_quadrant_example_line_2_3_valide
- mermaid.grammar_quadrant_example_line_series_2_3_valide
Stolpediagram
Stolpediagrammet kan vise stolper grafisk.
Eksempel
- mermaid.grammar_quadrant_example_bar_2_3_valide
- mermaid.grammar_quadrant_example_bar_series_2_3_valide
Enkelt eksempel
De eneste to elementene som trengs er diagramnavnet xychart og et datasett. Derfor kan du tegne diagrammet med en enkel konfigurasjon.
Kopier
Bygg inn
xychart-beta
line [+1.3, .6, 2.4, -.34]
Diagramkonfigurasjon
| Parameter | Beskrivelse | Standardverdi |
|---|---|---|
| width | Diagrambredde | 700 |
| height | Diagramhøyde | 500 |
| titlePadding | Tittelens indre marg over og under | 10 |
| titleFontSize | Skriftstørrelsen på tittelen | 20 |
| showTitle | Om tittelen skal vises | true |
| xAxis | x-akse-konfigurasjon | AxisConfig |
| yAxis | y-akse-konfigurasjon | AxisConfig |
| plotReservedSpacePercent | Minste andel plass i prosent som hver graf opptar i diagrammet | 50 |
| showDataLabel | Om den tilsvarende verdien skal vises inne i stolpen | false |
AxisConfig
| Parameter | Beskrivelse | Standardverdi |
|---|---|---|
| showLabel | Om akseetiketter eller merkeverdier skal vises | true |
| labelFontSize | Skriftstørrelsen på etiketten som skal tegnes | 14 |
| labelPadding | Avstand over og under etiketten | 5 |
| showTitle | Om aksetittelen skal vises | true |
| titleFontSize | Skriftstørrelsen på aksetittelen | 16 |
| titlePadding | Avstand over og under aksetittelen | 5 |
| showTick | Om merkene skal vises | true |
| tickLength | Merkelengde | 5 |
| tickWidth | Merkebredde | 2 |
| showAxisLine | Om akselinjen skal vises | true |
| axisLineWidth | Akselinjens tykkelse | 2 |
Diagramtema-variabel
Temaet for xychart ligger i xychart -egenskapen og kan tilpasses med følgende syntaks:
Kopier
Bygg inn
---
config:
themeVariables:
xyChart:
titleColor: '#ff0000'
---
| Parameter | Beskrivelse |
|---|---|
| backgroundColor | Bakgrunnsfargen for hele diagrammet |
| titleColor | Fargen på tittelteksten |
| xAxisLabelColor | Fargen på x-aksens etikett |
| xAxisTitleColor | Fargen på x-aksens tittel |
| xAxisTickColor | Fargen på x-aksens merker |
| xAxisLineColor | Fargen på x-aksens linje |
| yAxisLabelColor | Fargen på y-aksens etikett |
| yAxisTitleColor | Fargen på y-aksens tittel |
| yAxisTickColor | Fargen på y-aksens merker |
| yAxisLineColor | Fargen på y-aksens linje |
| plotColorPalette | Det kan tilpasses med følgende syntaks, for eksempel "#f3456, #43445" |
Eksempel på konfigurasjon og tema
Kopier
Bygg inn
---
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]
