円グラフPieChartExperimental
セグメントの構成比を比較する円グラフです。
プレビュー
状態とバリエーション
標準表示
構成比を標準サイズで表示します。
凡例付き
ラベルと値を円グラフ下で確認します。
基盤46%
成長28%
継続18%
拡張8%
コンパクト
狭い領域向けの SSOT 登録済みサイズです。
基盤46%
成長28%
継続18%
拡張8%
セグメント多め
区分が多い時の見え方を確認します。
検索34%
SNS22%
メール16%
広告12%
その他16%
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| segments | { label?: ReactNode; value: number; color?: ChartColor }[] | - | 円全体の比率として表示するセグメントです。 |
| variant | "default" | "compact" | "default" | チャートサイズを切り替える SSOT 登録済みバリエーションです。 |
| showLegend | boolean | false | 円グラフの下にチャート凡例を表示します。 |
| formatValue | (value: number) => ReactNode | - | 各値を整形します。関数propのため Client Component からのみ渡すこと（Server Component から渡すと next build が落ちる）。RSC 安全な整形には valueFormat を使う。 |
| valueFormat | "number" | "compact" | "integer" | Intl.NumberFormatOptions | - | シリアライズ可能な数値フォーマット＝formatValue の RSC 安全な代替。formatValue 指定時は無視。en-US ロケール固定。(#338) |
使い方
import { PieChart } from "@gunjo/ui";
const segments = [
{ label: "基盤", value: 46, color: "primary" },
{ label: "成長", value: 28, color: "success" },
{ label: "継続", value: 18, color: "warning" },
{ label: "拡張", value: 8, color: "info" },
];
<PieChart segments={segments} />
<PieChart segments={segments} showLegend totalLabel="合計" />
<PieChart segments={segments} variant="compact" showLegend />