Kvadrantdiagram
Et kvadrantdiagram er et visualiseringsdiagram som deler data inn i fire kvadranter. Det brukes til å plotte datapunkter på et todimensjonalt rutenett, der én variabel representeres på x-aksen og en annen variabel på y-aksen. Inndelingen i kvadranter bestemmes ved å dele diagrammet i fire like deler basert på et sett av kriterier spesifikke for dataene som analyseres. Kvadrantdiagrammer brukes ofte til å identifisere mønstre og trender i data og til å prioritere handlinger basert på datapunktenes plassering i diagrammet. De brukes vanligvis i scenarier som forretningsvirksomhet, markedsføring og risikostyring.
Eksempel
Kopier
Bygg inn
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 det ikke finnes tilgjengelige datapunkter i diagrammet, rendres akseteksten og kvadrantnavnene i midten av de tilsvarende kvadrantene. Hvis det finnes datapunkter, rendres x-akseetiketten fra venstre side av den tilsvarende kvadranten, og kvadrantteksten vises nederst i diagrammet. y-akseetiketten rendres nederst i den tilsvarende kvadranten, og kvadrantteksten rendres øverst i den tilsvarende kvadranten.
For koordinatverdiene til datapunktene er minimumsverdien 0 og maksimumsverdien 1.
Tittel
Tittelen er en kort beskrivelse av diagrammet, og den rendres alltid øverst i diagrammet.
Eksempel
Kopier
Bygg inn
quadrantChart
title This is a sample example
x-axis
x-aksen bestemmer teksten som vises på x-aksen. x-aksen er delt inn i en 'venstre' og en 'høyre' del, og du kan angi begge eller bare den 'venstre'. Setningen skal begynne med x-axis , deretter left axis text , så skilletegnet --> og til slutt right axis text .
Eksempel
1. x-axis --> både teksten for venstre og høyre akse rendres.
2. x-axis rendrer bare teksten for venstre akse.
y-axis
y-aksen bestemmer teksten som vises på y-aksen. y-aksen er delt inn i en 'øvre' og en 'nedre' del, og du kan angi begge eller bare den 'nedre'. Setningen skal begynne med y-axis , deretter bottom axis text , så skilletegnet --> og til slutt top axis text .
Eksempel
1. y-axis --> både teksten for nederste og øverste akse rendres.
2. y-axis rendrer bare teksten for nederste akse.
Kvadranttekst
quadrant-[1,2,3,4] bestemmer tekstinnholdet som vises i hver kvadrant.
Eksempel
1. quadrant-1 bestemmer teksten som vises i øvre høyre kvadrant
2. quadrant-2 bestemmer teksten som vises i øvre venstre kvadrant.
3. quadrant-3 bestemmer teksten som vises i nedre venstre kvadrant.
4. quadrant-4 bestemmer teksten som vises i nedre høyre kvadrant.
Prikk
Brukes til å tegne en sirkel inne i kvadrantdiagrammet. Syntaksen er : [x, y] , der verdiområdet for x og y er 0 - 1.
Eksempel
1. Point 1: [0.75, 0.80] , prikk 1 tegnes i øvre høyre kvadrant.
2. Point 2: [0.35, 0.24] , prikk 2 tegnes i nedre venstre kvadrant.
Diagramkonfigurasjon
| Parameter | Beskrivelse | Standardverdi |
|---|---|---|
| chartWidth | Diagrammets bredde | 500 |
| chartHeight | Diagrammets høyde | 500 |
| titlePadding | Tittelens indre marg over og under | 10 |
| titleFontSize | Skriftstørrelsen på tittelen | 20 |
| quadrantPadding | Utfylling utenfor alle kvadranter | 5 |
| quadrantTextTopPadding | Øvre marg for kvadranttekst når teksten tegnes øverst (ikke på datapunkter) | 5 |
| quadrantLabelFontSize | Skriftstørrelsen på kvadrantteksten | 16 |
| quadrantInternalBorderStrokeWidth | Bredden på kvadrantens indre ramme | 1 |
| quadrantExternalBorderStrokeWidth | Strekbredden på kvadrantens ytre ramme | 2 |
| xAxisLabelPadding | X-aksetekstens indre marg over og under | 5 |
| xAxisLabelFontSize | Skriftstørrelsen på x-akseteksten | 16 |
| xAxisPosition | x-aksens posisjon (top, bottom). Hvis det finnes datapunkter, rendres x-aksen alltid nederst | top |
| yAxisLabelPadding | y-aksetekstens indre marg til venstre og høyre | 5 |
| yAxisLabelFontSize | Skriftstørrelsen på y-akseteksten | 16 |
| yAxisPosition | y-aksens posisjon (venstre, høyre) | left |
| pointTextPadding | Avstanden mellom datapunktet og teksten under | 5 |
| pointLabelFontSize | Skriftstørrelsen på datapunktteksten | 12 |
| pointRadius | Datapunktets radius | 5 |
Diagramtema-variabel
| Parameter | Beskrivelse |
|---|---|
| quadrant1Fill | Fyllfargen for øvre høyre kvadrant |
| quadrant2Fill | Fyllfargen for øvre venstre kvadrant |
| quadrant3Fill | Fyllfargen for nedre venstre kvadrant |
| quadrant4Fill | Fyllfargen for nedre høyre kvadrant |
| quadrant1TextFill | Tekstfargen for øvre høyre kvadrant |
| quadrant2TextFill | Tekstfargen for øvre venstre kvadrant |
| quadrant3TextFill | Tekstfargen for nedre venstre kvadrant |
| quadrant4TextFill | Tekstfargen for nedre høyre kvadrant |
| quadrantPointFill | Fyllfargen for datapunktet |
| quadrantPointTextFill | Tekstfargen for datapunktet |
| quadrantXAxisTextFill | Tekstfargen for x-aksen |
| quadrantYAxisTextFill | Tekstfargen for y-aksen |
| quadrantInternalBorderStrokeFill | Fargen på kvadrantens indre ramme |
| quadrantExternalBorderStrokeFill | Fargen på kvadrantens ytre ramme |
| quadrantTitleFill | Tittelfarge |
Eksempel på konfigurasjon og tema
Kopier
Bygg inn
---
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 ved hjelp av en allerede definert delt klasse
Direkte stil
Kopier
Bygg inn
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
Kopier
Bygg inn
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
Tilgjengelige stiler:
| Parameter | Beskrivelse |
|---|---|
| color | Fyllfargen for datapunktet |
| radius | Datapunktets radius |
| stroke-width | Bredden på datapunktets ramme |
| stroke-color | Fargen på datapunktets ramme (ugyldig når stroke-width ikke er angitt) |
Prioritetsrekkefølge: 1. direkte stil 2. klassestil 3. temastil
Stileksempel
Kopier
Bygg inn
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
