XY diagrama
XY diagrama yra išsamus diagramų modulis – diagrama, kurioje duomenims pavaizduoti naudojamos x ir y ašys
Pavyzdys
Kopijuoti
Įterpti
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]
Sintaksė
Visos teksto reikšmės, sudarytos tik iš vieno žodžio, gali būti rašomos be dvigubų kabučių. Jei teksto reikšmėje yra keli žodžiai, ypač tarpai, ją reikia apgaubti dvigubomis kabutėmis.
Kryptis
Diagrama gali būti braižoma horizontaliai arba vertikaliai; numatytoji – vertikali.
Kopijuoti
Įterpti
xychart-beta horizontal
...
Pavadinimas
Pavadinimas yra trumpas diagramos aprašymas; jis visada atvaizduojamas diagramos viršuje.
Pavyzdys
Kopijuoti
Įterpti
xychart-beta
title "This is a simple example"
...
x ašis
x ašis daugiausia žymi kategorines reikšmes, nors ji gali būti naudojama ir kaip skaitinis diapazonas.
Pavyzdys
- mermaid.grammar_quadrant_example_x_axis_min_max_use
- mermaid.grammar_quadrant_example_x_axis_title_text
y ašis
y ašis naudojama skaitiniam diapazonui žymėti; ji negali turėti kategorinių reikšmių.
Pavyzdys
- y-axis title min --> max
- Ji tik prideda pavadinimą, o diapazonas automatiškai generuojamas pagal duomenis
Lūžinė diagrama
Lūžinė diagrama suteikia galimybę grafiškai pavaizduoti linijas.
Pavyzdys
- mermaid.grammar_quadrant_example_line_2_3_valide
- mermaid.grammar_quadrant_example_line_series_2_3_valide
Stulpelinė diagrama
Stulpelinė diagrama gali grafiškai parodyti stulpelius.
Pavyzdys
- mermaid.grammar_quadrant_example_bar_2_3_valide
- mermaid.grammar_quadrant_example_bar_series_2_3_valide
Paprastas pavyzdys
Vieninteliai du reikalingi elementai – diagramos pavadinimas xychart ir vienas duomenų rinkinys. Taigi diagramą galėsite nubraižyti naudodami paprastą konfigūraciją.
Kopijuoti
Įterpti
xychart-beta
line [+1.3, .6, 2.4, -.34]
Diagramos konfigūracija
| Parametras | Aprašymas | Numatytoji reikšmė |
|---|---|---|
| width | Diagramos plotis | 700 |
| height | Diagramos aukštis | 500 |
| titlePadding | Pavadinimo viršutinė ir apatinė vidinės paraštės | 10 |
| titleFontSize | Pavadinimo šrifto dydis | 20 |
| showTitle | Ar rodyti pavadinimą | true |
| xAxis | x ašies konfigūracija | AxisConfig |
| yAxis | y ašies konfigūracija | AxisConfig |
| plotReservedSpacePercent | Mažiausias procentas vietos, kurį diagramoje užima kiekviena figūra | 50 |
| showDataLabel | Ar rodyti atitinkamą reikšmę stulpelinės diagramos viduje | false |
AxisConfig
| Parametras | Aprašymas | Numatytoji reikšmė |
|---|---|---|
| showLabel | Ar rodyti ašies žymeklį ar žymės reikšmę | true |
| labelFontSize | Braižomo žymeklio šrifto dydis | 14 |
| labelPadding | Žymeklio viršutinis ir apatinis tarpai | 5 |
| showTitle | Ar rodyti ašies pavadinimą | true |
| titleFontSize | Ašies pavadinimo šrifto dydis | 16 |
| titlePadding | Ašies pavadinimo viršutinis ir apatinis tarpai | 5 |
| showTick | Ar rodyti žymes | true |
| tickLength | Žymės ilgis | 5 |
| tickWidth | Žymės plotis | 2 |
| showAxisLine | Ar rodyti ašies liniją | true |
| axisLineWidth | Ašies linijos storis | 2 |
Diagramos temos kintamasis
xychart tema yra xychart savybėje; ją galima tinkinti naudojant šią sintaksę:
Kopijuoti
Įterpti
---
config:
themeVariables:
xyChart:
titleColor: '#ff0000'
---
| Parametras | Aprašymas |
|---|---|
| backgroundColor | Visos diagramos fono spalva |
| titleColor | Pavadinimo teksto spalva |
| xAxisLabelColor | x ašies žymeklio spalva |
| xAxisTitleColor | x ašies pavadinimo spalva |
| xAxisTickColor | x ašies žymių spalva |
| xAxisLineColor | x ašies linijos spalva |
| yAxisLabelColor | y ašies žymeklio spalva |
| yAxisTitleColor | y ašies pavadinimo spalva |
| yAxisTickColor | y ašies žymių spalva |
| yAxisLineColor | y ašies linijos spalva |
| plotColorPalette | Galima tinkinti naudojant šią sintaksę, pavyzdžiui, "#f3456, #43445" |
Konfigūracijos ir temos pavyzdys
Kopijuoti
Įterpti
---
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]
