Diagramme de quadrants
Le diagramme de quadrant est un diagramme de visualisation qui divise les données en quatre quadrants. Il sert à tracer des points de données sur une grille en deux dimensions, une variable étant représentée sur l'axe des x et une autre sur l'axe des y. La division des quadrants est déterminée en divisant le diagramme en quatre parties égales selon un ensemble de critères propres aux données analysées. Le diagramme de quadrant sert généralement à identifier des motifs et des tendances dans les données, et à prioriser les actions en fonction de la position des points de données dans le diagramme. Il est couramment utilisé dans des domaines tels que le commerce, le marketing et la gestion des risques.
Exemple
Copier
Intégrer
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]
Syntaxe
Si aucun point de données n'est disponible dans le diagramme, le texte des axes et les noms des quadrants seront rendus au centre des quadrants correspondants. S'il y a des points de données, les étiquettes de l'axe des x seront rendues à partir du côté gauche des quadrants correspondants, et le texte du quadrant sera affiché en bas du diagramme. Les étiquettes de l'axe des y seront rendues en bas des quadrants correspondants, et le texte du quadrant sera rendu en haut des quadrants correspondants.
Pour les valeurs de coordonnées des points de données, la valeur minimale est 0 et la valeur maximale est 1.
Titre
Le titre est une brève description du diagramme ; il est toujours rendu en haut du diagramme.
Exemple
Copier
Intégrer
quadrantChart
title This is a sample example
x-axis
L'axe des x détermine le texte affiché sur l'axe des x. L'axe des x est divisé en deux parties 'gauche' et 'droite' ; vous pouvez saisir les deux ou seulement 'gauche'. L'instruction doit commencer par x-axis, suivie de left axis text, puis d'un séparateur -->, et enfin de right axis text.
Exemple
1. x-axis --> le texte de l'axe gauche et celui de l'axe droit seront tous deux rendus.
2. x-axis rend uniquement le texte de l'axe gauche.
y-axis
L'axe des y détermine le texte affiché sur l'axe des y. L'axe des y est divisé en deux parties 'haut' et 'bas' ; vous pouvez saisir les deux ou seulement 'bas'. L'instruction doit commencer par y-axis, suivie de bottom axis text, puis d'un séparateur -->, et enfin de top axis text.
Exemple
1. y-axis --> le texte de l'axe inférieur et celui de l'axe supérieur seront tous deux rendus.
2. y-axis rend uniquement le texte de l'axe inférieur.
Texte des quadrants
quadrant-[1,2,3,4] détermine le contenu textuel affiché dans chaque quadrant.
Exemple
1. quadrant-1 détermine le texte à afficher dans le quadrant supérieur droit
2. quadrant-2 détermine le texte à afficher dans le quadrant supérieur gauche.
3. quadrant-3 détermine le texte à afficher dans le quadrant inférieur gauche.
4. quadrant-4 détermine le texte à afficher dans le quadrant inférieur droit.
Point
Sert à tracer un cercle dans le diagramme de quadrant. La syntaxe est : [x, y] , où x et y prennent des valeurs comprises entre 0 et 1.
Exemple
1. Point 1: [0.75, 0.80] , le point 1 sera tracé dans le quadrant supérieur droit.
2. Point 2: [0.35, 0.24] , le point 2 sera tracé dans le quadrant inférieur gauche.
Configuration du diagramme
| Paramètre | Description | Valeur par défaut |
|---|---|---|
| chartWidth | Largeur du diagramme | 500 |
| chartHeight | Hauteur du diagramme | 500 |
| titlePadding | Marge intérieure verticale du titre | 10 |
| titleFontSize | Taille de police du titre | 20 |
| quadrantPadding | Marge extérieure à tous les quadrants | 5 |
| quadrantTextTopPadding | Marge supérieure du texte de quadrant lorsque le texte est dessiné en haut (et non sur un point de données) | 5 |
| quadrantLabelFontSize | Taille de police du texte des quadrants | 16 |
| quadrantInternalBorderStrokeWidth | Largeur de la bordure intérieure des quadrants | 1 |
| quadrantExternalBorderStrokeWidth | Largeur du contour de la bordure extérieure des quadrants | 2 |
| xAxisLabelPadding | Marge intérieure verticale du texte de l'axe des x | 5 |
| xAxisLabelFontSize | Taille de police du texte de l'axe des x | 16 |
| xAxisPosition | Position de l'axe des x (haut, bas). S'il existe des points de données, l'axe des x est toujours rendu en bas | top |
| yAxisLabelPadding | Marge intérieure horizontale du texte de l'axe des y | 5 |
| yAxisLabelFontSize | Taille de police du texte de l'axe des y | 16 |
| yAxisPosition | Position de l'axe des y (gauche, droite) | left |
| pointTextPadding | Espace entre un point de données et le texte situé en dessous | 5 |
| pointLabelFontSize | Taille de police du texte des points de données | 12 |
| pointRadius | Rayon des points de données | 5 |
Variables de thème du diagramme
| Paramètre | Description |
|---|---|
| quadrant1Fill | Couleur de remplissage du quadrant supérieur droit |
| quadrant2Fill | Couleur de remplissage du quadrant supérieur gauche |
| quadrant3Fill | Couleur de remplissage du quadrant inférieur gauche |
| quadrant4Fill | Couleur de remplissage du quadrant inférieur droit |
| quadrant1TextFill | Couleur du texte du quadrant supérieur droit |
| quadrant2TextFill | Couleur du texte du quadrant supérieur gauche |
| quadrant3TextFill | Couleur du texte du quadrant inférieur gauche |
| quadrant4TextFill | Couleur du texte du quadrant inférieur droit |
| quadrantPointFill | Couleur de remplissage des points de données |
| quadrantPointTextFill | Couleur du texte des points de données |
| quadrantXAxisTextFill | Couleur du texte de l'axe des x |
| quadrantYAxisTextFill | Couleur du texte de l'axe des y |
| quadrantInternalBorderStrokeFill | Couleur de la bordure intérieure des quadrants |
| quadrantExternalBorderStrokeFill | Couleur de la bordure extérieure des quadrants |
| quadrantTitleFill | Couleur du titre |
Exemple de configuration et de thème
Copier
Intégrer
---
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
Style des points de données
Les points de données peuvent être stylisés directement ou à l'aide de classes partagées déjà définies
Style direct
Copier
Intégrer
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
Style de classe
Copier
Intégrer
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
Styles disponibles :
| Paramètre | Description |
|---|---|
| color | Couleur de remplissage des points de données |
| radius | Rayon des points de données |
| stroke-width | Largeur de la bordure des points de données |
| stroke-color | Couleur de la bordure des points de données (sans effet si stroke-width n'est pas spécifié) |
Ordre de priorité : 1. style direct 2. style de classe 3. style de thème
Exemple de style
Copier
Intégrer
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
