円グラフ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 登録済みバリエーションです。
showLegendbooleanfalse円グラフの下にチャート凡例を表示します。
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" },
];

export function RevenueMixPieVariants() {
    return (
        <div className="grid gap-6">
            <PieChart segments={segments} />
            <PieChart segments={segments} showLegend totalLabel="合計" />
            <PieChart segments={segments} variant="compact" showLegend />
        </div>
    );
}

設計の判断

  • 円は SVG ではなく、背景の conic-gradient で描いています。扇形は1枚の div に敷いた背景で、割合は segments の値から自動で出ます。パーセントを自分で計算して渡す必要はありません。負の値は 0 として扱い、合計が 0 でも円が壊れないようにしてあります。
  • 図に名前を持たせ、いま指している扇形を読ませます。円には role="img" と tabIndex が付いていて、aria-label は「区分名: 値（割合）」の形で、いま選ばれている扇形を読みます。ポインタでもキーボードでも同じ扇形が選ばれ、選択中の扇形は色を変えるのではなく、上に明るさを変える層を重ねて示します。
  • 凡例は既定で出しません。区切り線はまだ持っていません。showLegend を on にすると、区分の名前と割合、そして「Total:」に続けてその区分の実数が並びます。資料は割合を必ず文字で出すことを求めているので、凡例を切るなら図の周りに割合を書いてください。資料が挙げるもう1つの手当て「扇形どうしの境目に背景色の細い線を入れる」は、GUNJO の PieChart にはまだありません。色が近い区分が隣り合うときは、color で明度の離れた色を指定します。数値の整形は formatValue のほかに、サーバーコンポーネントからも渡せる valueFormat を持っています（#338）。
    UIXHERO: 円グラフ（Pie Chart）

使用コンポーネント

円グラフチャート凡例ツールチップ

関連コンポーネント

ドーナツチャート分布バー