離散的な指標にわたる構造的分解を評価する際、積み上げ棒グラフは、部分から全体への分布を効率的に可視化する方法を提供します。データ系列を水平に広げるグループ化レイアウトとは異なり、積み上げグラフは単一の棒の境界内に値を垂直方向に累積します。この形式により、カテゴリ全体の成長を監視しながら、内部のサブコンポーネントの割合の変化を追跡することが容易になりますたとえば、OS別に分けられたデバイストラフィックや、部署ごとの四半期別経費の内訳などです。
積み上げ棒のメカニズム
積み上げ棒グラフは、複数の系列に一致するstack識別子を割り当てることに依存しています。レンダリングエンジンがstack文字列値を、type: 'bar'というプロパティを持つ系列で検出すると、重なり合うか隣接する棒として描画するのではなく、垂直方向のY軸に沿って数値を順次積み上げます。
1. 必須の設定
基本的な積み上げ棒グラフを構築するには、カテゴリベースのX軸を定義し、stackプロパティを、series配列内の各系列に適用します：
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' }
},
legend: {
data: ['直接', '自然検索', '広告費', 'リファラル']
},
xAxis: {
type: 'category',
data: ['月', '火', '水', '木', '金', '土', '日']
},
yAxis: {
type: 'value'
},
series: [
{
name: '直接',
type: 'bar',
stack: 'total',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '自然検索',
type: 'bar',
stack: 'total',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '広告費',
type: 'bar',
stack: 'total',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: 'リファラル',
type: 'bar',
stack: 'total',
data: [98, 77, 101, 99, 40, 120, 110]
}
]
};
高度な構造技術
積み上げ棒グラフは、分析上の要件に応じて、パーセンテージ分布を表示するか、選択的なサブグループ化を行うようにカスタマイズできます。
1. 100％正規化された積み上げ棒
絶対的な数値合計ではなく、割合の比率を比較することが主な目的である場合、各カテゴリごとに合計が100％になるようにデータ値を正規化されたパーセンテージに変換します：
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' },
formatter: '{b}
{a0}: {c0}%
{a1}: {c1}%
{a2}: {c2}%'
},
legend: {
data: ['デスクトップ', 'モバイル', 'タブレット']
},
xAxis: {
type: 'category',
data: ['Q1', 'Q2', 'Q3', 'Q4']
},
yAxis: {
type: 'value',
min: 0,
max: 100,
axisLabel: { formatter: '{value}%' }
},
series: [
{
name: 'デスクトップ',
type: 'bar',
stack: 'percentage',
data: [60, 50, 45, 40]
},
{
name: 'モバイル',
type: 'bar',
stack: 'percentage',
data: [30, 40, 45, 50]
},
{
name: 'タブレット',
type: 'bar',
stack: 'percentage',
data: [10, 10, 10, 10]
}
]
};
2. マルチスタックグループ化
異なるスタック識別子をシリーズ間で使用することで、1つのビューでグループ化とスタックを組み合わせることができます。スタック識別子をシリーズ間で使用します。たとえば、各項目がスタックされたサブコンポーネントで構成される、実績と目標の合計を比較する場合などです：
option = {
legend: {
data: ['製品A 実績', '製品B 実績', '製品A 目標', '製品B 目標']
},
xAxis: {
type: 'category',
data: ['Q1', 'Q2', 'Q3', 'Q4']
},
yAxis: {
type: 'value'
},
series: [
{
name: '製品A 実績',
type: 'bar',
stack: 'actual',
data: [120, 150, 180, 200]
},
{
name: '製品B 実績',
type: 'bar',
stack: 'actual',
data: [80, 90, 100, 110]
},
{
name: '製品A 目標',
type: 'bar',
stack: 'target',
data: [130, 160, 190, 210]
},
{
name: '製品B 目標',
type: 'bar',
stack: 'target',
data: [90, 100, 110, 120]
}
]
};
レイアウトとスタイルの微調整
スタックされた棒グラフでは、視覚的な疲労を招かずにセグメントが明確に区別できるように、視覚的な仕上げが重要です。
1. セグメントの境界と上部の丸みのある先端
スタックされたセグメントの間に明確な境界線を適用し、角の丸みをスタック内の最上位のシリーズセグメントにのみ制限します：
option = {
xAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'ベースレイヤー',
type: 'bar',
stack: 'total',
data: [320, 302, 301, 334],
itemStyle: {
color: '#4992ff',
borderColor: '#ffffff',
borderWidth: 1
}
},
{
name: 'ミドルレイヤー',
type: 'bar',
stack: 'total',
data: [120, 132, 101, 134],
itemStyle: {
color: '#7cffb2',
borderColor: '#ffffff',
borderWidth: 1
}
},
{
name: 'トップレイヤー',
type: 'bar',
stack: 'total',
data: [220, 182, 191, 234],
itemStyle: {
color: '#fddd60',
borderColor: '#ffffff',
borderWidth: 1,
borderRadius: [4, 4, 0, 0] // 上部セグメントのみに角を丸める
}
}
]
};
戦略的なベストプラクティス
- セグメント数を制限する：1つの棒に4～5個以上のカテゴリーをスタックしないようにしてください。この閾値を超えると、列間で中間のセグメントを比較することが視覚的に難しくなります。
- ベースライン項目を下部に固定する：最も重要な指標や最大のサブコンポーネントを、
seriesシリーズ配列の最初の項目として配置し、基準線に直接乗るようにすることで、容易に整合させることができます。 - 高コントラストのパレットまたは境界線を使用する：隣接する色のコントラストレベルが似ている場合でも、セグメント間の明確な区別を維持するために、わずかな白色の境界線を適用します。