Composant · Données

ContourChart

Stable

Contour topographique (façon Highcharts « contour »). Chaque cellule d'une grille 2D régulière est peinte d'une bande de couleur selon sa value normalisée, découpée en levels paliers sur l'échelle data category1…8, avec des isolignes dessinées sur les ruptures de niveau. Axes X/Y gradués par graduations « jolies » automatiques, légende des paliers et liste accessible des points hors SVG.

Exemples

Grille 12×8 : un relief radial dont la valeur décroît avec la distance au centre — les paliers les plus hauts passent au ton data le plus chaud et les isolignes suivent les ruptures de bande.

Relief

x 0, y 0 · 22
x 1, y 0 · 32
x 2, y 0 · 41
x 3, y 0 · 48
x 4, y 0 · 54
x 5, y 0 · 58
x 6, y 0 · 58
x 7, y 0 · 54
x 8, y 0 · 48
x 9, y 0 · 41
x 10, y 0 · 32
x 11, y 0 · 22
x 0, y 1 · 28
x 1, y 1 · 38
x 2, y 1 · 48
x 3, y 1 · 58
x 4, y 1 · 65
x 5, y 1 · 69
x 6, y 1 · 69
x 7, y 1 · 65
x 8, y 1 · 58
x 9, y 1 · 48
x 10, y 1 · 38
x 11, y 1 · 28
x 0, y 2 · 32
x 1, y 2 · 43
x 2, y 2 · 54
x 3, y 2 · 65
x 4, y 2 · 75
x 5, y 2 · 81
x 6, y 2 · 81
x 7, y 2 · 75
x 8, y 2 · 65
x 9, y 2 · 54
x 10, y 2 · 43
x 11, y 2 · 32
x 0, y 3 · 34
x 1, y 3 · 46
x 2, y 3 · 58
x 3, y 3 · 69
x 4, y 3 · 81
x 5, y 3 · 92
x 6, y 3 · 92
x 7, y 3 · 81
x 8, y 3 · 69
x 9, y 3 · 58
x 10, y 3 · 46
x 11, y 3 · 34
x 0, y 4 · 34
x 1, y 4 · 46
x 2, y 4 · 58
x 3, y 4 · 69
x 4, y 4 · 81
x 5, y 4 · 92
x 6, y 4 · 92
x 7, y 4 · 81
x 8, y 4 · 69
x 9, y 4 · 58
x 10, y 4 · 46
x 11, y 4 · 34
x 0, y 5 · 32
x 1, y 5 · 43
x 2, y 5 · 54
x 3, y 5 · 65
x 4, y 5 · 75
x 5, y 5 · 81
x 6, y 5 · 81
x 7, y 5 · 75
x 8, y 5 · 65
x 9, y 5 · 54
x 10, y 5 · 43
x 11, y 5 · 32
x 0, y 6 · 28
x 1, y 6 · 38
x 2, y 6 · 48
x 3, y 6 · 58
x 4, y 6 · 65
x 5, y 6 · 69
x 6, y 6 · 69
x 7, y 6 · 65
x 8, y 6 · 58
x 9, y 6 · 48
x 10, y 6 · 38
x 11, y 6 · 28
x 0, y 7 · 22
x 1, y 7 · 32
x 2, y 7 · 41
x 3, y 7 · 48
x 4, y 7 · 54
x 5, y 7 · 58
x 6, y 7 · 58
x 7, y 7 · 54
x 8, y 7 · 48
x 9, y 7 · 41
x 10, y 7 · 32
x 11, y 7 · 22

Voir le code (Svelte)

