グループ間のデータの散らばりを分析し、異常なデータポイントを特定する必要がある場合、ボックスプロットチャート（またはボックスアンドウィスカープロット）は、標準的な統計的視覚化ツールです。連続データを最小値、第一四分位数（Q1）、中央値（Q2）、第三四分位数（Q3）、最大値の5つの重要な数値に要約することで、ボックスプロットチャートは歪度、ばらつき、極端な外れ値を、生データで画面を混雑させることなく、一目で把握できます。
ボックスプロットチャートの仕組み
Apache EChartsでは、統計的なボックスはtype: 'boxplot'を使用してレンダリングされます。各データセットエントリは、[最小値, Q1, 中央値, Q3, 最大値]という順序の5要素の数値配列を想定しています。EChartsには、生の数値からこれらの統計的境界を直接計算するための組み込みデータ準備ツールも含まれています。
1. 必須の設定
基本的なボックスプロットを構築するには、X軸にカテゴリをマッピングし、シリーズデータ内に計算された5数要約の配列を提供します：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'item',
axisPointer: { type: 'shadow' }
},
xAxis: {
type: 'category',
data: ['カテゴリ1', 'カテゴリ2', 'カテゴリ3', 'カテゴリ4', 'カテゴリ5']
},
yAxis: {
type: 'value',
name: '分布値'
},
series: [
{
name: 'ボックスプロット',
type: 'boxplot',
data: [
[655, 850, 940, 980, 1070], // [最小値, Q1, 中央値, Q3, 最大値]
[760, 800, 845, 885, 960],
[780, 840, 855, 880, 940],
[720, 767, 815, 865, 920],
[890, 920, 950, 970, 990]
]
}
]
};
高度な構造技術
外れ値の散布点を重ね合わせたり、長い名前のカテゴリ用に水平方向のボックスプロットを構築したりできます。
1. 水平ボックスプロットレイアウト
設定するにはyAxisをカテゴリスケールとして、xAxisを数値スケールとして設定し、ボックスプロットを水平に反転させてラベルの可読性を高めます：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'item',
axisPointer: { type: 'shadow' }
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['サーバーアルファ', 'サーバーベータ', 'サーバーガンマ']
},
series: [
{
name: '遅延 (ms)',
type: 'boxplot',
data: [
[12, 18, 22, 28, 35],
[15, 24, 30, 38, 48],
[8, 12, 15, 20, 27]
],
itemStyle: {
color: '#e0f2fe',
borderColor: '#0284c7',
borderWidth: 2
}
}
]
};
レイアウトとスタイルの微調整
カスタムボックスカラー、ヒゲの幅、中央値ラインのフォーマットを調整することで、複雑なダッシュボードレイアウト間での視覚的区別が向上します。
1. カスタムボックス塗りつぶしと外れ値のスタイル設定
インターフェースデザインに合わせて、ボックスの境界線、塗りつぶし色、ヒゲ線のプロパティをスタイル設定してください：
ECharts
Edit ECharts in VPasCode
option = {
grid: {
left: '10%',
right: '10%',
containLabel: true
},
xAxis: {
type: 'category',
data: ['グループA', 'グループB', 'グループC']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'スコア分布',
type: 'boxplot',
boxWidth: ['20%', '50%'], // 応答性のあるボックス幅の境界
itemStyle: {
color: '#f0fdf4',
borderColor: '#16a34a',
borderWidth: 2
},
data: [
[40, 55, 68, 82, 95],
[50, 62, 75, 88, 98],
[30, 45, 58, 70, 85]
]
}
]
};
戦略的なベストプラクティス
- 要約の順序を再確認してください：配列の値が厳密な順序に従っていることを確認してください：
[最小値, Q1, 中央値, Q3, 最大値]順序が正しくない場合、レンダリングの不具合が発生します。 - 外れ値を散布図シリーズで重ねて表示する：2番目の
散布図ボックスプロットの上に2番目の散布図シリーズを使用して、極端な統計的外れ値を個別のデータポイントとして表示します。 - グリッドの余白を調整する：十分な
grid.bottomまたはgrid.left長いカテゴリ名がヒゲ線と重複しないように、十分な余白を確保してください。