Quadrant-Diagramm

Ein Quadrant-Diagramm ist eine visuelle Darstellung von Daten, die in vier Quadranten unterteilt ist. Es wird verwendet, um Datenpunkte in einem zweidimensionalen Raster zu plotten, wobei eine Variable auf der x-Achse und eine andere Variable auf der y-Achse dargestellt wird. Die Quadranten werden bestimmt, indem das Diagramm in vier gleiche Teile basierend auf einer Reihe von Kriterien unterteilt wird, die spezifisch für die analysierten Daten sind. Quadrant-Diagramme werden häufig verwendet, um Muster und Trends in Daten zu identifizieren und um Maßnahmen basierend auf der Position der Datenpunkte innerhalb des Diagramms zu priorisieren. Sie werden häufig in den Bereichen Wirtschaft, Marketing und Risikomanagement sowie in anderen Bereichen verwendet.

Beispiel

Code:

Syntax

NOTE

Wenn keine Punkte im Diagramm verfügbar sind, werden sowohl der **Achsentext** als auch der **Quadrant** in der Mitte des jeweiligen Quadranten gerendert. Wenn Punkte vorhanden sind, werden die **x-Achsen** Beschriftungen von der linken Seite des jeweiligen Quadranten gerendert und sie werden auch am unteren Rand des Diagramms angezeigt, und die **y-Achsen** Beschriftungen werden am unteren Rand des jeweiligen Quadranten gerendert, der Quadrant-Text wird oben im jeweiligen Quadranten gerendert.

NOTE

Für Punkte x und y 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

quadrantChart
    title Das ist ein Beispiel

x-Achse

Die x-Achse bestimmt, welcher Text in der x-Achse angezeigt wird. In der x-Achse gibt es zwei Teile: links und rechts. Sie können beide übergeben oder nur links. Die Anweisung sollte mit x-axis beginnen, dann den linken Achsentext gefolgt von dem Trennzeichen --> und dann rechten Achsentext.

Beispiel

1. x-axis <text> --> <text> Beide Achsentexte links und rechts werden gerendert.
2. x-axis <text> Nur der linke Achsentext wird gerendert.

y-Achse

Die y-Achse bestimmt, welcher Text in der y-Achse angezeigt wird. In der y-Achse gibt es zwei Teile: oben und unten. Sie können beide übergeben oder nur unten. Die Anweisung sollte mit y-axis beginnen, dann den unteren Achsentext gefolgt von dem Trennzeichen --> und dann oberen Achsentext.

Beispiel

1. y-axis <text> --> <text> Beide Achsentexte unten und oben werden gerendert.
2. y-axis <text> Nur der untere Achsentext wird gerendert.

Quadranten-Text

Der quadrant-[1,2,3,4] bestimmt, welcher Text innerhalb der Quadranten angezeigt wird.

Beispiel

1. quadrant-1 <text> bestimmt, welcher Text im oberen rechten Quadranten gerendert wird.
2. quadrant-2 <text> bestimmt, welcher Text im oberen linken Quadranten gerendert wird.
3. quadrant-3 <text> bestimmt, welcher Text im unteren linken Quadranten gerendert wird.
4. quadrant-4 <text> bestimmt, welcher Text im unteren rechten Quadranten gerendert wird.

Punkte

Punkte werden verwendet, um einen Kreis innerhalb des quadrantCharts zu plotten. Die Syntax ist <text>: [x, y], wobei der x- und y-Wert im Bereich von 0 bis 1 liegt.

Beispiel

1. Point 1: [0.75, 0.80], hier wird der Punkt 1 im oberen rechten Quadranten gezeichnet.
2. Point 2: [0.35, 0.24], hier wird der Punkt 2 im unteren linken Quadranten gezeichnet.

Diagramm-Konfigurationen

Parameter	Beschreibung	Standardwert
chartWidth	Breite des Diagramms	500
chartHeight	Höhe des Diagramms	500
titlePadding	Obere und untere Polsterung des Titels	10
titleFontSize	Schriftgröße des Titels	20
quadrantPadding	Polsterung außerhalb aller Quadranten	5
quadrantTextTopPadding	Obere Polsterung des Quadrantentextes, wenn der Text oben (nicht die Datenpunkte) gezeichnet wird	5
quadrantLabelFontSize	Schriftgröße des Quadrantentextes	16
quadrantInternalBorderStrokeWidth	Randstrichbreite innerhalb der Quadranten	1
quadrantExternalBorderStrokeWidth	Randstrichbreite des äußeren Quadranten	2
xAxisLabelPadding	Obere und untere Polsterung des x-Achsentextes	5
xAxisLabelFontSize	Schriftgröße der x-Achsentexte	16
xAxisPosition	Position der x-Achse (oben, unten), wenn Punkte vorhanden sind, wird die x-Achse immer unten gerendert	'top'
yAxisLabelPadding	Linke und rechte Polsterung des y-Achsentextes	5
yAxisLabelFontSize	Schriftgröße der y-Achsentexte	16
yAxisPosition	Position der y-Achse (links, rechts)	'left'
pointTextPadding	Abstand zwischen Punkt und dem darunterstehenden Text	5
pointLabelFontSize	Schriftgröße des Punkttextes	12
pointRadius	Radius des zu zeichnenden Punktes	5

Diagramm-Thema-Variablen

Parameter	Beschreibung
quadrant1Fill	Füllfarbe des oberen rechten Quadranten
quadrant2Fill	Füllfarbe des oberen linken Quadranten
quadrant3Fill	Füllfarbe des unteren linken Quadranten
quadrant4Fill	Füllfarbe des unteren rechten Quadranten
quadrant1TextFill	Textfarbe des oberen rechten Quadranten
quadrant2TextFill	Textfarbe des oberen linken Quadranten
quadrant3TextFill	Textfarbe des unteren linken Quadranten
quadrant4TextFill	Textfarbe des unteren rechten Quadranten
quadrantPointFill	Füllfarbe der Punkte
quadrantPointTextFill	Textfarbe der Punkte
quadrantXAxisTextFill	Textfarbe der x-Achse
quadrantYAxisTextFill	Textfarbe der y-Achse
quadrantInternalBorderStrokeFill	Innenrandfarbe der Quadranten
quadrantExternalBorderStrokeFill	Außenrandfarbe der Quadranten
quadrantTitleFill	Titel-Farbe

Beispiel zu Konfiguration und Thema

Code:

Punktgestaltung

Punkte können entweder direkt oder mit definierten gemeinsamen Klassen gestaltet werden.

1. Direkte Gestaltung

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

2. Klassenstilgestaltung

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	Füllfarbe des Punktes
radius	Radius des Punktes
stroke-width	Randbreite des Punktes
stroke-color	Randfarbe des Punktes (nutzlos, wenn die Randbreite nicht angegeben ist)

NOTE

Reihenfolge der Präferenzen: 1. Direkte Stile 2. Klassenstile 3. Themenstile

Beispiel zur Gestaltung

Code: