Quadrantendiagramm
Ein Quadrantendiagramm ist eine Visualisierung, die Daten in vier Quadranten unterteilt. Es wird verwendet, um Datenpunkte auf einem zweidimensionalen Raster darzustellen, wobei eine Variable auf der x-Achse und eine andere auf der y-Achse dargestellt wird. Die Aufteilung der Quadranten wird bestimmt, indem das Diagramm anhand einer Reihe von Kriterien, die für die analysierten Daten spezifisch sind, in vier gleiche Teile geteilt wird. Quadrantendiagramme werden häufig verwendet, um Muster und Trends in Daten zu erkennen und Aktionen anhand der Position der Datenpunkte im Diagramm zu priorisieren. Sie werden üblicherweise in Bereichen wie Business, Marketing und Risikomanagement eingesetzt.
Beispiel
Kopieren
Einbetten
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
Wenn im Diagramm keine Datenpunkte verfügbar sind, werden der Achsentext und die Quadrantennamen in der Mitte des jeweiligen Quadranten gerendert. Wenn Datenpunkte vorhanden sind, wird das x-Achsen-Label vom linken Rand des jeweiligen Quadranten aus gerendert, und der Quadrantentext wird am unteren Rand des Diagramms angezeigt. Das y-Achsen-Label wird am unteren Rand des jeweiligen Quadranten gerendert, und der Quadrantentext wird oben im jeweiligen Quadranten gerendert.
Für die Koordinatenwerte der Datenpunkte beträgt der Minimalwert 0 und der Maximalwert 1.
Titel
Der Titel ist eine kurze Beschreibung des Diagramms und wird immer oben im Diagramm gerendert.
Beispiel
Kopieren
Einbetten
quadrantChart
title This is a sample example
x-axis
Die x-Achse bestimmt den Text, der auf der x-Achse angezeigt wird. Die x-Achse ist in die beiden Teile 'links' und 'rechts' unterteilt; du kannst beide oder nur 'links' eingeben. Die Anweisung sollte mit x-axis beginnen, dann folgt left axis text, dann das Trennzeichen --> und schließlich right axis text.
Beispiel
1. x-axis --> sowohl der linke als auch der rechte Achsentext werden gerendert.
2. x-axis rendert nur den linken Achsentext.
y-axis
Die y-Achse bestimmt den Text, der auf der y-Achse angezeigt wird. Die y-Achse ist in die beiden Teile 'oben' und 'unten' unterteilt; du kannst beide oder nur 'unten' eingeben. Die Anweisung sollte mit y-axis beginnen, dann folgt bottom axis text, dann das Trennzeichen --> und schließlich top axis text.
Beispiel
1. y-axis --> sowohl der untere als auch der obere Achsentext werden gerendert.
2. y-axis rendert nur den unteren Achsentext.
Quadrantentext
quadrant-[1,2,3,4] bestimmt den Textinhalt, der in jedem Quadranten angezeigt wird.
Beispiel
1. quadrant-1 bestimmt den Text, der im rechten oberen Quadranten angezeigt wird
2. quadrant-2 bestimmt den Text, der im linken oberen Quadranten angezeigt wird.
3. quadrant-3 bestimmt den Text, der im linken unteren Quadranten angezeigt wird.
4. quadrant-4 bestimmt den Text, der im rechten unteren Quadranten angezeigt wird.
Punkt
Wird verwendet, um einen Kreis im Quadrantendiagramm zu zeichnen. Die Syntax lautet : [x, y], wobei x und y Werte zwischen 0 und 1 annehmen.
Beispiel
1. Point 1: [0.75, 0.80] , Datenpunkt 1 wird im rechten oberen Quadranten gezeichnet.
2. Point 2: [0.35, 0.24] , Datenpunkt 2 wird im linken unteren Quadranten gezeichnet.
Diagrammkonfiguration
| Parameter | Beschreibung | Standardwert |
|---|---|---|
| chartWidth | Die Breite des Diagramms | 500 |
| chartHeight | Die Höhe des Diagramms | 500 |
| titlePadding | Der obere und untere Innenabstand des Titels | 10 |
| titleFontSize | Die Schriftgröße des Titels | 20 |
| quadrantPadding | Der Abstand außerhalb aller Quadranten | 5 |
| quadrantTextTopPadding | Der obere Rand des Quadrantentextes, wenn der Text oben gezeichnet wird (nicht auf einem Datenpunkt) | 5 |
| quadrantLabelFontSize | Die Schriftgröße des Quadrantentextes | 16 |
| quadrantInternalBorderStrokeWidth | Die Breite des inneren Rahmens der Quadranten | 1 |
| quadrantExternalBorderStrokeWidth | Die Strichstärke des äußeren Rahmens der Quadranten | 2 |
| xAxisLabelPadding | Der obere und untere Innenabstand des x-Achsentextes | 5 |
| xAxisLabelFontSize | Die Schriftgröße des x-Achsentextes | 16 |
| xAxisPosition | Die Position der x-Achse (oben, unten). Wenn Datenpunkte vorhanden sind, wird die x-Achse immer unten gerendert | top |
| yAxisLabelPadding | Der linke und rechte Innenabstand des y-Achsentextes | 5 |
| yAxisLabelFontSize | Die Schriftgröße des y-Achsentextes | 16 |
| yAxisPosition | Die Position der y-Achse (links, rechts) | left |
| pointTextPadding | Der Abstand zwischen dem Datenpunkt und dem darunterliegenden Text | 5 |
| pointLabelFontSize | Die Schriftgröße des Datenpunkttextes | 12 |
| pointRadius | Der Radius des Datenpunkts | 5 |
Diagramm-Themenvariablen
| Parameter | Beschreibung |
|---|---|
| quadrant1Fill | Die Füllfarbe des rechten oberen Quadranten |
| quadrant2Fill | Die Füllfarbe des linken oberen Quadranten |
| quadrant3Fill | Die Füllfarbe des linken unteren Quadranten |
| quadrant4Fill | Die Füllfarbe des rechten unteren Quadranten |
| quadrant1TextFill | Die Textfarbe des rechten oberen Quadranten |
| quadrant2TextFill | Die Textfarbe des linken oberen Quadranten |
| quadrant3TextFill | Die Textfarbe des linken unteren Quadranten |
| quadrant4TextFill | Die Textfarbe des rechten unteren Quadranten |
| quadrantPointFill | Die Füllfarbe des Datenpunkts |
| quadrantPointTextFill | Die Textfarbe des Datenpunkts |
| quadrantXAxisTextFill | Die Textfarbe der x-Achse |
| quadrantYAxisTextFill | Die Textfarbe der y-Achse |
| quadrantInternalBorderStrokeFill | Die Farbe des inneren Rahmens der Quadranten |
| quadrantExternalBorderStrokeFill | Die Farbe des äußeren Rahmens der Quadranten |
| quadrantTitleFill | Titelfarbe |
Konfigurations- und Themenbeispiel
Kopieren
Einbetten
---
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
Datenpunktstil
Datenpunkte können direkt gestaltet werden oder eine bereits definierte gemeinsame Klasse verwenden
Direkter Stil
Kopieren
Einbetten
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
Klassenstil
Kopieren
Einbetten
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
Verfügbare Stile:
| Parameter | Beschreibung |
|---|---|
| color | Die Füllfarbe des Datenpunkts |
| radius | Der Radius des Datenpunkts |
| stroke-width | Die Rahmenbreite des Datenpunkts |
| stroke-color | Die Rahmenfarbe des Datenpunkts (ohne Wirkung, wenn stroke-width nicht angegeben ist) |
Prioritätsreihenfolge: 1. Direkter Stil 2. Klassenstil 3. Themenstil
Stilbeispiel
Kopieren
Einbetten
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
