XY diagram
XY graf je komplexní modul diagramu, který používá osu x a osu y pro znázornění dat
Příklad
Kopírovat
Vložení
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]
Syntaxe
Všechny textové hodnoty obsahující pouze jedno slovo lze psát bez dvojitých uvozovek. Pokud textová hodnota obsahuje více slov, zejména mezery, je třeba ji uzavřít do dvojitých uvozovek.
Směr
Diagram lze kreslit vodorovně nebo svisle, výchozí je svisle.
Kopírovat
Vložení
xychart-beta horizontal
...
Název
Název je stručný popis diagramu, vždy se vykresluje v horní části diagramu.
Příklad
Kopírovat
Vložení
xychart-beta
title "This is a simple example"
...
osa x
Osa x především představuje kategoriální hodnoty, i když ji lze použít i jako číselný rozsah.
Příklad
- mermaid.grammar_quadrant_example_x_axis_min_max_use
- mermaid.grammar_quadrant_example_x_axis_title_text
osa y
Osa y se používá k znázornění číselného rozsahu, nemůže mít kategoriální hodnoty.
Příklad
- y-axis title min --> max
- Přidá pouze název, rozsah se vygeneruje automaticky podle dat
Spojnicový graf
Spojnicový graf poskytuje funkci grafického zobrazení čar.
Příklad
- mermaid.grammar_quadrant_example_line_2_3_valide
- mermaid.grammar_quadrant_example_line_series_2_3_valide
Sloupcový graf
Sloupcový graf umí graficky zobrazit sloupce.
Příklad
- mermaid.grammar_quadrant_example_bar_2_3_valide
- mermaid.grammar_quadrant_example_bar_series_2_3_valide
Jednoduchý příklad
Jediné dva potřebné prvky jsou název diagramu xychart a jedna datová sada. Diagram tak můžete nakreslit pomocí jednoduché konfigurace.
Kopírovat
Vložení
xychart-beta
line [+1.3, .6, 2.4, -.34]
Konfigurace diagramu
| Parametr | Popis | Výchozí hodnota |
|---|---|---|
| width | Šířka diagramu | 700 |
| height | Výška diagramu | 500 |
| titlePadding | Horní a dolní vnitřní okraj názvu | 10 |
| titleFontSize | Velikost písma názvu | 20 |
| showTitle | Zda je název zobrazen | true |
| xAxis | Konfigurace osy x | AxisConfig |
| yAxis | Konfigurace osy y | AxisConfig |
| plotReservedSpacePercent | Minimální procento prostoru zabraného jednotlivými grafy v diagramu | 50 |
| showDataLabel | Zda zobrazit odpovídající hodnotu uvnitř sloupce | false |
AxisConfig
| Parametr | Popis | Výchozí hodnota |
|---|---|---|
| showLabel | Zda zobrazit popisky os nebo hodnoty dílků | true |
| labelFontSize | Velikost písma vykreslovaných popisků | 14 |
| labelPadding | Horní a dolní rozestup popisků | 5 |
| showTitle | Zda zobrazit název osy | true |
| titleFontSize | Velikost písma názvu osy | 16 |
| titlePadding | Horní a dolní rozestup názvu osy | 5 |
| showTick | Zda zobrazit dílky | true |
| tickLength | Délka dílku | 5 |
| tickWidth | Šířka dílku | 2 |
| showAxisLine | Zda je zobrazena čára osy | true |
| axisLineWidth | Tloušťka čáry osy | 2 |
Proměnné tématu diagramu
Téma xychart se nachází ve vlastnosti xychart a lze jej přizpůsobit pomocí následující syntaxe:
Kopírovat
Vložení
---
config:
themeVariables:
xyChart:
titleColor: '#ff0000'
---
| Parametr | Popis |
|---|---|
| backgroundColor | Barva pozadí celého diagramu |
| titleColor | Barva textu názvu |
| xAxisLabelColor | Barva popisků osy x |
| xAxisTitleColor | Barva názvu osy x |
| xAxisTickColor | Barva dílků osy x |
| xAxisLineColor | Barva čáry osy x |
| yAxisLabelColor | Barva popisků osy y |
| yAxisTitleColor | Barva názvu osy y |
| yAxisTickColor | Barva dílků osy y |
| yAxisLineColor | Barva čáry osy y |
| plotColorPalette | Lze přizpůsobit pomocí následující syntaxe, například "#f3456, #43445" |
Příklad konfigurace a tématu
Kopírovat
Vložení
---
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]
