Kvadrantdiagram
Et kvadrantdiagram er en visualisering, der opdeler data i fire kvadranter. Det bruges til at plotte datapunkter på et todimensionelt gitter, hvor en variabel repræsenteres på x-aksen og en anden på y-aksen. Opdelingen i kvadranter bestemmes ved at dele diagrammet i fire lige store dele ud fra et sæt kriterier, der er specifikke for de analyserede data. Kvadrantdiagrammer bruges typisk til at identificere mønstre og tendenser i data og til at prioritere handlinger ud fra datapunkternes placering i diagrammet. De bruges ofte i scenarier som forretning, marketing og risikostyring.
Eksempel
Kopiér
Integrer
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]
Syntaks
Hvis der ikke er nogen tilgængelige datapunkter i diagrammet, rendres akseteksten og kvadrantnavnene i midten af den tilsvarende kvadrant. Hvis der er datapunkter, rendres x-akseetiketterne fra venstre side af den tilsvarende kvadrant, og kvadrantteksten vises nederst i diagrammet. Y-akseetiketterne rendres nederst i den tilsvarende kvadrant, og kvadrantteksten rendres øverst i den tilsvarende kvadrant.
For datapunkternes koordinatværdier er minimumsværdien 0 og maksimumsværdien 1.
Titel
Titlen er en kort beskrivelse af diagrammet, og den rendres altid øverst i diagrammet.
Eksempel
Kopiér
Integrer
quadrantChart
title This is a sample example
x-axis
X-aksen bestemmer den tekst, der vises på x-aksen. X-aksen er opdelt i en 'venstre' og en 'højre' del, og du kan angive begge eller kun 'venstre'. Udsagnet skal begynde med x-axis, derefter left axis text, derefter separatoren --> og til sidst right axis text.
Eksempel
1. x-axis --> både venstre og højre aksetekst rendres.
2. x-axis renderer kun venstre aksetekst.
y-axis
Y-aksen bestemmer den tekst, der vises på y-aksen. Y-aksen er opdelt i en 'øverste' og en 'nederste' del, og du kan angive begge eller kun 'nederste'. Udsagnet skal begynde med y-axis, derefter bottom axis text, derefter separatoren --> og til sidst top axis text.
Eksempel
1. y-axis --> både nederste og øverste aksetekst rendres.
2. y-axis renderer kun nederste aksetekst.
Kvadranttekst
quadrant-[1,2,3,4] bestemmer det tekstindhold, der vises i hver kvadrant.
Eksempel
1. quadrant-1 bestemmer den tekst, der vises i den øverste højre kvadrant
2. quadrant-2 bestemmer den tekst, der vises i den øverste venstre kvadrant.
3. quadrant-3 bestemmer den tekst, der vises i den nederste venstre kvadrant.
4. quadrant-4 bestemmer den tekst, der vises i den nederste højre kvadrant.
Punkt
Bruges til at tegne en cirkel i kvadrantdiagrammet. Syntaksen er : [x, y], hvor x og y har værdier i intervallet 0 - 1.
Eksempel
1. Point 1: [0.75, 0.80] , punkt 1 tegnes i den øverste højre kvadrant.
2. Point 2: [0.35, 0.24] , punkt 2 tegnes i den nederste venstre kvadrant.
Diagramkonfiguration
| Parameter | Beskrivelse | Standardværdi |
|---|---|---|
| chartWidth | Diagrammets bredde | 500 |
| chartHeight | Diagrammets højde | 500 |
| titlePadding | Titelens indvendige afstand over og under | 10 |
| titleFontSize | Titelens skriftstørrelse | 20 |
| quadrantPadding | Udfyldning uden for alle kvadranter | 5 |
| quadrantTextTopPadding | Kvadranttekstens øverste margen, når teksten tegnes øverst (ikke på et datapunkt) | 5 |
| quadrantLabelFontSize | Kvadranttekstens skriftstørrelse | 16 |
| quadrantInternalBorderStrokeWidth | Bredden af kvadranternes indre kant | 1 |
| quadrantExternalBorderStrokeWidth | Stregbredden for kvadranternes ydre kant | 2 |
| xAxisLabelPadding | X-aksetekstens indvendige afstand over og under | 5 |
| xAxisLabelFontSize | X-aksetekstens skriftstørrelse | 16 |
| xAxisPosition | X-aksens placering (top, bund). Hvis der er datapunkter, rendres x-aksen altid nederst | top |
| yAxisLabelPadding | Y-aksetekstens indvendige afstand til venstre og højre | 5 |
| yAxisLabelFontSize | Y-aksetekstens skriftstørrelse | 16 |
| yAxisPosition | Y-aksens placering (venstre, højre) | left |
| pointTextPadding | Afstanden mellem datapunktet og teksten nedenunder | 5 |
| pointLabelFontSize | Skriftstørrelsen for datapunktets tekst | 12 |
| pointRadius | Datapunktets radius | 5 |
Diagrammets temavariable
| Parameter | Beskrivelse |
|---|---|
| quadrant1Fill | Udfyldningsfarven for den øverste højre kvadrant |
| quadrant2Fill | Udfyldningsfarven for den øverste venstre kvadrant |
| quadrant3Fill | Udfyldningsfarven for den nederste venstre kvadrant |
| quadrant4Fill | Udfyldningsfarven for den nederste højre kvadrant |
| quadrant1TextFill | Tekstfarven for den øverste højre kvadrant |
| quadrant2TextFill | Tekstfarven for den øverste venstre kvadrant |
| quadrant3TextFill | Tekstfarven for den nederste venstre kvadrant |
| quadrant4TextFill | Tekstfarven for den nederste højre kvadrant |
| quadrantPointFill | Datapunktets udfyldningsfarve |
| quadrantPointTextFill | Datapunktets tekstfarve |
| quadrantXAxisTextFill | X-aksetekstens farve |
| quadrantYAxisTextFill | Y-aksetekstens farve |
| quadrantInternalBorderStrokeFill | Farven på kvadranternes indre kant |
| quadrantExternalBorderStrokeFill | Farven på kvadranternes ydre kant |
| quadrantTitleFill | Titelens farve |
Eksempel på konfiguration og tema
Kopiér
Integrer
---
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
Datapunktstil
Datapunkter kan styles direkte eller bruge en allerede defineret delt klasse
Direkte stil
Kopiér
Integrer
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
Klassestil
Kopiér
Integrer
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
Tilgængelige stile:
| Parameter | Beskrivelse |
|---|---|
| color | Datapunktets udfyldningsfarve |
| radius | Datapunktets radius |
| stroke-width | Datapunktets kantbredde |
| stroke-color | Datapunktets kantfarve (har ingen virkning, når stroke-width ikke er angivet) |
Prioritetsrækkefølge: 1. Direkte stil 2. Klassestil 3. Temastil
Styleksempel
Kopiér
Integrer
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
