メニュー

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

共通部品の Radar に category × time × value のデータを渡して、期間（または比較グループ）ごとのレーダーチャートを描画します。targetPeriod で対象グループを絞り込めます。

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

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

変数名
値

データ (JSON)

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

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

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

変数名

変数名 / CSS変数内容必須解説
data配列データ●[{"category":"","time":"","value":}] を基本とし、xKey/categoryLabel/yKey でキー名を変更可能
targetPeriod対象グループ例: 過去3年 / 最新 など（getSelectedPeriod を利用）
axisConfig軸・単位設定●xKey=項目キー、categoryLabel=比較グ ループキー、yKey=値、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】軸線・ツールチップ枠線色（参考）