Kvadrantdiagram
Ett kvadrantdiagram är ett visualiseringsdiagram som delar in data i fyra kvadranter. Det används för att rita datapunkter på ett tvådimensionellt rutnät, där en variabel representeras på x-axeln och en annan variabel på y-axeln. Uppdelningen av kvadranterna bestäms genom att dela in diagrammet i fyra lika delar enligt en uppsättning kriterier specifika för den analyserade datan. Kvadrantdiagram används ofta för att identifiera mönster och trender i data och för att prioritera åtgärder utifrån datapunkternas position i diagrammet. De används vanligtvis inom områden som affärsverksamhet, marknadsföring och riskhantering.
Exempel
Kopiera
Bädda in
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]
Syntax
Om inga datapunkter finns tillgängliga i diagrammet renderas axeltexterna och kvadrantnamnen i mitten av respektive kvadrant. Om datapunkter finns renderas x-axeletiketterna från vänster sida av respektive kvadrant, och kvadranttexten visas längst ned i diagrammet. y-axeletiketterna renderas längst ned i respektive kvadrant, och kvadranttexten renderas högst upp i respektive kvadrant.
För datapunkternas koordinatvärden är minimivärdet 0 och maxvärdet 1.
Titel
Titeln är en kort beskrivning av diagrammet och renderas alltid högst upp i diagrammet.
Exempel
Kopiera
Bädda in
quadrantChart
title This is a sample example
x-axis
x-axeln bestämmer texten som visas på x-axeln. x-axeln delas in i två delar, 'vänster' och 'höger'; du kan ange båda eller endast 'vänster'. Satsen bör börja med x-axis , följt av left axis text, sedan avgränsaren --> och slutligen right axis text.
Exempel
1. x-axis --> både vänster och höger axeltext renderas.
2. x-axis renderar endast vänster axeltext.
y-axis
y-axeln bestämmer texten som visas på y-axeln. y-axeln delas in i två delar, 'över' och 'under'; du kan ange båda eller endast 'under'. Satsen bör börja med y-axis , följt av bottom axis text, sedan avgränsaren --> och slutligen top axis text.
Exempel
1. y-axis --> både nedre och övre axeltext renderas.
2. y-axis renderar endast nedre axeltext.
Kvadranttext
quadrant-[1,2,3,4] bestämmer textinnehållet som visas i varje kvadrant.
Exempel
1. quadrant-1 bestämmer texten som visas i den övre högra kvadranten
2. quadrant-2 bestämmer texten som visas i den övre vänstra kvadranten.
3. quadrant-3 bestämmer texten som visas i den nedre vänstra kvadranten.
4. quadrant-4 bestämmer texten som visas i den nedre högra kvadranten.
Punkt
Används för att rita en cirkel i kvadrantdiagrammet. Syntaxen är : [x, y], där x och y har värdeintervallet 0 - 1.
Exempel
1. Point 1: [0.75, 0.80] , punkt 1 ritas i den övre högra kvadranten.
2. Point 2: [0.35, 0.24] , punkt 2 ritas i den nedre vänstra kvadranten.
Diagramkonfiguration
| Parameter | Beskrivning | Standardvärde |
|---|---|---|
| chartWidth | Diagrammets bredd | 500 |
| chartHeight | Diagrammets höjd | 500 |
| titlePadding | Titelns övre och nedre inre marginal | 10 |
| titleFontSize | Titelns teckenstorlek | 20 |
| quadrantPadding | Utfyllnad utanför alla kvadranter | 5 |
| quadrantTextTopPadding | Kvadranttextens övre marginal när texten ritas högst upp (inte på en datapunkt) | 5 |
| quadrantLabelFontSize | Kvadranttextens teckenstorlek | 16 |
| quadrantInternalBorderStrokeWidth | Bredden på kvadrantens inre kant | 1 |
| quadrantExternalBorderStrokeWidth | Streckbredden för kvadrantens yttre kant | 2 |
| xAxisLabelPadding | x-axeltextens övre och nedre inre marginal | 5 |
| xAxisLabelFontSize | x-axeltextens teckenstorlek | 16 |
| xAxisPosition | x-axelns position (överst, nederst). Om datapunkter finns renderas x-axeln alltid nederst | top |
| yAxisLabelPadding | y-axeltextens vänstra och högra inre marginal | 5 |
| yAxisLabelFontSize | y-axeltextens teckenstorlek | 16 |
| yAxisPosition | y-axelns position (vänster, höger) | left |
| pointTextPadding | Avståndet mellan datapunkten och texten nedanför | 5 |
| pointLabelFontSize | Datapunkts textens teckenstorlek | 12 |
| pointRadius | Datapunktens radie | 5 |
Diagrammets temavariabler
| Parameter | Beskrivning |
|---|---|
| quadrant1Fill | Fyllningsfärgen för den övre högra kvadranten |
| quadrant2Fill | Fyllningsfärgen för den övre vänstra kvadranten |
| quadrant3Fill | Fyllningsfärgen för den nedre vänstra kvadranten |
| quadrant4Fill | Fyllningsfärgen för den nedre högra kvadranten |
| quadrant1TextFill | Textfärgen för den övre högra kvadranten |
| quadrant2TextFill | Textfärgen för den övre vänstra kvadranten |
| quadrant3TextFill | Textfärgen för den nedre vänstra kvadranten |
| quadrant4TextFill | Textfärgen för den nedre högra kvadranten |
| quadrantPointFill | Datapunktens fyllningsfärg |
| quadrantPointTextFill | Datapunktstextens färg |
| quadrantXAxisTextFill | x-axeltextens färg |
| quadrantYAxisTextFill | y-axeltextens färg |
| quadrantInternalBorderStrokeFill | Färgen på kvadrantens inre kant |
| quadrantExternalBorderStrokeFill | Färgen på kvadrantens yttre kant |
| quadrantTitleFill | Titelns färg |
Exempel på konfiguration och tema
Kopiera
Bädda in
---
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
Datapunktens stil
Datapunkter kan stilsättas direkt eller använda en redan definierad delad klass
Direkt stil
Kopiera
Bädda in
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
Klassstil
Kopiera
Bädda in
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
Tillgängliga stilar:
| Parameter | Beskrivning |
|---|---|
| color | Datapunktens fyllningsfärg |
| radius | Datapunktens radie |
| stroke-width | Datapunktens kantbredd |
| stroke-color | Datapunktens kantfärg (ogiltig när stroke-width inte anges) |
Prioritetsordning: 1. Direkt stil 2. Klassstil 3. Temastil
Stilexempel
Kopiera
Bädda in
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
