Diagram XY
Diagram XY adalah modul diagram komprehensif, sebuah diagram yang merepresentasikan data menggunakan sumbu x dan sumbu y
Contoh
Salin
Sematkan
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 hanya berisi satu kata dapat ditulis tanpa tanda kutip ganda. Jika nilai teks berisi beberapa kata, terutama mengandung spasi, perlu dibungkus dengan tanda kutip ganda.
Arah
Diagram dapat digambar secara horizontal atau vertikal, bawaannya vertikal.
Salin
Sematkan
xychart-beta horizontal
...
Judul
Judul adalah deskripsi singkat diagram, yang selalu dirender di bagian atas diagram.
Contoh
Salin
Sematkan
xychart-beta
title "This is a simple example"
...
sumbu x
Sumbu x terutama merepresentasikan nilai kategorikal, meskipun juga dapat digunakan sebagai rentang numerik.
Contoh
- mermaid.grammar_quadrant_example_x_axis_min_max_use
- mermaid.grammar_quadrant_example_x_axis_title_text
sumbu y
Sumbu y digunakan untuk merepresentasikan rentang numerik, dan tidak dapat memiliki nilai kategorikal.
Contoh
- y-axis title min --> max
- Ini hanya akan menambahkan judul, rentangnya akan dihasilkan secara otomatis berdasarkan data
Diagram garis
Diagram garis menyediakan fungsi untuk menampilkan garis secara grafis.
Contoh
- mermaid.grammar_quadrant_example_line_2_3_valide
- mermaid.grammar_quadrant_example_line_series_2_3_valide
Diagram batang
Diagram batang dapat menampilkan batang secara grafis.
Contoh
- mermaid.grammar_quadrant_example_bar_2_3_valide
- mermaid.grammar_quadrant_example_bar_series_2_3_valide
Contoh sederhana
Dua elemen yang diperlukan hanyalah nama diagram xychart dan sebuah kumpulan data. Oleh karena itu, Anda akan dapat menggambar diagram menggunakan konfigurasi sederhana.
Salin
Sematkan
xychart-beta
line [+1.3, .6, 2.4, -.34]
Konfigurasi diagram
| Parameter | Deskripsi | Nilai bawaan |
|---|---|---|
| width | Lebar diagram | 700 |
| height | Tinggi diagram | 500 |
| titlePadding | Padding atas-bawah judul | 10 |
| titleFontSize | Ukuran font judul | 20 |
| showTitle | Apakah judul ditampilkan | true |
| xAxis | Konfigurasi sumbu x | AxisConfig |
| yAxis | Konfigurasi sumbu y | AxisConfig |
| plotReservedSpacePercent | Persentase ruang minimum yang ditempati setiap grafik dalam diagram | 50 |
| showDataLabel | Apakah menampilkan nilai yang sesuai di dalam diagram batang | false |
AxisConfig
| Parameter | Deskripsi | Nilai bawaan |
|---|---|---|
| showLabel | Apakah menampilkan label sumbu atau nilai skala | true |
| labelFontSize | Ukuran font label yang akan digambar | 14 |
| labelPadding | Jarak atas-bawah label | 5 |
| showTitle | Apakah menampilkan judul sumbu | true |
| titleFontSize | Ukuran font judul sumbu | 16 |
| titlePadding | Jarak atas-bawah judul sumbu | 5 |
| showTick | Apakah menampilkan skala | true |
| tickLength | Panjang skala | 5 |
| tickWidth | Lebar skala | 2 |
| showAxisLine | Apakah garis sumbu ditampilkan | true |
| axisLineWidth | Ketebalan garis sumbu | 2 |
Variabel tema diagram
Tema xychart terletak pada properti xychart, dan dapat disesuaikan menggunakan sintaks berikut:
Salin
Sematkan
---
config:
themeVariables:
xyChart:
titleColor: '#ff0000'
---
| Parameter | Deskripsi |
|---|---|
| backgroundColor | Warna latar belakang keseluruhan diagram |
| titleColor | Warna teks judul |
| xAxisLabelColor | Warna label sumbu x |
| xAxisTitleColor | Warna judul sumbu x |
| xAxisTickColor | Warna skala sumbu x |
| xAxisLineColor | Warna garis sumbu x |
| yAxisLabelColor | Warna label sumbu y |
| yAxisTitleColor | Warna judul sumbu y |
| yAxisTickColor | Warna skala sumbu y |
| yAxisLineColor | Warna garis sumbu y |
| plotColorPalette | Dapat disesuaikan menggunakan sintaks berikut, misalnya "#f3456, #43445" |
Contoh konfigurasi dan tema
Salin
Sematkan
---
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]
