レーダーチャート ブロック｜使い方マニュアル
このブロックでできること
複数の評価項目を多角形のレーダーチャートで見せられるブロックです。
「価格・性能・サポート…」といった評価軸を自由に設定し、複数の商品・サービスを重ねて比較できます。
画像を用意しなくても、サイドバーで数値を入力するだけでチャートが描かれ、フロントではデータ点にマウスを乗せると数値がツールチップで表示されます。
主な特徴
| 特徴 | 内容 |
|---|---|
| 複数を重ねて比較 | 最大5つの商品・サービスを1つのチャートに重ねられる |
| 評価軸は3〜12個 | 価格・性能・サポートなど、軸を自由に設定 |
| 0.1単位の細かい値 | 各軸の値を0〜最大値まで0.1刻みで設定 |
| ホバーでツールチップ | フロントでデータ点に乗せると、系列名・軸名・値を表示 |
| スケール表示 | チャート下に「最大値：◯◯」を表示（オン／オフ可） |
| 色を自由に | 系列ごとの線・数値色、グリッド・軸ラベルの色を指定 |
| 凡例で表示切替 | 2系列以上なら、フロントの凡例チェックで表示／非表示を切替 |
基本的な使い方
- ブロック追加（＋）から 「KIJI KaiZEN レーダーチャート」 を挿入します。
- 「評価軸（項目名）」で、比較する観点（価格・性能など）を設定します（3〜12個）。
- 「比較系列（商品・サービス）」で商品を追加し、各軸の値をスライダーで入力します。
- 「チャート」でタイトル・最大値・サイズ・表示設定を、「色（共通）」で配色を整えて完成です。
設定項目の説明（右サイドバー）
チャート
| 項目 | 説明 |
|---|---|
| タイトル | チャート上部に表示する見出し（空欄なら非表示） |
| 満点（最大値） | 各軸の上限値を数値で入力（1〜1000）。例:100点満点なら100 |
| サイズ（px） | 200／300／400／500 のボタンから選択 |
| 数値を表示 | 各頂点に数値を表示する／しない |
| 最大値（スケール）を表示 | チャート下の「最大値：◯◯」表示をオン／オフ |
評価軸（項目名）
チャートの各頂点になる「比較の観点」です。3〜12個まで設定できます。
| 項目 | 説明 |
|---|---|
| 項目名 | 各評価軸の名前（例:価格、性能、サポート、使いやすさ）。一度空にしても軸は消えず、打ち直せます |
| 軸を追加／削除 | 評価軸の増減（3個未満にはできません、最大12個） |
比較系列（商品・サービス）
チャートに重ねる商品・サービスです。最大5つまで追加でき、各軸の値はスライダーで入力します。
| 項目 | 説明 |
|---|---|
| 名前 | 比較対象の名前（例:製品A、製品B）。ツールチップにも表示されます |
| 線・数値の色 | その系列の色。塗り（面）は自動で薄い色になります |
| 各項目の値 | 軸ごとに0〜最大値で、0.1単位のスライダーで入力 |
| 比較対象を追加／削除 | 系列の増減（最大5つ、最低1つ） |
色（共通）
| 項目 | 説明 |
|---|---|
| グリッド | 背景の目盛り線（くもの巣状の線）の色 |
| 軸ラベル | 各軸の項目名テキストの色 |
フロントでの動き
- ツールチップ：データ点（頂点の丸）にマウスを乗せると、系列名・軸名・値が表示されます。
- スケール表示：チャートの下に「最大値：◯◯」が出るので、中心が0・外周が最大値だと一目で分かります。
- 凡例で表示切替：2系列以上のとき、凡例のチェックボックスで各系列の表示／非表示を切り替えられます。
下に実際のレーダーチャートを置いておきますので、挙動を確かめてみてください。
活用のヒント
- 軸は5〜6個が見やすくバランス良好。多すぎると各項目が小さく見えづらくなります。
- 推したい商品の色を濃く・目立つ色に、比較対象を控えめな色にすると主役が引き立ちます。
- 軸の言葉はすべて「高いほど良い」向きにそろえる（例:「安さ」「軽さ」）と、外側に広いほど高評価と直感的に伝わります。
- 比較テーブルブロックと併用すると、数値の詳細は表で、全体の傾向はチャートで、と役割分担できます。
