Kvadrantový diagram
Kvadrantový graf je vizualizační diagram, který rozděluje data do čtyř kvadrantů. Používá se k vykreslení datových bodů do dvourozměrné mřížky, kde jedna proměnná představuje osu x a druhá osu y. Rozdělení kvadrantů se určuje na základě sady kritérií specifických pro analyzovaná data, přičemž diagram se dělí na čtyři stejné části. Kvadrantové grafy se běžně používají k identifikaci vzorců a trendů v datech a k určení priorit akcí na základě polohy datových bodů v diagramu. Obvykle se používají v oblastech, jako je obchod, marketing a řízení rizik.
Příklad
Kopírovat
Vložení
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]
Syntaxe
Pokud v diagramu nejsou k dispozici žádné datové body, text os a názvy kvadrantů se vykreslí ve středu příslušných kvadrantů. Pokud jsou k dispozici datové body, popisky osy x se vykreslí z levé strany příslušného kvadrantu a text kvadrantu se zobrazí ve spodní části diagramu. Popisky osy y se vykreslí ve spodní části příslušného kvadrantu a text kvadrantu se vykreslí v horní části příslušného kvadrantu.
Pro hodnoty souřadnic datových bodů je minimum 0 a maximum 1.
Název
Název je stručný popis diagramu, který se vždy vykreslí v horní části diagramu.
Příklad
Kopírovat
Vložení
quadrantChart
title This is a sample example
x-axis
Osa x určuje text zobrazený na ose x. Osa x se dělí na 'levou' a 'pravou' část; můžete zadat obě nebo pouze 'levou'. Příkaz by měl začínat x-axis, následovat left axis text, poté oddělovač --> a nakonec right axis text.
Příklad
1. x-axis --> budou vykresleny texty levé i pravé osy.
2. x-axis vykreslí pouze text levé osy.
y-axis
Osa y určuje text zobrazený na ose y. Osa y se dělí na 'horní' a 'dolní' část; můžete zadat obě nebo pouze 'dolní'. Příkaz by měl začínat y-axis, následovat bottom axis text, poté oddělovač --> a nakonec top axis text.
Příklad
1. y-axis --> budou vykresleny texty dolní i horní osy.
2. y-axis vykreslí pouze text dolní osy.
Text kvadrantu
quadrant-[1,2,3,4] určuje textový obsah zobrazený v každém kvadrantu.
Příklad
1. quadrant-1 určuje text, který se zobrazí v pravém horním kvadrantu
2. quadrant-2 určuje text, který se zobrazí v levém horním kvadrantu.
3. quadrant-3 určuje text, který se zobrazí v levém dolním kvadrantu.
4. quadrant-4 určuje text, který se zobrazí v pravém dolním kvadrantu.
Bod
Používá se k vykreslení kruhu v kvadrantovém grafu. Syntaxe je : [x, y], kde x a y nabývají hodnot 0 - 1.
Příklad
1. Point 1: [0.75, 0.80] , bod 1 bude vykreslen v pravém horním kvadrantu.
2. Point 2: [0.35, 0.24] , bod 2 bude vykreslen v levém dolním kvadrantu.
Konfigurace diagramu
| Parametr | Popis | Výchozí hodnota |
|---|---|---|
| chartWidth | Šířka diagramu | 500 |
| chartHeight | Výška diagramu | 500 |
| titlePadding | Horní a dolní vnitřní okraj názvu | 10 |
| titleFontSize | Velikost písma názvu | 20 |
| quadrantPadding | Odsazení mimo všechny kvadranty | 5 |
| quadrantTextTopPadding | Horní okraj textu kvadrantu, když se text vykresluje nahoře (nikoli na datovém bodu) | 5 |
| quadrantLabelFontSize | Velikost písma textu kvadrantu | 16 |
| quadrantInternalBorderStrokeWidth | Šířka vnitřního ohraničení kvadrantu | 1 |
| quadrantExternalBorderStrokeWidth | Šířka tahu vnějšího ohraničení kvadrantu | 2 |
| xAxisLabelPadding | Horní a dolní vnitřní okraj textu osy x | 5 |
| xAxisLabelFontSize | Velikost písma textu osy x | 16 |
| xAxisPosition | Pozice osy x (horní, dolní). Pokud existují datové body, osa x se vždy vykreslí dole | top |
| yAxisLabelPadding | Levý a pravý vnitřní okraj textu osy y | 5 |
| yAxisLabelFontSize | Velikost písma textu osy y | 16 |
| yAxisPosition | Pozice osy y (vlevo, vpravo) | left |
| pointTextPadding | Rozestup mezi datovým bodem a textem pod ním | 5 |
| pointLabelFontSize | Velikost písma textu datového bodu | 12 |
| pointRadius | Poloměr datového bodu | 5 |
Proměnné tématu diagramu
| Parametr | Popis |
|---|---|
| quadrant1Fill | Barva výplně pravého horního kvadrantu |
| quadrant2Fill | Barva výplně levého horního kvadrantu |
| quadrant3Fill | Barva výplně levého dolního kvadrantu |
| quadrant4Fill | Barva výplně pravého dolního kvadrantu |
| quadrant1TextFill | Barva textu pravého horního kvadrantu |
| quadrant2TextFill | Barva textu levého horního kvadrantu |
| quadrant3TextFill | Barva textu levého dolního kvadrantu |
| quadrant4TextFill | Barva textu pravého dolního kvadrantu |
| quadrantPointFill | Barva výplně datového bodu |
| quadrantPointTextFill | Barva textu datového bodu |
| quadrantXAxisTextFill | Barva textu osy x |
| quadrantYAxisTextFill | Barva textu osy y |
| quadrantInternalBorderStrokeFill | Barva vnitřního ohraničení kvadrantu |
| quadrantExternalBorderStrokeFill | Barva vnějšího ohraničení kvadrantu |
| quadrantTitleFill | Barva názvu |
Příklad konfigurace a tématu
Kopírovat
Vložení
---
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
Styl datových bodů
Styl datových bodů lze nastavit přímo nebo pomocí definovaných sdílených tříd
Přímý styl
Kopírovat
Vložení
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
Styl třídy
Kopírovat
Vložení
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
Dostupné styly:
| Parametr | Popis |
|---|---|
| color | Barva výplně datového bodu |
| radius | Poloměr datového bodu |
| stroke-width | Šířka ohraničení datového bodu |
| stroke-color | Barva ohraničení datového bodu (neplatná, pokud není zadána stroke-width) |
Priorita: 1. Přímý styl 2. Styl třídy 3. Styl tématu
Příklad stylu
Kopírovat
Vložení
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
