多くの数値的またはカテゴリカルな軸上で同時に多変量データポイントを比較する際、並列座標チャートは必須の視覚的ツールです。垂直な水平軸と垂直軸に座標をマッピングするのではなく、並列プロットはすべての次元を並行する線として横に並べます。個々のデータエントリは、各軸と交差する連続的な折れ線パスとして描画され、多属性クラスタ、トレードオフ、相関関係、外れ値を簡単に特定できる—例えば、馬力、重量、燃費、価格、安全評価の観点から自動車モデルを比較する場合など。
並列チャートの仕組み
Apache EChartsでは、並列座標プロットは専用のparallelAxis構成ブロックに依存しており、各並列スケール（軸インデックス、次元名、データタイプ）を定義します。チャートシリーズはtype: 'parallel'を設定し、複数要素の値配列の各行を対応する軸インデックスにマッピングします。
1. 必須のセットアップ
基本的な並列チャートを構築するには、parallelAxis配列に次元を定義し、シリーズのdata:
ECharts
Edit ECharts in VPasCode
option = {
parallelAxis: [
{ dim: 0, name: '価格 ($)' },
{ dim: 1, name: '評価' },
{ dim: 2, name: '重量 (kg)' },
{ dim: 3, name: '出力 (HP)' }
],
series: [
{
type: 'parallel',
lineStyle: {
width: 2
},
data: [
[1299, 4.5, 1.2, 120],
[899, 4.0, 1.5, 95],
[1599, 4.8, 1.1, 150],
[499, 3.5, 2.0, 80],
[2100, 4.9, 0.9, 180]
]
}
]
};
高度な構造技術
並列チャートは、視覚的な色のグラデーションや混合カテゴリカルスケールと組み合わせることで、異なる製品カテゴリ間の複雑なトレードオフを評価できます。
1. 次元間の視覚マップ色グラデーション
visualMap主要な軸次元（例：ラインカラーをパフォーマンス評価にマッピング）と組み合わせることで、すべての並列軸上でトップクラスのパフォーマンスを発揮する項目を即座に強調できます：
ECharts
Edit ECharts in VPasCode
option = {
parallelAxis: [
{ dim: 0, name: 'CPUコア数' },
{ dim: 1, name: 'RAM (GB)' },
{ dim: 2, name: 'ストレージ (TB)' },
{ dim: 3, name: '月額コスト ($)', min: 0, max: 200 }
],
visualMap: {
show: true,
type: 'continuous',
min: 0,
max: 200,
dimension: 3, // 次元インデックス3（月額コスト）に基づいて線の色を設定
inRange: {
color: ['#91cc75', '#fac858', '#ee6666'] // グリーン（低コスト）から赤（高コスト）
},
orient: 'horizontal',
top: '2%',
left: 'center'
},
parallel: {
top: '18%',
bottom: '10%'
},
series: [
{
type: 'parallel',
lineStyle: {
width: 3,
opacity: 0.8
},
data: [
[4, 8, 0.5, 25],
[8, 16, 1.0, 50],
[16, 32, 2.0, 110],
[32, 64, 4.0, 185],
[12, 24, 1.5, 80]
]
}
]
};
レイアウトとインタラクティブフィルタリングの微調整
滑らかな曲線と線の透過度を追加することで、密集した交差するデータ線がユーザーインターフェースを圧倒するのを防ぎます。
1. 滑らかな曲線パスと低透過度の線
設定：smooth: true線の透過度を下げることで、高密度のデータの重なりやクラスタが自然に可視化されます：
ECharts
Edit ECharts in VPasCode
option = {
parallelAxis: [
{ dim: 0, name: 'スコアA' },
{ dim: 1, name: 'スコアB' },
{ dim: 2, name: 'スコアC' },
{ dim: 3, name: 'スコアD' },
{ dim: 4, name: 'スコアE' }
],
parallel: {
left: '10%',
right: '10%',
bottom: '12%',
top: '12%'
},
series: [
{
type: 'parallel',
smooth: true, // クリーンな視覚効果のための曲線パス
lineStyle: {
color: '#5470c6',
width: 2,
opacity: 0.45
},
data: [
[85, 92, 78, 90, 88],
[70, 65, 80, 72, 75],
[95, 88, 92, 96, 94],
[60, 75, 68, 62, 70],
[88, 90, 85, 89, 91],
[78, 82, 74, 80, 83]
]
}
]
};
戦略的なベストプラクティス
- 軸の配置を工夫する：強く相関するか、直接比較可能な指標を隣接する軸に配置することで、関係性やクロスオーバーのトレンドをより簡単に把握できます。
- 高データ量の場合には透過度を低くする：数十本または数百本の線をプロットする際は、
lineStyle.opacityを0.2–0.5にすることで、重複するトレンドが自然に濃い、高密度の帯を形成します。 - 有効にする：
smooth: true複雑なデータセットに適用する：線のパスに微細なカーブを適用することで、複数の平行軸を短時間で連続して通過する際の鋭い視覚的角を軽減できます。