Kvadrantų diagrama
Kvadrantų diagrama – tai vizualizacijos diagrama, skirstanti duomenis į keturis kvadrantus. Ji naudojama duomenų taškams dvimatėje tinklelėje braižyti, kai vienas kintamasis žymimas X ašyje, o kitas – Y ašyje. Kvadrantai nustatomi pagal kriterijų, būdingą analizuojamiems duomenims, padalijant diagramą į keturias lygias dalis. Kvadrantų diagramos paprastai naudojamos duomenų šablonams ir tendencijoms atpažinti bei veiksmų prioritetui nustatyti pagal duomenų taškų vietą diagramoje. Jos dažnai naudojamos tokiose srityse kaip verslas, rinkodara ir rizikos valdymas.
Pavyzdys
Kopijuoti
Įterpti
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ė
Jei diagramoje nėra duomenų taškų, ašių tekstas ir kvadrantų pavadinimai atvaizduojami atitinkamo kvadranto centre. Jei yra duomenų taškų, X ašies žymekliai atvaizduojami nuo atitinkamo kvadranto kairės pusės, o kvadranto tekstas rodomas diagramos apačioje. Y ašies žymekliai atvaizduojami atitinkamo kvadranto apačioje, o kvadranto tekstas atvaizduojamas atitinkamo kvadranto viršuje.
Duomenų taškų koordinačių reikšmės: mažiausia – 0, didžiausia – 1.
Pavadinimas
Pavadinimas yra trumpas diagramos aprašymas; jis visada atvaizduojamas diagramos viršuje.
Pavyzdys
Kopijuoti
Įterpti
quadrantChart
title This is a sample example
x-axis
X ašis nusako X ašyje rodomą tekstą. X ašis skirstoma į dvi dalis – „kairę“ ir „dešinę“; galite įvesti abi arba tik „kairę“. Sakinys turi prasidėti x-axis, po to – left axis text, tada skyriklis --> ir galiausiai right axis text.
Pavyzdys
1. x-axis --> bus atvaizduojamas ir kairiosios, ir dešiniosios ašies tekstas.
2. x-axis – atvaizduojamas tik kairiosios ašies tekstas.
y-axis
Y ašis nusako Y ašyje rodomą tekstą. Y ašis skirstoma į dvi dalis – „viršutinę“ ir „apatinę“; galite įvesti abi arba tik „apatinę“. Sakinys turi prasidėti y-axis, po to – bottom axis text, tada skyriklis --> ir galiausiai top axis text.
Pavyzdys
1. y-axis --> bus atvaizduojamas ir apatinės, ir viršutinės ašies tekstas.
2. y-axis – atvaizduojamas tik apatinės ašies tekstas.
Kvadranto tekstas
quadrant-[1,2,3,4] nusako kiekviename kvadrante rodomą teksto turinį.
Pavyzdys
1. quadrant-1 nusako tekstą, kuris bus rodomas viršutiniame dešiniajame kvadrante
2. quadrant-2 nusako tekstą, kuris bus rodomas viršutiniame kairiajame kvadrante.
3. quadrant-3 nusako tekstą, kuris bus rodomas apatiniame kairiajame kvadrante.
4. quadrant-4 nusako tekstą, kuris bus rodomas apatiniame dešiniajame kvadrante.
Taškas
Naudojama apskritimui kvadrantų diagramoje nubrėžti. Sintaksė: : [x, y], kur x ir y reikšmės yra nuo 0 iki 1.
Pavyzdys
1. Point 1: [0.75, 0.80], taškas 1 bus nubraižytas viršutiniame dešiniajame kvadrante.
2. Point 2: [0.35, 0.24], taškas 2 bus nubraižytas apatiniame kairiajame kvadrante.
Diagramos konfigūracija
| Parametras | Aprašymas | Numatytoji reikšmė |
|---|---|---|
| chartWidth | Diagramos plotis | 500 |
| chartHeight | Diagramos aukštis | 500 |
| titlePadding | Pavadinimo viršutinė ir apatinė vidinės paraštės | 10 |
| titleFontSize | Pavadinimo šrifto dydis | 20 |
| quadrantPadding | Užpildas už visų kvadrantų ribų | 5 |
| quadrantTextTopPadding | Kvadranto teksto viršutinė paraštė, kai tekstas braižomas viršuje (ne ant duomenų taško) | 5 |
| quadrantLabelFontSize | Kvadranto teksto šrifto dydis | 16 |
| quadrantInternalBorderStrokeWidth | Vidinio kvadrantų rėmelio plotis | 1 |
| quadrantExternalBorderStrokeWidth | Išorinio kvadrantų rėmelio kontūro plotis | 2 |
| xAxisLabelPadding | x ašies teksto viršutinė ir apatinė vidinės paraštės | 5 |
| xAxisLabelFontSize | x ašies teksto šrifto dydis | 16 |
| xAxisPosition | x ašies padėtis (viršuje, apačioje). Jei yra duomenų taškų, x ašis visada atvaizduojama apačioje | top |
| yAxisLabelPadding | y ašies teksto kairioji ir dešinioji vidinės paraštės | 5 |
| yAxisLabelFontSize | y ašies teksto šrifto dydis | 16 |
| yAxisPosition | y ašies padėtis (kairė, dešinė) | left |
| pointTextPadding | Tarpas tarp duomenų taško ir žemiau esančio teksto | 5 |
| pointLabelFontSize | Duomenų taško teksto šrifto dydis | 12 |
| pointRadius | Duomenų taško spindulys | 5 |
Diagramos temos kintamasis
| Parametras | Aprašymas |
|---|---|
| quadrant1Fill | Viršutinio dešiniojo kvadranto užpildo spalva |
| quadrant2Fill | Viršutinio kairiojo kvadranto užpildo spalva |
| quadrant3Fill | Apatinio kairiojo kvadranto užpildo spalva |
| quadrant4Fill | Apatinio dešiniojo kvadranto užpildo spalva |
| quadrant1TextFill | Viršutinio dešiniojo kvadranto teksto spalva |
| quadrant2TextFill | Viršutinio kairiojo kvadranto teksto spalva |
| quadrant3TextFill | Apatinio kairiojo kvadranto teksto spalva |
| quadrant4TextFill | Apatinio dešiniojo kvadranto teksto spalva |
| quadrantPointFill | Duomenų taško užpildo spalva |
| quadrantPointTextFill | Duomenų taško teksto spalva |
| quadrantXAxisTextFill | x ašies teksto spalva |
| quadrantYAxisTextFill | y ašies teksto spalva |
| quadrantInternalBorderStrokeFill | Vidinio kvadrantų rėmelio spalva |
| quadrantExternalBorderStrokeFill | Išorinio kvadrantų rėmelio spalva |
| quadrantTitleFill | Pavadinimo spalva |
Konfigūracijos ir temos pavyzdys
Kopijuoti
Įterpti
---
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
Duomenų taško stilius
Duomenų taškai gali būti stilizuojami tiesiogiai arba naudojant apibrėžtas bendras klases
Tiesioginis stilius
Kopijuoti
Įterpti
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
Klasės stilius
Kopijuoti
Įterpti
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
Galimi stiliai:
| Parametras | Aprašymas |
|---|---|
| color | Duomenų taško užpildo spalva |
| radius | Duomenų taško spindulys |
| stroke-width | Duomenų taško rėmelio plotis |
| stroke-color | Duomenų taško rėmelio spalva (negalioja, kai nenurodytas stroke-width) |
Pirmumo eilė: 1. Tiesioginis stilius 2. Klasės stilius 3. Temos stilius
Stiliaus pavyzdys
Kopijuoti
Įterpti
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
