Composant · Données

VectorFieldChart

Stable

Champ de vecteurs (façon Highcharts « vector »). Une flèche par point : la length (magnitude) pilote la longueur normalisée et la couleur (échelle data category1…8), la direction (en degrés, 0° = +X, sens trigonométrique) donne l'orientation. Axes X/Y gradués par graduations « jolies » automatiques, et liste accessible des points hors SVG.

Exemples

Grille 5×4 : la direction tourne avec x, la magnitude croît avec x+y — les flèches les plus longues passent au ton data le plus chaud.

Champ de vent

x 0, y 0 · |v| 1 @ 0°
x 1, y 0 · |v| 1.6 @ 45°
x 2, y 0 · |v| 2.2 @ 90°
x 3, y 0 · |v| 2.8 @ 135°
x 4, y 0 · |v| 3.4 @ 180°
x 0, y 1 · |v| 1.6 @ 20°
x 1, y 1 · |v| 2.2 @ 65°
x 2, y 1 · |v| 2.8 @ 110°
x 3, y 1 · |v| 3.4 @ 155°
x 4, y 1 · |v| 4 @ 200°
x 0, y 2 · |v| 2.2 @ 40°
x 1, y 2 · |v| 2.8 @ 85°
x 2, y 2 · |v| 3.4 @ 130°
x 3, y 2 · |v| 4 @ 175°
x 4, y 2 · |v| 4.6 @ 220°
x 0, y 3 · |v| 2.8 @ 60°
x 1, y 3 · |v| 3.4 @ 105°
x 2, y 3 · |v| 4 @ 150°
x 3, y 3 · |v| 4.6 @ 195°
x 4, y 3 · |v| 5.2 @ 240°

Voir le code (Svelte)

<div class="docs-vector-box">
  <VectorFieldChart
    label="Champ de vent"
    width={640}
    height={320}
    data={[{"x":0,"y":0,"length":1,"direction":0},{"x":1,"y":0,"length":1.6,"direction":45},{"x":2,"y":0,"length":2.2,"direction":90},{"x":3,"y":0,"length":2.8,"direction":135},{"x":4,"y":0,"length":3.4,"direction":180},{"x":0,"y":1,"length":1.6,"direction":20},{"x":1,"y":1,"length":2.2,"direction":65},{"x":2,"y":1,"length":2.8,"direction":110},{"x":3,"y":1,"length":3.4,"direction":155},{"x":4,"y":1,"length":4,"direction":200},{"x":0,"y":2,"length":2.2,"direction":40},{"x":1,"y":2,"length":2.8,"direction":85},{"x":2,"y":2,"length":3.4,"direction":130},{"x":3,"y":2,"length":4,"direction":175},{"x":4,"y":2,"length":4.6,"direction":220},{"x":0,"y":3,"length":2.8,"direction":60},{"x":1,"y":3,"length":3.4,"direction":105},{"x":2,"y":3,"length":4,"direction":150},{"x":3,"y":3,"length":4.6,"direction":195},{"x":4,"y":3,"length":5.2,"direction":240}]}
  />
</div>

API du composant

Prop	Type	Défaut	Description
`data`	`VectorFieldChartDatum[]`	`[]`	Points : { x, y, length, direction }.
`label`	`string`	–	Libellé accessible du graphe.
`width`	`number`	`640`	Largeur du viewBox SVG.
`height`	`number`	`320`	Hauteur du viewBox SVG.
`size`	`number`	`26`	Longueur (px) de la plus grande flèche.
`class`	`string`	–	Classe CSS supplémentaire sur la racine.

VectorFieldChartDatum = { x: number; y: number; length: number; direction: number } : direction en degrés (0° = +X, sens trigonométrique) ; les points non finis ou à magnitude négative sont écartés.

Tokens CSS

Variable CSS	Description
`--st-semantic-border-subtle`	Couleur des axes et de la grille.
`--st-semantic-data-category1…8`	Couleur des flèches par bin de magnitude.
`--st-semantic-text-secondary`	Graduations des axes.
`--st-semantic-surface-inverse`	Fond de l'infobulle au survol.