Introduction au diagramme radar
Le diagramme radar est une méthode simple pour représenter des données de faible dimension sous forme circulaire.
Le diagramme radar est aussi appelé diagramme en toile d'araignée, diagramme en étoile, diagramme en filet ou diagramme polaire.
Applications
Le diagramme radar est particulièrement utile aux développeurs, aux data scientists et aux ingénieurs qui doivent représenter des données de manière claire et concise sous forme circulaire.
Il sert généralement à résumer et à comparer graphiquement les performances de plusieurs entités sur plusieurs dimensions.
Syntaxe
Copier
Intégrer
radar-beta
axis A, B, C, D, E
curve c1{1,2,3,4,5}
curve c2{5,4,3,2,1}
... More Fields ...
Exemple
Copier
Intégrer
---
title: "Grades"
---
radar-beta
axis m["Math"], s["Chinese"], e["English"]
axis h["History"], g["Geography"], a["Art"]
curve a["Alice"]{85, 90, 80, 70, 75, 90}
curve b["Bob"]{70, 75, 85, 80, 90, 85}
max 100
min 0
Détails de la syntaxe
Titre
title : rendu en haut du diagramme radar.
Copier
Intégrer
radar-beta
title Title of the Radar Diagram
...
Axe
axis : la syntaxe axis sert à définir les axes du diagramme radar.
Chaque axe est représenté par un ID et une étiquette facultative.
Plusieurs axes peuvent être définis sur une seule ligne.
Copier
Intégrer
radar-beta
axis id1["Label1"]
axis id2["Label2"], id3["Label3"]
...
Courbe
curve : la syntaxe curve sert à définir les points de données des courbes du diagramme radar.
Chaque courbe est représentée par un ID, une étiquette facultative et une liste de valeurs.
Les valeurs peuvent être définies par une liste de nombres ou une liste de paires clé-valeur. Si des paires clé-valeur sont utilisées, la clé représente l'ID de l'axe et la valeur représente le point de données.
Plusieurs courbes peuvent être définies sur une seule ligne.
Copier
Intégrer
radar-beta
axis axis1, axis2, axis3
curve id1["Label1"]{1, 2, 3}
curve id2["Label2"]{4, 5, 6}, id3{7, 8, 9}
curve id4{ axis3: 30, axis1: 20, axis2: 10 }
...
Options
- showLegend : la syntaxe showLegend sert à afficher ou masquer la légende du diagramme radar ; elle est affichée par défaut.
- max : la valeur maximale du diagramme radar, utilisée pour mettre à l'échelle le diagramme radar. Si elle n'est pas fournie, la valeur maximale est calculée à partir des points de données.
- min : la valeur minimale du diagramme radar, utilisée pour mettre à l'échelle le diagramme radar. Si elle n'est pas fournie, la valeur minimale est 0.
- graticule : la syntaxe graticule sert à définir le type de lignes de grille à rendre dans le diagramme radar. Les lignes de grille peuvent être circle ou polygon. Si aucune n'est fournie, la valeur par défaut est circle.
- ticks : la syntaxe ticks sert à définir le nombre de graduations sur les lignes de grille. Il s'agit du nombre de cercles concentriques ou de polygones tracés, servant à indiquer l'échelle du diagramme radar. Si aucun n'est fourni, le nombre de graduations par défaut est 5.
Copier
Intégrer
radar-beta
...
showLegend true
max 100
min 0
graticule circle
ticks 5
...
Configuration
| Paramètre | Description | Valeur par défaut |
|---|---|---|
| width | Largeur du diagramme radar | 600 |
| height | Hauteur du diagramme radar | 600 |
| marginTop | Marge supérieure du diagramme radar | 50 |
| marginBottom | Marge inférieure du diagramme radar | 50 |
| marginLeft | Marge gauche du diagramme radar | 50 |
| marginRight | Marge droite du diagramme radar | 50 |
| axisScaleFactor | Facteur d'échelle des axes | 1 |
| axisLabelFactor | Facteur d'ajustement de la position des étiquettes des axes | 1.05 |
| curveTension | Tension des courbes arrondies | 0.17 |
Variables de thème
Variables de thème globales
Les valeurs par défaut de ces variables dépendent du thème utilisé. Pour remplacer les valeurs par défaut, définissez les valeurs souhaitées dans la section themeVariables de la configuration : config: themeVariables: cScale0: "#FF0000" cScale1: "#00FF00"
Le diagramme radar prend en charge l'échelle de couleurs cScale${i}, où i est un nombre allant de 0 au nombre maximal de couleurs de l'échelle de couleurs du thème. Généralement, le nombre maximal de couleurs est 12.
| Propriété | Description |
|---|---|
| fontSize | Taille de police du titre |
| titleColor | Couleur du titre |
| cScale$ | Échelle de couleurs de la i-ème courbe |
Options de style du radar
Les variables spécifiques au radar se trouvent dans la clé radar. Pour définir les options de style du radar, utilisez la syntaxe suivante. config: themeVariables: radar: axisColor: "#FF0000"
| Propriété | Description | Valeur par défaut |
|---|---|---|
| axisColor | Couleur de la ligne de l'axe | black |
| axisStrokeWidth | Largeur de la ligne de l'axe | 1 |
| axisLabelFontSize | Taille de police des étiquettes des axes | 12px |
| curveOpacity | Opacité de la courbe | 0.7 |
| curveStrokeWidth | Largeur de la courbe | 2 |
| graticuleColor | Couleur des lignes de grille | black |
| graticuleOpacity | Opacité des lignes de grille | 0.5 |
| graticuleStrokeWidth | Largeur des lignes de grille | 1 |
| legendBoxSize | Taille de la boîte de légende | 10 |
| legendFontSize | Taille de police de la légende | 14px |
Exemple de configuration et de thème
Copier
Intégrer
---
config:
radar:
axisScaleFactor: 0.25
curveTension: 0.1
theme: base
themeVariables:
cScale0: "#FF0000"
cScale1: "#00FF00"
cScale2: "#0000FF"
radar:
curveOpacity: 0
---
radar-beta
axis A, B, C, D, E
curve c1{1,2,3,4,5}
curve c2{5,4,3,2,1}
curve c3{3,3,3,3,3}
