Carta XY
Carta XY ialah modul carta yang komprehensif, carta yang menggunakan paksi-x dan paksi-y untuk mewakili data
Contoh
Salin
Benamkan
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
Semua nilai teks yang mengandungi hanya satu perkataan boleh ditulis tanpa tanda petik berganda. Jika nilai teks mengandungi berbilang perkataan, terutamanya yang mengandungi ruang, ia perlu diapit dengan tanda petik berganda.
Arah
Carta boleh dilukis secara mendatar atau menegak, lalai ialah menegak.
Salin
Benamkan
xychart-beta horizontal
...
Tajuk
Tajuk ialah penerangan ringkas carta, ia sentiasa dipaparkan di bahagian atas carta.
Contoh
Salin
Benamkan
xychart-beta
title "This is a simple example"
...
Paksi-x
Paksi-x terutamanya mewakili nilai kategori, walaupun ia juga boleh digunakan sebagai julat berangka.
Contoh
- mermaid.grammar_quadrant_example_x_axis_min_max_use
- mermaid.grammar_quadrant_example_x_axis_title_text
Paksi-y
Paksi-y digunakan untuk mewakili julat berangka, ia tidak boleh mempunyai nilai kategori.
Contoh
- y-axis title min --> max
- Ia hanya akan menambah tajuk, julat akan dijana secara automatik berdasarkan data
Carta garisan
Carta garisan menyediakan fungsi untuk memaparkan garisan secara grafik.
Contoh
- mermaid.grammar_quadrant_example_line_2_3_valide
- mermaid.grammar_quadrant_example_line_series_2_3_valide
Carta bar
Carta bar boleh memaparkan bar secara grafik.
Contoh
- mermaid.grammar_quadrant_example_bar_2_3_valide
- mermaid.grammar_quadrant_example_bar_series_2_3_valide
Contoh mudah
Dua elemen yang diperlukan hanyalah nama carta xychart dan satu set data. Oleh itu, anda akan dapat melukis carta menggunakan konfigurasi yang mudah.
Salin
Benamkan
xychart-beta
line [+1.3, .6, 2.4, -.34]
Konfigurasi carta
| Parameter | Penerangan | Nilai lalai |
|---|---|---|
| width | Lebar carta | 700 |
| height | Tinggi carta | 500 |
| titlePadding | Pad dalam atas bawah tajuk | 10 |
| titleFontSize | Saiz fon tajuk | 20 |
| showTitle | Sama ada tajuk dipaparkan | true |
| xAxis | Konfigurasi paksi-x | AxisConfig |
| yAxis | Konfigurasi paksi-y | AxisConfig |
| plotReservedSpacePercent | Peratusan ruang minimum yang diduduki oleh setiap bentuk dalam carta | 50 |
| showDataLabel | Sama ada memaparkan nilai yang sepadan dalam carta bar | false |
AxisConfig
| Parameter | Penerangan | Nilai lalai |
|---|---|---|
| showLabel | Sama ada memaparkan label paksi atau nilai skala | true |
| labelFontSize | Saiz fon label yang hendak dilukis | 14 |
| labelPadding | Jarak atas bawah label | 5 |
| showTitle | Sama ada memaparkan tajuk paksi | true |
| titleFontSize | Saiz fon tajuk paksi | 16 |
| titlePadding | Jarak atas bawah tajuk paksi | 5 |
| showTick | Sama ada memaparkan skala | true |
| tickLength | Panjang skala | 5 |
| tickWidth | Lebar skala | 2 |
| showAxisLine | Sama ada garisan paksi dipaparkan | true |
| axisLineWidth | Ketebalan garisan paksi | 2 |
Pemboleh ubah tema carta
Tema xychart terletak dalam sifat xychart, dan boleh disesuaikan melalui sintaks berikut:
Salin
Benamkan
---
config:
themeVariables:
xyChart:
titleColor: '#ff0000'
---
| Parameter | Penerangan |
|---|---|
| backgroundColor | Warna latar belakang keseluruhan carta |
| titleColor | Warna teks tajuk |
| xAxisLabelColor | Warna label paksi-x |
| xAxisTitleColor | Warna tajuk paksi-x |
| xAxisTickColor | Warna skala paksi-x |
| xAxisLineColor | Warna garisan paksi-x |
| yAxisLabelColor | Warna label paksi-y |
| yAxisTitleColor | Warna tajuk paksi-y |
| yAxisTickColor | Warna skala paksi-y |
| yAxisLineColor | Warna garisan paksi-y |
| plotColorPalette | Ia boleh disesuaikan melalui sintaks berikut, contohnya "#f3456, #43445" |
Contoh konfigurasi dan tema
Salin
Benamkan
---
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]
