Composant · Données

ParallelCoordinatesChart

Documenté

ParallelCoordinatesChart trace une polyligne par enregistrement sur des axes verticaux parallèles. Idéal pour détecter des corrélations ou des groupements dans des données multidimensionnelles.

Exemples

Comparaison de véhicules

Chaque ligne relie les valeurs d'un véhicule sur quatre axes. La prop `tones` permet d'assigner une couleur par ligne.

Comparaison de véhicules

Puissance (ch): 130, Poids (kg): 1200, Conso (L/100): 6.5, Prix (k€): 22
Puissance (ch): 190, Poids (kg): 1580, Conso (L/100): 8.2, Prix (k€): 38
Puissance (ch): 90, Poids (kg): 980, Conso (L/100): 4.8, Prix (k€): 15

Voir le code (Svelte)

<div class="chart-wrapper">
  <ParallelCoordinatesChart
    label="Comparaison de véhicules"
    axes={[{"key":"puissance","label":"Puissance (ch)"},{"key":"poids","label":"Poids (kg)"},{"key":"conso","label":"Conso (L/100)"},{"key":"prix","label":"Prix (k€)"}]}
    data={[{"puissance":130,"poids":1200,"conso":6.5,"prix":22},{"puissance":190,"poids":1580,"conso":8.2,"prix":38},{"puissance":90,"poids":980,"conso":4.8,"prix":15}]}
    tones={["category1","category3","category5"]}
  />
</div>

API du composant

Prop	Type	Par défaut
`axes`	`ParallelAxis[]`	requis
`data`	`Record<string, unknown>[]`	requis
`label`	`string`	requis
`tones`	`ParallelCoordinatesChartTone[]`	optionnel
`width`	`number`	`480`
`height`	`number`	`300`
`class`	`string`	optionnel

ParallelAxis = { key: string; label: string; min?: number; max?: number } · ParallelCoordinatesChartTone = "category1" | ... | "category8"

Accessibilité

`label` alimente le conteneur `role="img"`. Chaque enregistrement est listé avec ses valeurs d'axe dans une liste accessible hors SVG.

Notes d'usage

Utilisez `axes[].min` / `axes[].max` pour forcer les bornes d'un axe. Les valeurs non-finies créent un GAP de segment : la ligne est interrompue sans erreur.

Tokens

--st-semantic-data-category1 ... --st-semantic-data-category8
--st-semantic-border-subtle
--st-semantic-text-secondary
--st-semantic-surface-inverse
--st-semantic-text-inverse
--st-radius-sm