複数の定性的または定量的な指標を同時に評価する際、複雑なパフォーマンスプロファイルを評価するには、レーダーチャート（またはスパイラルウェブチャート）は理想的な可視化ツールです。複数の特徴尺度を中央点から放射状に配置することで、レーダーチャートは多次元の比較を明確な多角形の形状として表示しますこれにより、スキル評価、ベンダー評価スコアカード、製品機能のベンチマーク、またはプレイヤーのパフォーマンスプロファイルに適しています。
レーダーチャートの仕組み
Apache EChartsでは、レーダーチャートは専用のradar構成ブロックに依存しており、放射軸を定義します。これらはindicatorキーと呼ばれます。シリーズオブジェクトはtype: 'radar'を設定し、各宣言されたインジケータスケールに対応する数値配列をマッピングします。
1. 必須のセットアップ
基本的なレーダーチャートを構築するには、次のように次元の閾値をradar.indicator内に定義し、シリーズデータ内で数値配列を渡します：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'item'
},
legend: {
data: ['割当予算', '実際の支出']
},
radar: {
indicator: [
{ name: '売上', max: 6500 },
{ name: '経営管理', max: 16000 },
{ name: '情報技術', max: 30000 },
{ name: 'カスタマーサポート', max: 38000 },
{ name: '開発', max: 52000 },
{ name: 'マーケティング', max: 25000 }
]
},
series: [
{
name: '予算対支出',
type: 'radar',
data: [
{
value: [4200, 3000, 20000, 35000, 50000, 18000],
name: '割当予算'
},
{
value: [5000, 14000, 28000, 26000, 42000, 21000],
name: '実際の支出'
}
]
}
]
};
高度な構造技術
レーダーチャートは、塗りつぶされた領域の多角形、円形グリッド形状、または明確な色のテーマを使用してスタイル化でき、プロファイルの重なりを読みやすくします。
1. カスタムグリッド形状による多角形領域の塗りつぶし
背景のウェブグリッドを多角形から円に切り替え、透明な領域塗りつぶしを適用することで、各指標プロファイルの全体的な範囲が強調されます：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
data: ['モデルA', 'モデルB']
},
radar: {
shape: 'circle', // 円形の背景グリッド
indicator: [
{ name: 'バッテリー寿命', max: 100 },
{ name: '処理能力', max: 100 },
{ name: '構造品質', max: 100 },
{ name: 'ディスプレイ品質', max: 100 },
{ name: 'カメラ', max: 100 },
{ name: '価値', max: 100 }
]
},
series: [
{
type: 'radar',
data: [
{
value: [80, 90, 70, 85, 95, 60],
name: 'モデルA',
areaStyle: {
color: 'rgba(84, 112, 198, 0.4)'
}
},
{
value: [95, 70, 85, 90, 75, 90],
name: 'モデルB',
areaStyle: {
color: 'rgba(145, 204, 117, 0.4)'
}
}
]
}
]
};
レイアウトとスタイルの微調整
指標のテキストカラー、分割線、シンボルサイズを調整することで、複数軸のウェブラインがデータを圧倒するのを防ぎます。
1. カスタムウェブグリッドおよびラベルフォーマット
ダークまたはライトインターフェース上で、明確な視覚的コントラストを保つために、軸線、分割領域、外側のラベルのスタイルを設定します：
ECharts
Edit ECharts in VPasCode
option = {
radar: {
indicator: [
{ name: '使いやすさ', max: 10 },
{ name: 'パフォーマンス', max: 10 },
{ name: 'セキュリティ', max: 10 },
{ name: 'スケーラビリティ', max: 10 },
{ name: 'コスト効率', max: 10 }
],
axisName: {
color: '#333',
fontSize: 13,
fontWeight: 'bold'
},
splitArea: {
areaStyle: {
color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.1)']
}
},
splitLine: {
lineStyle: {
color: '#ccc'
}
}
},
series: [
{
type: 'radar',
symbolSize: 8,
lineStyle: {
width: 3
},
data: [
{
value: [8.5, 9.0, 7.5, 8.0, 9.5],
name: 'プラットフォームスコア',
itemStyle: {
color: '#5470c6'
},
areaStyle: {
color: 'rgba(84, 112, 198, 0.3)'
}
}
]
}
]
};
戦略的なベストプラクティス
- 軸スケールを統一する：可能な限り、すべての指標が正規化されたスケール範囲（例：0～100または1～10）を使用することを確保し、外側の多角形領域がバランスの取れた比較を反映するようにします。
- シリーズの重ね合わせを少なくする：レーダー比較形状を1チャートあたり2～3個に制限する。4個以上が重なった塗りつぶされた多角形では、個々の形状の境界を識別するのが難しくなる。
- 低濃度の領域塗りつぶしを使用する：常に透過率の低い塗りつぶし（約0.2～0.4の濃度）を適用し、下層のグリッド線や交差するプロファイルが上層のレイヤーの下でも見えやすくする。