kaze風
DonutChart
SVGベースのドーナツチャート。凡例とセンターラベル付き。
プレビュー
9,000、デスクトップ 4820（54%）、モバイル 3200（36%）、タブレット 980（11%）
デスクトップ4820モバイル3200タブレット980
使いどころ
使う場面
- 全体に占める構成比を見せる（支払い方法の内訳、ステータス別の件数）。合計が 100% になることが前提
- 項目は 2〜5 個まで。centerLabel に合計や主役の数字を入れると、中央の余白が情報になる
- ラベルと値を凡例に出し（showLegend は既定で true）、色と項目の対応を文字で読めるようにする
使わない場面
- 項目が 6 個を超えるとき。色が識別できず、小さな弧は読めない。上位をまとめて「その他」にするか、BarChart を使う
- 項目どうしの大小を正確に比べること。弧の長さは棒より比べにくい。BarChart を使う
- 時間の推移や、合計にならない値。LineChart か ColumnChart を使う
- 1 本の帯で構成比と目標線を見せたいとき。CategoryBar を使う
使い方
<DonutChart
aria-label="デバイス別アクセス数"
data={[
{ label: "デスクトップ", value: 4820 },
{ label: "モバイル", value: 3200 },
]}
centerLabel="8,020"
/>プロパティ
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
data必須 | DonutChartSegment[] | なし | { label, value, color? } の配列 |
size | number | 120 | SVGのサイズ（px） |
strokeWidth | number | 16 | リングの太さ |
centerLabel | string | なし | 中央に表示するテキスト |
showLegend | boolean | true | 凡例を表示するか |
aria-label必須 | string | なし | グラフの名前（必須）。読み上げで何のグラフかを伝える |
型と必須かどうかはソースの型定義から自動で生成しています。表にない HTML 標準の属性（className や aria-* など）も、ルート要素にそのまま渡せます。
アクセシビリティ
- aria-label は必須。「支払い方法の内訳」のように書く。SVG は aria-hidden で、読み上げには centerLabel と「ラベル 値（%）」の一覧が入る
- 色だけに頼らない。凡例にラベルと値を出し、showLegend を false にするときは、近くの文章や表で同じ数字を伝える
- 凡例の値は元の値のまま（% ではない）。割合を見せたいときは、値を % で渡すか、centerLabel や周囲の文で補う
- キーボードでは操作できない。同じ内容を読み上げの要約で伝える
文言
- centerLabel は短く（「合計 1,240」「82%」）。長いと穴に収まらない