Carta Kuadran
Carta kuadran ialah carta visual yang membahagikan data kepada empat kuadran. Ia digunakan untuk memplot titik data pada grid dua dimensi, di mana satu pemboleh ubah diwakili pada paksi-x, dan satu lagi pemboleh ubah diwakili pada paksi-y. Pembahagian kuadran ditentukan dengan membahagikan carta kepada empat bahagian yang sama berdasarkan satu set kriteria khusus kepada data yang dianalisis. Carta kuadran biasanya digunakan untuk mengenal pasti corak dan trend dalam data, serta menentukan keutamaan tindakan berdasarkan kedudukan titik data dalam carta. Ia biasanya digunakan dalam senario seperti perniagaan, pemasaran dan pengurusan risiko.
Contoh
Salin
Benamkan
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 tiada titik data tersedia dalam carta, teks paksi dan nama kuadran akan dipaparkan di tengah kuadran berkenaan. Jika terdapat titik data, label paksi-x akan dipaparkan dari sebelah kiri kuadran berkenaan, dan teks kuadran dipaparkan di bahagian bawah carta. Label paksi-y akan dipaparkan di bahagian bawah kuadran berkenaan, dan teks kuadran akan dipaparkan di bahagian atas kuadran berkenaan.
Bagi nilai koordinat titik data, nilai minimum ialah 0, nilai maksimum ialah 1.
Tajuk
Tajuk ialah penerangan ringkas carta, ia akan sentiasa dipaparkan di bahagian atas carta.
Contoh
Salin
Benamkan
quadrantChart
title This is a sample example
x-axis
Paksi-x menentukan teks yang dipaparkan pada paksi-x. Paksi-x dibahagikan kepada dua bahagian 'kiri' dan 'kanan'; anda boleh memasukkan kedua-duanya atau hanya 'kiri'. Pernyataan harus bermula dengan x-axis, kemudian left axis text, diikuti dengan pemisah -->, dan akhir sekali right axis text.
Contoh
1. x-axis --> teks paksi kiri dan kanan kedua-duanya akan dipaparkan.
2. x-axis hanya memaparkan teks paksi kiri.
y-axis
Paksi-y menentukan teks yang dipaparkan pada paksi-y. Paksi-y dibahagikan kepada dua bahagian 'atas' dan 'bawah'; anda boleh memasukkan kedua-duanya atau hanya 'bawah'. Pernyataan itu harus bermula dengan y-axis, kemudian bottom axis text, diikuti dengan pemisah -->, dan akhir sekali top axis text.
Contoh
1. y-axis --> teks paksi bawah dan atas kedua-duanya akan dipaparkan.
2. y-axis hanya memaparkan teks paksi bawah.
Teks kuadran
quadrant-[1,2,3,4] menentukan kandungan teks yang dipaparkan bagi setiap kuadran.
Contoh
1. quadrant-1 menentukan teks yang akan dipaparkan dalam kuadran kanan atas
2. quadrant-2 menentukan teks yang akan dipaparkan dalam kuadran kiri atas.
3. quadrant-3 menentukan teks yang akan dipaparkan dalam kuadran kiri bawah.
4. quadrant-4 menentukan teks yang akan dipaparkan dalam kuadran kanan bawah.
Noktah bulat
Digunakan untuk melukis satu bulatan dalam carta kuadran. Sintaksnya ialah : [x, y], di mana julat nilai x dan y ialah 0 - 1.
Contoh
1. Point 1: [0.75, 0.80], noktah 1 akan dilukis dalam kuadran kanan atas.
2. Point 2: [0.35, 0.24], noktah 2 akan dilukis dalam kuadran kiri bawah.
Konfigurasi carta
| Parameter | Penerangan | Nilai lalai |
|---|---|---|
| chartWidth | Lebar carta | 500 |
| chartHeight | Tinggi carta | 500 |
| titlePadding | Pad dalam atas bawah tajuk | 10 |
| titleFontSize | Saiz fon tajuk | 20 |
| quadrantPadding | Pad di luar semua kuadran | 5 |
| quadrantTextTopPadding | Margin atas teks kuadran apabila teks dilukis di bahagian atas (bukan pada titik data) | 5 |
| quadrantLabelFontSize | Saiz fon teks kuadran | 16 |
| quadrantInternalBorderStrokeWidth | Lebar sempadan dalam kuadran | 1 |
| quadrantExternalBorderStrokeWidth | Lebar coretan sempadan luar kuadran | 2 |
| xAxisLabelPadding | Pad dalam atas bawah teks paksi-x | 5 |
| xAxisLabelFontSize | Saiz fon teks paksi-x | 16 |
| xAxisPosition | Kedudukan paksi-x (atas, bawah). Jika terdapat titik data, paksi-x akan sentiasa dipaparkan di bahagian bawah | top |
| yAxisLabelPadding | Pad dalam kiri kanan teks paksi-y | 5 |
| yAxisLabelFontSize | Saiz fon teks paksi-y | 16 |
| yAxisPosition | Kedudukan paksi-y (kiri, kanan) | left |
| pointTextPadding | Jarak antara titik data dan teks di bawahnya | 5 |
| pointLabelFontSize | Saiz fon teks titik data | 12 |
| pointRadius | Jejari titik data | 5 |
Pemboleh ubah tema carta
| Parameter | Penerangan |
|---|---|
| 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 paksi-x |
| quadrantYAxisTextFill | Warna teks paksi-y |
| quadrantInternalBorderStrokeFill | Warna sempadan dalam kuadran |
| quadrantExternalBorderStrokeFill | Warna sempadan luar kuadran |
| quadrantTitleFill | Warna tajuk |
Contoh konfigurasi dan tema
Salin
Benamkan
---
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 boleh ditetapkan gaya secara langsung, atau menggunakan kelas kongsi yang telah ditakrifkan
Gaya langsung
Salin
Benamkan
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
Benamkan
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 | Penerangan |
|---|---|
| color | Warna isian titik data |
| radius | Jejari titik data |
| stroke-width | Lebar sempadan titik data |
| stroke-color | Warna sempadan titik data (tidak berkesan apabila stroke-width tidak ditentukan) |
Susunan keutamaan: 1. Gaya langsung 2. Gaya kelas 3. Gaya tema
Contoh gaya
Salin
Benamkan
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
