Diagram Kuadran
Diagram kuadran adalah diagram visualisasi yang membagi data menjadi empat kuadran. Diagram ini digunakan untuk memplot titik data pada kisi dua dimensi, di mana satu variabel direpresentasikan pada sumbu x, dan variabel lainnya direpresentasikan pada sumbu y. Pembagian kuadran ditentukan dengan membagi diagram menjadi empat bagian yang sama berdasarkan sekumpulan kriteria yang spesifik untuk data yang dianalisis. Diagram kuadran biasanya digunakan untuk mengidentifikasi pola dan tren dalam data, serta menentukan prioritas tindakan berdasarkan posisi titik data dalam diagram. Diagram ini biasanya digunakan dalam skenario seperti bisnis, pemasaran, dan manajemen risiko.
Contoh
Salin
Sematkan
quadrantChart
title Reach and engagement of campaigns
x-axis Low Reach --> High Reach
y-axis Low Engagement --> High Engagement
quadrant-1 We should expand
quadrant-2 Need to promote
quadrant-3 Re-evaluate
quadrant-4 May be improved
Campaign A: [0.3, 0.6]
Campaign B: [0.45, 0.23]
Campaign C: [0.57, 0.69]
Campaign D: [0.78, 0.34]
Campaign E: [0.40, 0.34]
Campaign F: [0.35, 0.78]
Sintaks
Jika tidak ada titik data yang tersedia dalam diagram, teks sumbu dan nama kuadran akan dirender di posisi tengah kuadran yang sesuai. Jika ada titik data, label sumbu x akan dirender dari sisi kiri kuadran yang sesuai, dan teks kuadran ditampilkan di bagian bawah diagram. Label sumbu y akan dirender di bagian bawah kuadran yang sesuai, dan teks kuadran akan dirender di bagian atas kuadran yang sesuai.
Untuk nilai koordinat titik data, nilai minimum adalah 0 dan nilai maksimum adalah 1.
Judul
Judul adalah deskripsi singkat diagram, yang akan selalu dirender di bagian atas diagram.
Contoh
Salin
Sematkan
quadrantChart
title This is a sample example
x-axis
Sumbu x menentukan teks yang ditampilkan pada sumbu x. Sumbu x dibagi menjadi dua bagian, 'kiri' dan 'kanan'; Anda dapat memasukkan keduanya atau hanya 'kiri'. Pernyataan harus diawali dengan x-axis, lalu left axis text, kemudian pemisah -->, dan terakhir right axis text.
Contoh
1. x-axis --> teks sumbu kiri dan kanan keduanya akan dirender.
2. x-axis hanya merender teks sumbu kiri.
y-axis
Sumbu y menentukan teks yang ditampilkan pada sumbu y. Sumbu y dibagi menjadi dua bagian, 'atas' dan 'bawah'; Anda dapat memasukkan keduanya atau hanya 'bawah'. Pernyataan ini harus diawali dengan y-axis, lalu bottom axis text, kemudian pemisah -->, dan terakhir top axis text.
Contoh
1. y-axis --> teks sumbu bawah dan atas keduanya akan dirender.
2. y-axis hanya merender teks sumbu bawah.
Teks kuadran
quadrant-[1,2,3,4] menentukan konten teks yang ditampilkan di setiap kuadran.
Contoh
1. quadrant-1 menentukan teks yang akan ditampilkan di kuadran kanan atas
2. quadrant-2 menentukan teks yang akan ditampilkan di kuadran kiri atas.
3. quadrant-3 menentukan teks yang akan ditampilkan di kuadran kiri bawah.
4. quadrant-4 menentukan teks yang akan ditampilkan di kuadran kanan bawah.
Titik
Digunakan untuk menggambar sebuah lingkaran di dalam diagram kuadran. Sintaksnya adalah : [x, y], dengan rentang nilai x dan y adalah 0 - 1.
Contoh
1. Point 1: [0.75, 0.80] , titik 1 akan digambar di kuadran kanan atas.
2. Point 2: [0.35, 0.24] , titik 2 akan digambar di kuadran kiri bawah.
Konfigurasi diagram
| Parameter | Deskripsi | Nilai bawaan |
|---|---|---|
| chartWidth | Lebar diagram | 500 |
| chartHeight | Tinggi diagram | 500 |
| titlePadding | Padding atas-bawah judul | 10 |
| titleFontSize | Ukuran font judul | 20 |
| quadrantPadding | Padding di luar semua kuadran | 5 |
| quadrantTextTopPadding | Margin atas teks kuadran saat teks digambar di bagian atas (bukan pada titik data) | 5 |
| quadrantLabelFontSize | Ukuran font teks kuadran | 16 |
| quadrantInternalBorderStrokeWidth | Lebar batas dalam kuadran | 1 |
| quadrantExternalBorderStrokeWidth | Lebar goresan batas luar kuadran | 2 |
| xAxisLabelPadding | Padding atas-bawah teks sumbu x | 5 |
| xAxisLabelFontSize | Ukuran font teks sumbu x | 16 |
| xAxisPosition | Posisi sumbu x (atas, bawah). Jika ada titik data, sumbu x akan selalu dirender di bagian bawah | top |
| yAxisLabelPadding | Padding kiri-kanan teks sumbu y | 5 |
| yAxisLabelFontSize | Ukuran font teks sumbu y | 16 |
| yAxisPosition | Posisi sumbu y (kiri, kanan) | left |
| pointTextPadding | Jarak antara titik data dan teks di bawahnya | 5 |
| pointLabelFontSize | Ukuran font teks titik data | 12 |
| pointRadius | Radius titik data | 5 |
Variabel tema diagram
| Parameter | Deskripsi |
|---|---|
| quadrant1Fill | Warna isian kuadran kanan atas |
| quadrant2Fill | Warna isian kuadran kiri atas |
| quadrant3Fill | Warna isian kuadran kiri bawah |
| quadrant4Fill | Warna isian kuadran kanan bawah |
| quadrant1TextFill | Warna teks kuadran kanan atas |
| quadrant2TextFill | Warna teks kuadran kiri atas |
| quadrant3TextFill | Warna teks kuadran kiri bawah |
| quadrant4TextFill | Warna teks kuadran kanan bawah |
| quadrantPointFill | Warna isian titik data |
| quadrantPointTextFill | Warna teks titik data |
| quadrantXAxisTextFill | Warna teks sumbu x |
| quadrantYAxisTextFill | Warna teks sumbu y |
| quadrantInternalBorderStrokeFill | Warna batas dalam kuadran |
| quadrantExternalBorderStrokeFill | Warna batas luar kuadran |
| quadrantTitleFill | Warna judul |
Contoh konfigurasi dan tema
Salin
Sematkan
---
config:
quadrantChart:
chartWidth: 400
chartHeight: 400
themeVariables:
quadrant1TextFill: "ff0000"
---
quadrantChart
x-axis Urgent --> Not Urgent
y-axis Not Important --> "Important ❤"
quadrant-1 Plan
quadrant-2 Do
quadrant-3 Delegate
quadrant-4 Delete
Gaya titik data
Titik data dapat diberi gaya secara langsung, atau menggunakan kelas bersama yang telah didefinisikan
Gaya langsung
Salin
Sematkan
Point A: [0.9, 0.0] radius: 12
Point B: [0.8, 0.1] color: #ff3300, radius: 10
Point C: [0.7, 0.2] radius: 25, color: #00ff33, stroke-color: #10f0f0
Point D: [0.6, 0.3] radius: 15, stroke-color: #00ff0f, stroke-width: 5px ,color: #ff33f0
Gaya kelas
Salin
Sematkan
Point A:::class1: [0.9, 0.0]
Point B:::class2: [0.8, 0.1]
Point C:::class3: [0.7, 0.2]
Point D:::class3: [0.7, 0.2]
classDef class1 color: #109060
classDef class2 color: #908342, radius : 10, stroke-color: #310085, stroke-width: 10px
classDef class3 color: #f00fff, radius : 10
Gaya yang tersedia:
| Parameter | Deskripsi |
|---|---|
| color | Warna isian titik data |
| radius | Radius titik data |
| stroke-width | Lebar batas titik data |
| stroke-color | Warna batas titik data (tidak berlaku bila stroke-width tidak ditentukan) |
Urutan prioritas: 1. Gaya langsung 2. Gaya kelas 3. Gaya tema
Contoh gaya
Salin
Sematkan
quadrantChart
title Reach and engagement of campaigns
x-axis Low Reach --> High Reach
y-axis Low Engagement --> High Engagement
quadrant-1 We should expand
quadrant-2 Need to promote
quadrant-3 Re-evaluate
quadrant-4 May be improved
Campaign A: [0.9, 0.0] radius: 12
Campaign B:::class1: [0.8, 0.1] color: #ff3300, radius: 10
Campaign C: [0.7, 0.2] radius: 25, color: #00ff33, stroke-color: #10f0f0
Campaign D: [0.6, 0.3] radius: 15, stroke-color: #00ff0f, stroke-width: 5px ,color: #ff33f0
Campaign E:::class2: [0.5, 0.4]
Campaign F:::class3: [0.4, 0.5] color: #0000ff
classDef class1 color: #109060
classDef class2 color: #908342, radius : 10, stroke-color: #310085, stroke-width: 10px
classDef class3 color: #f00fff, radius : 10
