時間の経過とともに全体の合計ボリュームと個々のサブコンポーネントの貢献度の両方を追跡する必要がある場合、積み上げ面グラフは理想的な可視化ツールです。垂直方向に積み上げた面の塗りつぶしは、連続的な合成ビューを形成し、最も上部の線が集計合計を表します。一方、個々のバンドの幅は、サブカテゴリの貢献度の変化を示し、例えば数か月間にわたり検索エンジン、オーガニック、直接リファラルチャネルごとの合計ウェブトラフィックの内訳などがあります。
積み上げ面グラフの仕組み
積み上げ面グラフは、一致するstack属性を組み合わせます。レンダリングエンジンが、stack識別子を複数のシリーズで検出すると、type: 'line'およびareaStyleが有効な場合、各データポイントが垂直方向のY軸に沿って、前のシリーズのラインパスの上に順次積み上げられます。
1. 必須の設定
基本的な積み上げ面グラフを構築するには、連続するX軸を定義し、各シリーズにtype: 'line'を設定し、areaStyleを有効にし、すべてのシリーズに同一のstack識別子を割り当てます：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'cross' }
},
legend: {
data: ['メール', 'ユニオン広告', '動画広告', '直接']
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['月', '火', '水', '木', '金', '土', '日']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'メール',
type: 'line',
stack: '合計',
areaStyle: {},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'ユニオン広告',
type: 'line',
stack: '合計',
areaStyle: {},
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '動画広告',
type: 'line',
stack: '合計',
areaStyle: {},
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: '直接',
type: 'line',
stack: '合計',
areaStyle: {},
data: [320, 332, 301, 334, 390, 330, 320]
}
]
};
高度な構造技術
積み上げ面グラフは、時間の経過とともに全体の累積成長に注目するか、相対的な割合の変化に注目するかを設定できます。
1. 100％正規化されたパーセンテージ面グラフ
時間の経過に伴う総合計ボリュームではなく、割合の変化を評価する場合、データセットを各水平方向の時間ポイントごとに100％に正規化してください：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'axis',
formatter: '{b}
{a0}: {c0}%
{a1}: {c1}%
{a2}: {c2}%'
},
legend: {
data: ['デスクトップ', 'モバイル', 'タブレット']
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['2023', '2024', '2025', '2026']
},
yAxis: {
type: 'value',
min: 0,
max: 100,
axisLabel: { formatter: '{value}%' }
},
series: [
{
name: 'デスクトップ',
type: 'line',
stack: 'percent',
smooth: true,
areaStyle: {},
data: [65, 55, 48, 40]
},
{
name: 'モバイル',
type: 'line',
stack: 'percent',
smooth: true,
areaStyle: {},
data: [25, 35, 42, 50]
},
{
name: 'タブレット',
type: 'line',
stack: 'percent',
smooth: true,
areaStyle: {},
data: [10, 10, 10, 10]
}
]
};
レイアウトとスタイルの微調整
積み重ねられた領域は背景を完全に覆うため、塗りつぶしの不透明度や線の太さを調整することで、個々のレイヤーが明確で読みやすく保たれます。
1. カスタムレイヤーの不透明度と境界区切り
わずかに透明な領域の塗りつぶしの上に実線の線を設定することで、隣接する積み重ね帯の間に明確な視覚的な境界が形成されます：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Q1', 'Q2', 'Q3', 'Q4']
},
yAxis: {
type: 'value'
},
series: [
{
name: '製品A',
type: 'line',
stack: 'volume',
smooth: true,
lineStyle: { width: 2, color: '#5470c6' },
areaStyle: { color: '#5470c6', opacity: 0.7 },
data: [120, 150, 180, 210]
},
{
name: '製品B',
type: 'line',
stack: 'volume',
smooth: true,
lineStyle: { width: 2, color: '#91cc75' },
areaStyle: { color: '#91cc75', opacity: 0.7 },
data: [220, 280, 250, 310]
},
{
name: '製品C',
type: 'line',
stack: 'volume',
smooth: true,
lineStyle: { width: 2, color: '#fac858' },
areaStyle: { color: '#fac858', opacity: 0.7 },
data: [150, 190, 220, 260]
}
]
};
戦略的なベストプラクティス
- 安定したシリーズを下部に固定する：最も大きな、または変動が少ないシリーズを積み重ねの下部に配置することで、その上にあるバンドの予測可能な基準を確立します。
- バンド数を制限する：4～5個以上のシリーズを積み重ねると、中央のバンドを正確に評価するのが難しくなります。小さなカテゴリを「その他」カテゴリにグループ化することを検討してください。
- 次のように使用する：
axisPointer: { type: 'cross' }:ホバー時の十字線と連続するツールチップを組み合わせることで、密集した垂直スタック across での特定の日付値の特定が簡単になります。