Mermaid 11.15.0
Diagram kuadran menempatkan item pada dua dimensi ternormalisasi, seperti upaya dan nilai. Gunakan diagram lingkaran untuk bagian dari total atau Gantt untuk jadwal bertanggal.
Buat dengan Editor Mermaid →Koordinat berkisar 0 hingga 1. X meningkat ke kanan; Y meningkat ke atas.
quadrantChart
title Prioritas editorial
x-axis Upaya rendah --> Upaya tinggi
y-axis Nilai rendah --> Nilai tinggi
quadrant-1 Rencanakan
quadrant-2 Kerjakan dahulu
quadrant-3 Tunda
quadrant-4 Pertimbangkan ulang
Perbaiki tautan: [0.2, 0.8]
Tulis ulang panduan: [0.8, 0.7]
Perubahan tampilan: [0.6, 0.2]Memuat…
| Sintaks | Arti |
|---|---|
| quadrantChart / title Text | Deklarasikan diagram kuadran dan judul opsional. |
| x-axis Left --> Right / x-axis Left | Tulis kedua label ujung horizontal atau hanya label kiri. |
| y-axis Bottom --> Top / y-axis Bottom | Tulis kedua label ujung vertikal atau hanya label bawah. |
| quadrant-1 / quadrant-2 / quadrant-3 / quadrant-4 | 1: kanan atas; 2: kiri atas; 3: kiri bawah; 4: kanan bawah. |
| Name: [0.25, 0.75] | Gunakan koordinat x,y ternormalisasi dalam rentang 0–1 inklusif. |
| radius: 8 / color: #0070f3 / stroke-color: #171717 / stroke-width: 2px | Beri gaya titik langsung; warna garis memerlukan lebar garis yang terlihat. |
| classDef focus color: #0070f3 / Name:::focus: [x, y] | Definisikan gaya titik berulang; gaya sebaris mengesampingkan kelas, lalu tema bawaan. |
| config.quadrantChart.chartWidth / chartHeight / pointRadius / pointTextPadding | Atur dimensi, radius titik, dan jarak titik ke label. |
| quadrantPadding / quadrantTextTopPadding / quadrantLabelFontSize / quadrantInternalBorderStrokeWidth / quadrantExternalBorderStrokeWidth | Konfigurasi jarak dalam kuadran, posisi label, dan lebar garis tepi. |
| xAxisLabelPadding / xAxisLabelFontSize / xAxisPosition / yAxisLabelPadding / yAxisLabelFontSize / yAxisPosition | Konfigurasi sumbu; jika ada titik, sumbu horizontal diletakkan di bawah. |
| titleFontSize / titlePadding / pointTextPadding / pointLabelFontSize | Konfigurasi dimensi dan jarak teks judul serta titik. |
| quadrant1Fill…quadrant4Fill / quadrant1TextFill…quadrant4TextFill | Warna tema latar kuadran dan labelnya. |
| quadrantPointFill / quadrantPointTextFill | Tema bawaan untuk warna isi, label, dan garis tepi titik. |
| quadrantXAxisTextFill / quadrantYAxisTextFill / quadrantInternalBorderStrokeFill / quadrantExternalBorderStrokeFill / quadrantTitleFill | Warna tema untuk teks sumbu, garis tepi, dan judul. |
| %% / accTitle: / accDescr: | Komentar dan deskripsi aksesibel. |
Baca label Y dari bawah ke atas. Nomor kuadran berjalan berlawanan arah jarum jam dari kanan atas. Sumbu dengan satu label valid jika hanya satu ujung perlu dijelaskan; rentang koordinat tetap sama.
quadrantChart
title Dua dimensi
x-axis Upaya
y-axis Nilai
quadrant-1 Kanan atas
quadrant-2 Kiri atas
quadrant-3 Kiri bawah
quadrant-4 Kanan bawah
Opsi: [0.3, 0.7]Memuat…
Normalisasikan pengukuran sebelum dimasukkan karena rentang sumbu angka kustom tidak tersedia. Radius diukur dalam piksel. Gaya langsung dapat menonjolkan titik pilihan; jelaskan jika luas digunakan sebagai skala kuantitatif ketiga.
quadrantChart
title Pekerjaan terpilih
x-axis Rendah --> Tinggi
y-axis Rendah --> Tinggi
Draf: [0.25, 0.65] radius: 7, color: #0070f3, stroke-color: #171717, stroke-width: 2px
Revisi: [0.7, 0.4] radius: 5Memuat…
Pasang kelas setelah nama titik dan sebelum koordinat. Gaya sebaris mengesampingkan kelas, dan kelas mengesampingkan tema. Warna garis saja tidak menghasilkan tepi terlihat tanpa lebar garis.
quadrantChart
title Kandidat peninjauan
x-axis Upaya rendah --> Upaya tinggi
y-axis Nilai rendah --> Nilai tinggi
Tautan:::focus: [0.2, 0.8]
Tulis ulang:::focus: [0.8, 0.7]
classDef focus color: #0070f3, radius: 6, stroke-color: #171717, stroke-width: 2pxMemuat…
Gunakan quadrantChart untuk geometri dan themeVariables untuk warna. Label serta sumbu menyesuaikan saat ada titik. Perbesar dimensi untuk label padat; pointTextPadding saja tidak mencegah semua tumpang tindih.
---
config:
theme: base
quadrantChart:
chartWidth: 420
chartHeight: 360
pointRadius: 6
pointTextPadding: 8
themeVariables:
quadrant1Fill: "#d3e5ff"
quadrant2Fill: "#f5f5f5"
quadrantPointFill: "#0070f3"
---
quadrantChart
title Pekerjaan terencana
x-axis Upaya
y-axis Nilai
Panduan: [0.65, 0.8]Memuat…
Ubah persentase menjadi pecahan: 80 menjadi 0.8.
Sintaks tidak valid — contoh perbaikan di bawah
quadrantChart
Panduan: [80, 60]quadrantChart
Panduan: [0.8, 0.6]Memuat…
Label y-axis pertama berada di bawah. Kuadran 1 berada di kanan atas.