Pie Chart

fandhe-frontend-pre-styled-ui の pie_chart mod が提供するスタイル済み Pie Chart 部品です。

イシュー #2084 で shadcn/ui Charts（pie、11 バリアント）と突合し、セパレータ有無・値/カテゴリラベルの内側/外側配置・凡例（カテゴリ単位）・複数系列の多重リング表示（stacked）の静的バリアントを PieChartProps の純追加で補完しました。マウス追従ツールチップ・hover 強調・期間切替・凡例トグルのような実行時インタラクションは対象外（#2128/#2132）です。

Demo

外部依存ゼロの SVG ノード木生成による円グラフ（イシュー #850。イシュー #2084 で shadcn/ui Charts（pie、11 バリアント）と突合し、separator/label_content/label_position/stacked を補完した。実行時インタラクション〔ツールチップ・期間切替〕は対象外、#2128/#2132）。size（Xs〜Xl）で --fandhe-pie-chart-size を切り替えます。show_labels を有効にするとラベルを描画し、label_content/label_position で内容・配置を切り替えます。separator: None でセグメント間の区切り線を消し、stacked で複数系列を多重リングとして描画します。

Size

Features

外部依存ゼロの SVG ノード木生成による円グラフ
size（Xs〜Xl）で --fandhe-pie-chart-size を切り替える
show_labels を有効にするとラベルをセグメント上に描画する（label_content で値/カテゴリ名、label_position で内側/外側+引き出し線を切り替える）
ラベルは背景色ハロー + 扇形中心配置で系列色・ダーク時も可読
イシュー #2084 で shadcn/ui Charts（pie、11 バリアント）と突合し、separator（セパレータ線の有無）・stacked（複数系列の多重リング表示）を補完した。マウス追従ツールチップは対象外（#2128）。期間切替（data-range）・凡例トグルの SSR 構造（range/hidden_categories/hidden_series）は #2133 で追加済み、実データ連動は #2134

Anatomy

root
  chart
    segment
    label
    label-line
    outside-label

API Reference

Arguments

Name	Type	Default	Description
`size`	`Size`	`Md`	寸法 variant。
`aria_label`	`Option<&str>`	`None`	None なら既定の "pie chart" を使う。
`show_labels`	`bool`	`false`	true ならラベルをセグメント上に描画する。
`separator`	`PieSeparator`	`Line`	セグメント間セパレータ。None でセパレータ線を消す（イシュー #2084）。
`label_content`	`PieLabelContent`	`Category`	show_labels 有効時のラベル内容。Value は数値（イシュー #2084）。
`label_position`	`PieLabelPosition`	`Inside`	show_labels 有効時のラベル配置。Outside は引き出し線付きで扇形外側へ配置する（イシュー #2084）。
`stacked`	`bool`	`false`	true なら複数系列を多重リング（0 が最内周）として描画する（イシュー #2084）。false は従来どおり単一系列専用。

Data Attributes

Part	Attribute	Observed Values
`label`	`data-index`	`0`, `1`, `2`, `3`
`label-line`	`data-index`	`0`, `1`, `2`, `3`
`outside-label`	`data-align`	`end`, `start`
`outside-label`	`data-index`	`0`, `1`, `2`, `3`
`segment`	`data-index`	`0`, `1`, `2`, `3`
`segment`	`data-series`	`2023`, `2024`

CSS Variables

Variable	Default
`--fandhe-pie-chart-size`	—

Examples

size とラベル表示

size 5 段・ラベル表示（内側/外側）・separator: None の掲示です。