<div class="docs-contour-box">
  <ContourChart
    label="Relief"
    levels={6}
    width={640}
    height={320}
    data={[{"x":0,"y":0,"value":22},{"x":1,"y":0,"value":32},{"x":2,"y":0,"value":41},{"x":3,"y":0,"value":48},{"x":4,"y":0,"value":54},{"x":5,"y":0,"value":58},{"x":6,"y":0,"value":58},{"x":7,"y":0,"value":54},{"x":8,"y":0,"value":48},{"x":9,"y":0,"value":41},{"x":10,"y":0,"value":32},{"x":11,"y":0,"value":22},{"x":0,"y":1,"value":28},{"x":1,"y":1,"value":38},{"x":2,"y":1,"value":48},{"x":3,"y":1,"value":58},{"x":4,"y":1,"value":65},{"x":5,"y":1,"value":69},{"x":6,"y":1,"value":69},{"x":7,"y":1,"value":65},{"x":8,"y":1,"value":58},{"x":9,"y":1,"value":48},{"x":10,"y":1,"value":38},{"x":11,"y":1,"value":28},{"x":0,"y":2,"value":32},{"x":1,"y":2,"value":43},{"x":2,"y":2,"value":54},{"x":3,"y":2,"value":65},{"x":4,"y":2,"value":75},{"x":5,"y":2,"value":81},{"x":6,"y":2,"value":81},{"x":7,"y":2,"value":75},{"x":8,"y":2,"value":65},{"x":9,"y":2,"value":54},{"x":10,"y":2,"value":43},{"x":11,"y":2,"value":32},{"x":0,"y":3,"value":34},{"x":1,"y":3,"value":46},{"x":2,"y":3,"value":58},{"x":3,"y":3,"value":69},{"x":4,"y":3,"value":81},{"x":5,"y":3,"value":92},{"x":6,"y":3,"value":92},{"x":7,"y":3,"value":81},{"x":8,"y":3,"value":69},{"x":9,"y":3,"value":58},{"x":10,"y":3,"value":46},{"x":11,"y":3,"value":34},{"x":0,"y":4,"value":34},{"x":1,"y":4,"value":46},{"x":2,"y":4,"value":58},{"x":3,"y":4,"value":69},{"x":4,"y":4,"value":81},{"x":5,"y":4,"value":92},{"x":6,"y":4,"value":92},{"x":7,"y":4,"value":81},{"x":8,"y":4,"value":69},{"x":9,"y":4,"value":58},{"x":10,"y":4,"value":46},{"x":11,"y":4,"value":34},{"x":0,"y":5,"value":32},{"x":1,"y":5,"value":43},{"x":2,"y":5,"value":54},{"x":3,"y":5,"value":65},{"x":4,"y":5,"value":75},{"x":5,"y":5,"value":81},{"x":6,"y":5,"value":81},{"x":7,"y":5,"value":75},{"x":8,"y":5,"value":65},{"x":9,"y":5,"value":54},{"x":10,"y":5,"value":43},{"x":11,"y":5,"value":32},{"x":0,"y":6,"value":28},{"x":1,"y":6,"value":38},{"x":2,"y":6,"value":48},{"x":3,"y":6,"value":58},{"x":4,"y":6,"value":65},{"x":5,"y":6,"value":69},{"x":6,"y":6,"value":69},{"x":7,"y":6,"value":65},{"x":8,"y":6,"value":58},{"x":9,"y":6,"value":48},{"x":10,"y":6,"value":38},{"x":11,"y":6,"value":28},{"x":0,"y":7,"value":22},{"x":1,"y":7,"value":32},{"x":2,"y":7,"value":41},{"x":3,"y":7,"value":48},{"x":4,"y":7,"value":54},{"x":5,"y":7,"value":58},{"x":6,"y":7,"value":58},{"x":7,"y":7,"value":54},{"x":8,"y":7,"value":48},{"x":9,"y":7,"value":41},{"x":10,"y":7,"value":32},{"x":11,"y":7,"value":22}]}
  />
</div>

API du composant

Prop	Type	Défaut	Description
`data`	`ContourChartDatum[]`	`[]`	Points de grille : { x, y, value }.
`levels`	`number`	`6`	Nombre de paliers de couleur (plafonné à 8).
`label`	`string`	–	Libellé accessible du graphe.
`width`	`number`	`640`	Largeur du viewBox SVG.
`height`	`number`	`320`	Hauteur du viewBox SVG.
`size`	`number`	–	Réservé pour la parité d’API ; non utilisé dans ce rendu.
`class`	`string`	–	Classe CSS supplémentaire sur la racine.

ContourChartDatum = { x: number; y: number; value: number } : grille régulière supposée ; les points non finis 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 bandes par palier de valeur.
`--st-semantic-border-strong`	Couleur des isolignes aux ruptures de niveau.
`--st-semantic-surface-default`	Séparation discrète entre cellules adjacentes.
`--st-semantic-text-secondary`	Graduations des axes et légende.
`--st-semantic-surface-inverse`	Fond de l'infobulle au survol.