République
française
dsfr-data
Documentation — Web Components DSFR pour la dataviz
Le composant <radar-chart> permet de comparer plusieurs variables simultanement.
| Attribut | Type | Défaut | Description |
|---|---|---|---|
x | String (JSON) | — | Requis. Axes du radar, tableau imbriqué : '[["RGAA", "DSFR", ...]]' (un sous-tableau par série) |
y | String (JSON) | — | Requis. Valeurs, tableau imbriqué : "[[85, 90, ...]]" |
scale-min / scale-max | Number | — | Bornes suggérées de l'échelle radiale |
name | String (JSON) | "" | Noms des séries : '["Série 1", "Série 2"]' |
selected-palette | String | "" | Palette DSFR Chart : default, categorical, sequentialAscending, sequentialDescending, divergentAscending, divergentDescending, neutral |
unit-tooltip | String | "" | Unité affichée dans les tooltips |
date | String | "" | Date de la donnée (mention sous le graphique) |
aspect-ratio | Number | 2 | Ratio largeur/hauteur du canvas |
Les attributs databox-id, databox-type et databox-source servent à l'intégration DataBox — via dsfr-data-chart type="radar" databox, ils sont posés automatiquement.
<radar-chart x='[["RGAA", "DSFR", "Performance", "Securite", "Accessibilité"]]' y="[[85, 90, 75, 95, 88]]" selected-palette="default"> </radar-chart>
<radar-chart x='[["RGAA", "DSFR", "Perf", "Secu", "A11y"], ["RGAA", "DSFR", "Perf", "Secu", "A11y"]]' y="[[85, 90, 75, 95, 88], [70, 80, 90, 75, 82]]" selected-palette="categorical"> </radar-chart>