Tsart ng kuwadrante
Ang quadrant chart ay isang visual na chart na naghahati ng data sa apat na quadrant. Ginagamit ito upang mag-plot ng data point sa isang two-dimensional na grid, kung saan ang isang variable ay kinakatawan sa x-axis, at ang isa pang variable sa y-axis. Ang paghahati ng quadrant ay natutukoy sa pamamagitan ng paghahati ng chart sa apat na pantay na bahagi, batay sa isang set ng criteria na partikular sa data na sinusuri. Ang quadrant chart ay kadalasang ginagamit upang kilalanin ang mga pattern at trend sa data, at upang tukuyin ang priority ng aksyon batay sa posisyon ng data point sa chart. Kadalasan itong ginagamit sa negosyo, marketing, at risk management.
Halimbawa
Kopyahin
Embed
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]
Syntax
Kung walang available na data point sa chart, ang axis text at pangalan ng quadrant ay ire-render sa gitna ng katumbas na quadrant. Kung may data point, ang x-axis label ay ire-render mula sa kaliwa ng katumbas na quadrant, at ang quadrant text ay ipapakita sa ibaba ng chart. Ang y-axis label ay ire-render sa ibaba ng katumbas na quadrant, at ang quadrant text ay ire-render sa tuktok ng katumbas na quadrant.
Para sa coordinate value ng data point, ang minimum ay 0, at ang maximum ay 1.
Pamagat
Ang pamagat ay isang maikling paglalarawan ng chart, palagi itong ire-render sa tuktok ng chart.
Halimbawa
Kopyahin
Embed
quadrantChart
title This is a sample example
x-axis
Ang x-axis ay tumutukoy sa tekstong ipinapakita sa x-axis. Ang x-axis ay nahahati sa 'kaliwa' at 'kanan' na dalawang bahagi, maaari mong ilagay ang pareho o ang 'kaliwa' lamang. Ang statement ay dapat magsimula sa x-axis, na sinusundan ng left axis text, pagkatapos ay ang separator -->, at panghuli ang right axis text.
Halimbawa
1. x-axis --> ang parehong kaliwang axis at kanang axis text ay ire-render.
2. x-axis ang kaliwang axis text lamang ang ire-render.
y-axis
Ang y-axis ay tumutukoy sa tekstong ipinapakita sa y-axis. Ang y-axis ay nahahati sa 'itaas' at 'ibaba' na dalawang bahagi, maaari mong ilagay ang pareho o ang 'ibaba' lamang. Ang statement ay dapat magsimula sa y-axis, na sinusundan ng bottom axis text, pagkatapos ay ang separator -->, at panghuli ang top axis text.
Halimbawa
1. y-axis --> ang parehong ibaba at tuktok na axis text ay ire-render.
2. y-axis ang ibaba na axis text lamang ang ire-render.
Quadrant text
Ang quadrant-[1,2,3,4] ay tumutukoy sa tekstong ipinapakita sa bawat quadrant.
Halimbawa
1. quadrant-1 ay tumutukoy sa tekstong ipapakita sa kanan itaas na quadrant
2. quadrant-2 ay tumutukoy sa tekstong ipapakita sa kaliwang itaas na quadrant.
3. quadrant-3 ay tumutukoy sa tekstong ipapakita sa kaliwang ibaba na quadrant.
4. quadrant-4 ay tumutukoy sa tekstong ipapakita sa kanan ibaba na quadrant.
Tuldok
Ginagamit upang gumuhit ng bilog sa loob ng quadrant chart. Ang syntax ay : [x, y], kung saan ang saklaw ng halaga ng x at y ay 0 - 1.
Halimbawa
1. Point 1: [0.75, 0.80] , ang tuldok 1 ay iguguhit sa kanan itaas na quadrant.
2. Point 2: [0.35, 0.24] , ang tuldok 2 ay iguguhit sa kaliwang ibaba na quadrant.
Configuration ng chart
| Parameter | Paglalarawan | Default value |
|---|---|---|
| chartWidth | Lapad ng chart | 500 |
| chartHeight | Taas ng chart | 500 |
| titlePadding | Top-bottom padding ng pamagat | 10 |
| titleFontSize | Font size ng pamagat | 20 |
| quadrantPadding | Padding sa labas ng lahat ng quadrant | 5 |
| quadrantTextTopPadding | Top margin ng quadrant text kapag ang teksto ay iginuhit sa tuktok (hindi sa data point) | 5 |
| quadrantLabelFontSize | Font size ng quadrant text | 16 |
| quadrantInternalBorderStrokeWidth | Lapad ng panloob na border ng quadrant | 1 |
| quadrantExternalBorderStrokeWidth | Stroke width ng panlabas na border ng quadrant | 2 |
| xAxisLabelPadding | Top-bottom padding ng x-axis text | 5 |
| xAxisLabelFontSize | Font size ng x-axis text | 16 |
| xAxisPosition | Posisyon ng x-axis (taas, ibaba). Kung may data point, ang x-axis ay palaging ire-render sa ibaba | top |
| yAxisLabelPadding | Left-right padding ng y-axis text | 5 |
| yAxisLabelFontSize | Font size ng y-axis text | 16 |
| yAxisPosition | Posisyon ng y-axis (kaliwa, kanan) | left |
| pointTextPadding | Spacing sa pagitan ng data point at ng teksto sa ibaba | 5 |
| pointLabelFontSize | Font size ng teksto ng data point | 12 |
| pointRadius | Radius ng data point | 5 |
Theme variable ng chart
| Parameter | Paglalarawan |
|---|---|
| quadrant1Fill | Fill color ng kanan itaas na quadrant |
| quadrant2Fill | Fill color ng kaliwang itaas na quadrant |
| quadrant3Fill | Fill color ng kaliwang ibaba na quadrant |
| quadrant4Fill | Fill color ng kanan ibaba na quadrant |
| quadrant1TextFill | Text color ng kanan itaas na quadrant |
| quadrant2TextFill | Text color ng kaliwang itaas na quadrant |
| quadrant3TextFill | Text color ng kaliwang ibaba na quadrant |
| quadrant4TextFill | Text color ng kanan ibaba na quadrant |
| quadrantPointFill | Fill color ng data point |
| quadrantPointTextFill | Text color ng data point |
| quadrantXAxisTextFill | Text color ng x-axis |
| quadrantYAxisTextFill | Text color ng y-axis |
| quadrantInternalBorderStrokeFill | Kulay ng panloob na border ng quadrant |
| quadrantExternalBorderStrokeFill | Kulay ng panlabas na border ng quadrant |
| quadrantTitleFill | Kulay ng pamagat |
Halimbawa ng configuration at tema
Kopyahin
Embed
---
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
Estilo ng data point
Ang data point ay maaaring direktang lagyan ng estilo, o gamitin ang natukoy na shared class
Direct na estilo
Kopyahin
Embed
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
Class na estilo
Kopyahin
Embed
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
Mga available na estilo:
| Parameter | Paglalarawan |
|---|---|
| color | Fill color ng data point |
| radius | Radius ng data point |
| stroke-width | Lapad ng border ng data point |
| stroke-color | Kulay ng border ng data point (hindi valid kapag walang tinukoy na stroke-width) |
Priority order: 1. Direct na estilo 2. Class na estilo 3. Tema estilo
Halimbawa ng estilo
Kopyahin
Embed
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
