Radial Chart

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

Demo

外部依存ゼロの SVG ノード木生成による同心リング型グラフです（イシュー #2079/#2080、shadcn/ui Charts Radial 相当）。角度は度数法・12 時方向 0°・時計回り正の規約（既定 0〜360°）で、inner_ratio（既定 0.3）で内径を調整できます。左から simple / label（show_labels）/ grid（show_grid）/ text（center_text）/ shape（corner_radius）/ stacked（複数系列 + 半円 start/end）の 6 バリアントです。

Variant

Features

ChartData（カテゴリ = リング、系列 = リング内セグメント）+ SVG ノード木生成ヘルパーのみで組み立てる外部依存ゼロの同心リング型グラフ
角度は度数法・12 時方向 0°・時計回り正の規約（start_angle_deg/end_angle_deg、既定 0〜360°）
track・labels・grid・center_text・corner_radius・stacked（複数系列の半円配置）の 6 バリアントに対応する
全周退化時は annulus_full_ring_path + fill-rule="evenodd" へ切り替える（pie/donut と同じ規約）
弧に沿ったラベル回転は意図的に非対応（UI 部品の責務境界、装飾的なレイアウト計測は上層の責務としない）

Anatomy

root
  chart
    track
    bar
    label
    grid-circle
    grid-spoke
    center-value
    center-label

API Reference

Arguments

Name	Type	Default	Description
`size`	`Size`	`Md`	寸法 variant（Xs〜Xl）。
`aria_label`	`Option<&str>`	`None`	chart（svg）へ付与する aria-label。None なら "radial chart"。
`start_angle_deg`	`f64`	`0.0`	開始角（度数法・12 時方向 0°・時計回り正）。
`end_angle_deg`	`f64`	`360.0`	終了角（度数法）。
`inner_ratio`	`f64`	`0.3`	外径に対する内径の比率（0.0 < ratio < 1.0）。
`corner_radius`	`f64`	`0.0`	セグメント弧端の角丸半径（viewBox 単位、0.0 以上）。
`show_track`	`bool`	`true`	各リングの全スイープ背景トラックを描画する。
`show_labels`	`bool`	`false`	リング開始角の点にカテゴリ名ラベルを描画する。
`show_grid`	`bool`	`false`	極座標グリッド（同心円 + 放射スポーク）を描画する。
`center_text`	`Option<RadialCenterText>`	`None`	中央に描画する値・補足ラベル。

Data Attributes

Part	Attribute	Observed Values
`bar`	`data-index`	`0`, `1`, `2`, `3`
`bar`	`data-series`	`desktop`, `mobile`, `visitors`
`label`	`data-index`	`0`, `1`, `2`, `3`
`track`	`data-index`	`0`, `1`, `2`, `3`

CSS Variables

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

Examples

半円の stacked（複数系列）

desktop/mobile の 2 系列を単一カテゴリの半円リングへ積み上げます。

Accessibility

WAI-ARIA

Attribute	Description
role="img" / aria-label	chart（svg）へ付与する。aria_label 未指定時は既定文言 "radial chart"。