Composant · Données

SunburstChart

Documenté

SunburstChart visualise une hiérarchie sous forme d'anneaux radiaux. Il montre les contributions imbriquées tout en gardant la racine et les feuilles dans le même graphique.

Exemples

Hiérarchie de revenus

Arbre à deux niveaux avec une branche détaillée et une feuille accentuée.

Hiérarchie de revenus

Revenus, Produit, Core: 40
Revenus, Produit, Addons: 20
Revenus, Services: 30

Voir le code (Svelte)

<div class="chart-wrapper chart-wrapper--radial">
  <SunburstChart
    label="Hiérarchie de revenus"
    data={{"label":"Revenus","children":[{"label":"Produit","children":[{"label":"Core","value":40},{"label":"Addons","value":20}]},{"label":"Services","value":30,"tone":"category8"}]}}
    legend
  />
</div>

Portefeuille produit

Plusieurs familles peuvent être comparées sans changer de vue.

Portefeuille produit

Portefeuille, Applications, Docs: 26
Portefeuille, Applications, Console: 34
Portefeuille, Plateforme, API: 42
Portefeuille, Plateforme, Data: 28

Voir le code (Svelte)

<div class="chart-wrapper chart-wrapper--radial">
  <SunburstChart
    label="Portefeuille produit"
    data={{"label":"Portefeuille","children":[{"label":"Applications","children":[{"label":"Docs","value":26,"tone":"category3"},{"label":"Console","value":34}]},{"label":"Plateforme","children":[{"label":"API","value":42,"tone":"category5"},{"label":"Data","value":28}]}]}}
  />
</div>

API du composant

Prop	Type	Par défaut
`data`	`SunburstChartDatum`	requis
`label`	`string`	requis
`legend`	`boolean`	`false`
`width`	`number`	`320`
`height`	`number`	`320`
`class`	`string`	optionnel

SunburstChartDatum = { label: string; value?: number; tone?: SunburstChartTone; children?: SunburstChartDatum[] } · SunburstChartTone = "category1" | ... | "category8".

Accessibilité

`label` nomme le graphique. Les feuilles sont exposées dans une liste accessible avec leur chemin complet dans l'arbre.

Notes d'usage

Limitez la profondeur pour préserver les libellés. Pour explorer plus de niveaux, combinez le graphique avec une table hiérarchique.

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