XY-diagram
Diagram XY je celovit modul diagramov za predstavitev podatkov z osjo x in osjo y
Primer
Kopiraj
Vdelava
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]
Sintaksa
Vse besedilne vrednosti, ki vsebujejo samo eno besedo, lahko zapišete brez dvojnih narekovajev. Če besedilna vrednost vsebuje več besed, zlasti če vsebuje presledke, jo je treba oviti v dvojne narekovaje.
Smer
Diagram je mogoče narisati vodoravno ali navpično, privzeto navpično.
Kopiraj
Vdelava
xychart-beta horizontal
...
Naslov
Naslov je kratek opis diagrama in se vedno upodobi na vrhu diagrama.
Primer
Kopiraj
Vdelava
xychart-beta
title "This is a simple example"
...
os x
Os x v glavnem predstavlja kategorične vrednosti, čeprav se lahko uporablja tudi kot numerični razpon.
Primer
- mermaid.grammar_quadrant_example_x_axis_min_max_use
- mermaid.grammar_quadrant_example_x_axis_title_text
os y
Os y se uporablja za predstavitev numeričnega razpona in ne more imeti kategoričnih vrednosti.
Primer
- y-axis title min --> max
- Doda le naslov, razpon pa se ustvari samodejno glede na podatke
Črtni diagram
Črtni diagram omogoča grafični prikaz črt.
Primer
- mermaid.grammar_quadrant_example_line_2_3_valide
- mermaid.grammar_quadrant_example_line_series_2_3_valide
Stolpčni diagram
Stolpčni diagram omogoča grafični prikaz stolpcev.
Primer
- mermaid.grammar_quadrant_example_bar_2_3_valide
- mermaid.grammar_quadrant_example_bar_series_2_3_valide
Preprost primer
Edina potrebna elementa sta ime diagrama xychart in nabor podatkov. Zato boste lahko diagram narisali s preprosto konfiguracijo.
Kopiraj
Vdelava
xychart-beta
line [+1.3, .6, 2.4, -.34]
Konfiguracija diagrama
| Parameter | Opis | Privzeta vrednost |
|---|---|---|
| width | Širina diagrama | 700 |
| height | Višina diagrama | 500 |
| titlePadding | Zgornji in spodnji notranji odmik naslova | 10 |
| titleFontSize | Velikost pisave naslova | 20 |
| showTitle | Ali naj se naslov prikaže | true |
| xAxis | Konfiguracija osi x | AxisConfig |
| yAxis | Konfiguracija osi y | AxisConfig |
| plotReservedSpacePercent | Najmanjši odstotek prostora, ki ga zasedajo posamezni grafi v diagramu | 50 |
| showDataLabel | Ali naj se ustrezna vrednost prikaže znotraj stolpca | false |
AxisConfig
| Parameter | Opis | Privzeta vrednost |
|---|---|---|
| showLabel | Ali naj se prikažejo oznake osi ali vrednosti črtic | true |
| labelFontSize | Velikost pisave oznak, ki naj se narišejo | 14 |
| labelPadding | Zgornji in spodnji razmik oznak | 5 |
| showTitle | Ali naj se prikaže naslov osi | true |
| titleFontSize | Velikost pisave naslova osi | 16 |
| titlePadding | Zgornji in spodnji razmik naslova osi | 5 |
| showTick | Ali naj se prikažejo črtice | true |
| tickLength | Dolžina črtic | 5 |
| tickWidth | Širina črtic | 2 |
| showAxisLine | Ali naj se prikaže črta osi | true |
| axisLineWidth | Debelina črte osi | 2 |
Spremenljivke teme diagrama
Tema za xychart se nahaja v lastnosti xychart in jo je mogoče prilagoditi z naslednjo sintakso:
Kopiraj
Vdelava
---
config:
themeVariables:
xyChart:
titleColor: '#ff0000'
---
| Parameter | Opis |
|---|---|
| backgroundColor | barva ozadja celotnega diagrama |
| titleColor | barva besedila naslova |
| xAxisLabelColor | barva oznak osi x |
| xAxisTitleColor | barva naslova osi x |
| xAxisTickColor | barva črtic osi x |
| xAxisLineColor | barva črte osi x |
| yAxisLabelColor | barva oznak osi y |
| yAxisTitleColor | barva naslova osi y |
| yAxisTickColor | barva črtic osi y |
| yAxisLineColor | barva črte osi y |
| plotColorPalette | Prilagodite ga lahko z naslednjo sintakso, na primer "#f3456, #43445" |
Primer konfiguracije in teme
Kopiraj
Vdelava
---
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]
