XY-kaavio
XY-kaavio on kattava kaaviomoduuli, joka kuvaa tietoja x-akselin ja y-akselin avulla
Esimerkki
Kopioi
Upotus
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]
Syntaksi
Kaikki tekstiarvot, jotka sisältävät vain yhden sanan, voidaan kirjoittaa ilman lainausmerkkejä. Jos tekstiarvo sisältää useita sanoja, erityisesti välilyöntejä, se on suljettava lainausmerkkeihin.
Suunta
Kaavio voidaan piirtää vaakasuunnassa tai pystysuunnassa; oletus on pystysuora.
Kopioi
Upotus
xychart-beta horizontal
...
Otsikko
Otsikko on kaavion lyhyt kuvaus, ja se renderöidään aina kaavion yläosaan.
Esimerkki
Kopioi
Upotus
xychart-beta
title "This is a simple example"
...
x-akseli
x-akseli edustaa pääasiassa luokittelu-arvoja, vaikka sitä voidaan käyttää myös numeerisena alueena.
Esimerkki
- mermaid.grammar_quadrant_example_x_axis_min_max_use
- mermaid.grammar_quadrant_example_x_axis_title_text
y-akseli
y-akselia käytetään numeerisen alueen esittämiseen, eikä sillä voi olla luokittelu-arvoja.
Esimerkki
- y-axis title min --> max
- Se lisää vain otsikon, ja alue luodaan automaattisesti tietojen perusteella
Viivakaavio
Viivakaavio tarjoaa mahdollisuuden näyttää viivoja graafisesti.
Esimerkki
- mermaid.grammar_quadrant_example_line_2_3_valide
- mermaid.grammar_quadrant_example_line_series_2_3_valide
Pylväskaavio
Pylväskaavio voi näyttää palkit graafisesti.
Esimerkki
- mermaid.grammar_quadrant_example_bar_2_3_valide
- mermaid.grammar_quadrant_example_bar_series_2_3_valide
Yksinkertainen esimerkki
Ainoat tarvittavat kaksi elementtiä ovat kaavion nimi xychart ja tietojoukko. Siksi voit piirtää kaavion yksinkertaisella kokoonpanolla.
Kopioi
Upotus
xychart-beta
line [+1.3, .6, 2.4, -.34]
Kaavion kokoonpano
| Parametri | Kuvaus | Oletusarvo |
|---|---|---|
| width | Kaavion leveys | 700 |
| height | Kaavion korkeus | 500 |
| titlePadding | Otsikon ylä- ja alasisennus | 10 |
| titleFontSize | Otsikon fonttikoko | 20 |
| showTitle | Näytetäänkö otsikko | true |
| xAxis | x-akselin kokoonpano | AxisConfig |
| yAxis | y-akselin kokoonpano | AxisConfig |
| plotReservedSpacePercent | Kunkin kuvion varaama vähimmäistilan prosenttiosuus kaaviossa | 50 |
| showDataLabel | Näytetäänkö vastaava arvo pylvään sisällä | false |
AxisConfig
| Parametri | Kuvaus | Oletusarvo |
|---|---|---|
| showLabel | Näytetäänkö akselin merkinnät vai jakoarvot | true |
| labelFontSize | Piirrettävän merkinnän fonttikoko | 14 |
| labelPadding | Merkinnän ylä- ja alaväli | 5 |
| showTitle | Näytetäänkö akselin otsikko | true |
| titleFontSize | Akselin otsikon fonttikoko | 16 |
| titlePadding | Akselin otsikon ylä- ja alaväli | 5 |
| showTick | Näytetäänkö jako | true |
| tickLength | Jaon pituus | 5 |
| tickWidth | Jaon leveys | 2 |
| showAxisLine | Näytetäänkö akselin viiva | true |
| axisLineWidth | Akselin viivan paksuus | 2 |
Kaavion teemamuuttuja
xychart:n teema sijaitsee xychart-ominaisuudessa, ja se voidaan mukauttaa seuraavalla syntaksilla:
Kopioi
Upotus
---
config:
themeVariables:
xyChart:
titleColor: '#ff0000'
---
| Parametri | Kuvaus |
|---|---|
| backgroundColor | Koko kaavion taustaväri |
| titleColor | Otsikkotekstin väri |
| xAxisLabelColor | x-akselin merkinnän väri |
| xAxisTitleColor | x-akselin otsikon väri |
| xAxisTickColor | x-akselin jaon väri |
| xAxisLineColor | x-akselin viivan väri |
| yAxisLabelColor | y-akselin merkinnän väri |
| yAxisTitleColor | y-akselin otsikon väri |
| yAxisTickColor | y-akselin jaon väri |
| yAxisLineColor | y-akselin viivan väri |
| plotColorPalette | Sen voi mukauttaa seuraavalla syntaksilla, esimerkiksi "#f3456, #43445" |
Kokoonpano- ja teemaesimerkki
Kopioi
Upotus
---
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]
