Kwadrantdiagram
Een kwadrantendiagram is een visualisatie die gegevens in vier kwadranten verdeelt. Het wordt gebruikt om datapunten op een tweedimensionaal raster te tekenen, waarbij de ene variabele op de x-as en de andere variabele op de y-as wordt weergegeven. De indeling van de kwadranten wordt bepaald door het diagram op basis van een reeks criteria die specifiek zijn voor de geanalyseerde gegevens in vier gelijke delen te verdelen. Kwadrantendiagrammen worden vaak gebruikt om patronen en trends in gegevens te herkennen en om acties te prioriteren op basis van de positie van datapunten in het diagram. Ze worden vaak gebruikt in scenario's zoals bedrijfsvoering, marketing en risicobeheer.
Voorbeeld
Kopiëren
Insluiten
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]
Syntaxis
Als er geen datapunten beschikbaar zijn in het diagram, worden de astekst en de kwadrantnamen in het midden van het betreffende kwadrant gerenderd. Als er wel datapunten zijn, wordt het x-aslabel vanaf de linkerkant van het betreffende kwadrant gerenderd en wordt de kwadranttekst onderaan het diagram weergegeven. Het y-aslabel wordt onderaan het betreffende kwadrant gerenderd en de kwadranttekst wordt bovenaan het betreffende kwadrant gerenderd.
Voor de coördinaatwaarden van datapunten is de minimumwaarde 0 en de maximumwaarde 1.
Titel
De titel is een korte beschrijving van het diagram en wordt altijd bovenaan het diagram gerenderd.
Voorbeeld
Kopiëren
Insluiten
quadrantChart
title This is a sample example
x-axis
De x-as bepaalt de tekst die op de x-as wordt weergegeven. De x-as is verdeeld in een 'links'- en 'rechts'-deel; je kunt beide invoeren of alleen 'links'. De verklaring moet beginnen met x-axis, gevolgd door left axis text, dan het scheidingsteken --> en ten slotte right axis text.
Voorbeeld
1. x-axis --> zowel de tekst van de linker- als de rechteras wordt gerenderd.
2. x-axis rendert alleen de tekst van de linker as.
y-axis
De y-as bepaalt de tekst die op de y-as wordt weergegeven. De y-as is verdeeld in een 'boven'- en 'onder'-deel; je kunt beide invoeren of alleen 'onder'. De verklaring moet beginnen met y-axis, gevolgd door bottom axis text, dan het scheidingsteken --> en ten slotte top axis text.
Voorbeeld
1. y-axis --> zowel de tekst van de onderste als de bovenste as wordt gerenderd.
2. y-axis rendert alleen de tekst van de onderste as.
Kwadranttekst
quadrant-[1,2,3,4] bepaalt de tekstinhoud die in elk kwadrant wordt weergegeven.
Voorbeeld
1. quadrant-1 bepaalt de tekst die in het rechtsboven-kwadrant wordt weergegeven
2. quadrant-2 bepaalt de tekst die in het linksboven-kwadrant wordt weergegeven.
3. quadrant-3 bepaalt de tekst die in het linksonder-kwadrant wordt weergegeven.
4. quadrant-4 bepaalt de tekst die in het rechtsonder-kwadrant wordt weergegeven.
Punt
Wordt gebruikt om een cirkel binnen het kwadrantendiagram te tekenen. De syntaxis is : [x, y], waarbij x en y waarden hebben van 0 tot 1.
Voorbeeld
1. Point 1: [0.75, 0.80] , punt 1 wordt in het rechtsboven-kwadrant getekend.
2. Point 2: [0.35, 0.24] , punt 2 wordt in het linksonder-kwadrant getekend.
Diagramconfiguratie
| Parameter | Beschrijving | Standaardwaarde |
|---|---|---|
| chartWidth | De breedte van het diagram | 500 |
| chartHeight | De hoogte van het diagram | 500 |
| titlePadding | De verticale binnenmarge van de titel | 10 |
| titleFontSize | De lettergrootte van de titel | 20 |
| quadrantPadding | De opvulling buiten alle kwadranten | 5 |
| quadrantTextTopPadding | De bovenmarge van de kwadranttekst wanneer de tekst bovenaan wordt getekend (niet op datapunten) | 5 |
| quadrantLabelFontSize | De lettergrootte van de kwadranttekst | 16 |
| quadrantInternalBorderStrokeWidth | De breedte van de binnenrand van de kwadranten | 1 |
| quadrantExternalBorderStrokeWidth | De lijndikte van de buitenrand van de kwadranten | 2 |
| xAxisLabelPadding | De verticale binnenmarge van de x-astekst | 5 |
| xAxisLabelFontSize | De lettergrootte van de x-astekst | 16 |
| xAxisPosition | De positie van de x-as (boven, onder). Als er datapunten zijn, wordt de x-as altijd onderaan gerenderd | top |
| yAxisLabelPadding | De horizontale binnenmarge van de y-astekst | 5 |
| yAxisLabelFontSize | De lettergrootte van de y-astekst | 16 |
| yAxisPosition | De positie van de y-as (links, rechts) | left |
| pointTextPadding | De afstand tussen datapunten en de tekst eronder | 5 |
| pointLabelFontSize | De lettergrootte van de datapunttekst | 12 |
| pointRadius | De straal van datapunten | 5 |
Diagram-themavariabelen
| Parameter | Beschrijving |
|---|---|
| quadrant1Fill | De opvulkleur van het rechtsboven-kwadrant |
| quadrant2Fill | De opvulkleur van het linksboven-kwadrant |
| quadrant3Fill | De opvulkleur van het linksonder-kwadrant |
| quadrant4Fill | De opvulkleur van het rechtsonder-kwadrant |
| quadrant1TextFill | De tekstkleur van het rechtsboven-kwadrant |
| quadrant2TextFill | De tekstkleur van het linksboven-kwadrant |
| quadrant3TextFill | De tekstkleur van het linksonder-kwadrant |
| quadrant4TextFill | De tekstkleur van het rechtsonder-kwadrant |
| quadrantPointFill | De opvulkleur van datapunten |
| quadrantPointTextFill | De tekstkleur van datapunten |
| quadrantXAxisTextFill | De tekstkleur van de x-as |
| quadrantYAxisTextFill | De tekstkleur van de y-as |
| quadrantInternalBorderStrokeFill | De kleur van de binnenrand van de kwadranten |
| quadrantExternalBorderStrokeFill | De kleur van de buitenrand van de kwadranten |
| quadrantTitleFill | De kleur van de titel |
Voorbeeld van configuratie en thema
Kopiëren
Insluiten
---
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
Stijl van datapunten
Datapunten kunnen direct een stijl krijgen of gebruikmaken van een reeds gedefinieerde gedeelde klasse
Directe stijl
Kopiëren
Insluiten
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
Klassestijl
Kopiëren
Insluiten
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
Beschikbare stijlen:
| Parameter | Beschrijving |
|---|---|
| color | De opvulkleur van datapunten |
| radius | De straal van datapunten |
| stroke-width | De randbreedte van datapunten |
| stroke-color | De randkleur van datapunten (niet van kracht wanneer stroke-width niet is opgegeven) |
Prioriteitsorde: 1. Directe stijl 2. Klassestijl 3. Themastijl
Stijlvoorbeeld
Kopiëren
Insluiten
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
