メニュー

PieChart コンポーネント デモ（JSON入力対応）

共通部品の PieChart に time × category × value のデータを渡して円グラフを表示します。targetPeriod で対象期間を絞り込み、同一カテゴリを合算して表示します。

プロパティ・コントローラー

カスタムスタイル (CSS変数)

変数名
値

データ (JSON)

呼び出しコード (Next.js)

<style>
  .chartContainer { width: 100%; height: 400px; }
  @media (max-width: 768px) {
    .chartContainer { width: 100%; height: 400px; }
  }
</style>

<div className="chartContainer">
  <PieChart
    data={/* time, category, value の配列を JSON.parse(...) したもの */}
    nameKey="category"
    valueKey="value"
    targetPeriod="過去5年"
    axisConfig={{"xKey":"time","yKey":"value","categoryLabel":"category","xLabel":"","yLabel":"","unit":"人"}}
    colors={['#4a90e2', '#82ca9d', '#ffc658']}
  />
</div>

変数名

変数名 / CSS変数内容必須解説
data配列データ●[{"time":"","category":"","value":}] を基本とし、xKey で期間、nameKey/valueKey で集計
nameKey / valueKeyカテゴリ列 / 値列のキー●本デモでは category / value
targetPeriod対象期間例: 過去5年 / 直近3期 など（該当期間の同一カテゴリを合算）
axisConfig設定●xKey（期間キー） / unit（単位）などを指定
styleサイズ / 色など (CSS変数)●(サイズは親要素で指定)CSS変数名【デフォルト値】説明
■色（系列）
--chart-color1【#8884d8】系列1の色
--chart-color2【#82ca9d】系列2の色
--chart-color3【#ffc658】系列3の色
…（以降任意）
■文字／軸
--chart-text-color【#333】ラベル等の文字色
--chart-tick-color【#666】（参考）軸目盛りの文字色
--chart-axis-line-color【#999】（参考）軸線・ツールチップ枠線色
■ラベル表示
--chart-bar-label-display【block】スライスの値ラベル表示（none で非表示）