Donut Chart
fandhe-frontend-pre-styled-ui の donut_chart mod が提供するスタイル済み Donut Chart 部品です。
Demo
外部依存ゼロの SVG ノード木生成によるドーナツグラフ（イシュー #850）。inner_ratio（既定 0.6）で内径を調整できます。show_labels を有効にするとカテゴリ名ラベルをセグメント上に描画します。
Features
- 外部依存ゼロの SVG ノード木生成によるドーナツグラフ
- inner_ratio（既定 0.6）で内径を調整できる
- show_labels を有効にするとカテゴリ名ラベルをセグメント上に描画する
Anatomy
root
chart
segment
labelAPI Reference
Arguments
| Name | Type | Default | Description |
|---|---|---|---|
| size | Size | Md | 寸法 variant。 |
| inner_ratio | f64 | 0.6 | 外径に対する内径の比率。0.0 < ratio < 1.0 の範囲・有限値であること。 |
| show_labels | bool | false | true ならカテゴリ名ラベルをセグメント上に描画する。 |
CSS Variables
| Variable | Default |
|---|---|
| --fandhe-donut-chart-size |
Examples
size と内径調整
size 3 段と、内径を細くした薄いリング（inner_ratio=0.85）の掲示です。