XY-diagram
XY-diagram är en omfattande diagrammodul, ett diagram som använder x-axeln och y-axeln för att representera data
Exempel
Kopiera
Bädda in
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]
Syntax
Alla textvärden som endast innehåller ett ord kan skrivas utan dubbla citattecken. Om textvärdet innehåller flera ord, särskilt mellanslag, måste det omges av dubbla citattecken.
Riktning
Diagrammet kan ritas horisontellt eller vertikalt, standard är vertikalt.
Kopiera
Bädda in
xychart-beta horizontal
...
Titel
Titeln är en kort beskrivning av diagrammet och renderas alltid högst upp i diagrammet.
Exempel
Kopiera
Bädda in
xychart-beta
title "This is a simple example"
...
x-axel
x-axeln representerar främst kategoriska värden, även om den också kan användas som ett numeriskt intervall.
Exempel
- mermaid.grammar_quadrant_example_x_axis_min_max_use
- mermaid.grammar_quadrant_example_x_axis_title_text
y-axel
y-axeln används för att representera ett numeriskt intervall och kan inte ha kategoriska värden.
Exempel
- y-axis title min --> max
- Den lägger bara till titeln, och intervallet genereras automatiskt utifrån datan
Linjediagram
Linjediagram erbjuder funktionen att visa linjer grafiskt.
Exempel
- mermaid.grammar_quadrant_example_line_2_3_valide
- mermaid.grammar_quadrant_example_line_series_2_3_valide
Stapeldiagram
Stapeldiagram kan visa staplar grafiskt.
Exempel
- mermaid.grammar_quadrant_example_bar_2_3_valide
- mermaid.grammar_quadrant_example_bar_series_2_3_valide
Enkelt exempel
De enda två element som krävs är diagramnamnet xychart och en datamängd. Därför kan du rita diagrammet med en enkel konfiguration.
Kopiera
Bädda in
xychart-beta
line [+1.3, .6, 2.4, -.34]
Diagramkonfiguration
| Parameter | Beskrivning | Standardvärde |
|---|---|---|
| width | Diagrambredd | 700 |
| height | Diagramhöjd | 500 |
| titlePadding | Titelns övre och nedre inre marginal | 10 |
| titleFontSize | Titelns teckenstorlek | 20 |
| showTitle | Huruvida titeln visas | true |
| xAxis | x-axelkonfiguration | AxisConfig |
| yAxis | y-axelkonfiguration | AxisConfig |
| plotReservedSpacePercent | Minsta procentandel av utrymmet som varje figur i diagrammet upptar | 50 |
| showDataLabel | Huruvida motsvarande värde visas inuti stapeldiagrammet | false |
AxisConfig
| Parameter | Beskrivning | Standardvärde |
|---|---|---|
| showLabel | Huruvida axeletiketter eller markeringsvärden visas | true |
| labelFontSize | Teckenstorleken för etiketterna som ska ritas | 14 |
| labelPadding | Etiketternas övre och nedre avstånd | 5 |
| showTitle | Huruvida axeltiteln visas | true |
| titleFontSize | Axeltitelns teckenstorlek | 16 |
| titlePadding | Axeltitelns övre och nedre avstånd | 5 |
| showTick | Huruvida markeringar visas | true |
| tickLength | Markeringens längd | 5 |
| tickWidth | Markeringens bredd | 2 |
| showAxisLine | Huruvida axellinjen visas | true |
| axisLineWidth | Axellinjens tjocklek | 2 |
Diagrammets temavariabler
xychart -temat finns i egenskapen xychart och kan anpassas med följande syntax:
Kopiera
Bädda in
---
config:
themeVariables:
xyChart:
titleColor: '#ff0000'
---
| Parameter | Beskrivning |
|---|---|
| backgroundColor | Bakgrundsfärgen för hela diagrammet |
| titleColor | Färgen på titeltexten |
| xAxisLabelColor | Färgen på x-axeletiketter |
| xAxisTitleColor | Färgen på x-axeltiteln |
| xAxisTickColor | Färgen på x-axelmarkeringar |
| xAxisLineColor | Färgen på x-axellinjen |
| yAxisLabelColor | Färgen på y-axeletiketter |
| yAxisTitleColor | Färgen på y-axeltiteln |
| yAxisTickColor | Färgen på y-axelmarkeringar |
| yAxisLineColor | Färgen på y-axellinjen |
| plotColorPalette | Kan anpassas med följande syntax, till exempel "#f3456, #43445" |
Exempel på konfiguration och tema
Kopiera
Bädda in
---
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]
