長いカテゴリータイトルを持つ項目の構成要素の分解を分析する場合、積み上げ棒グラフが理想的な選択です。データセグメントをY軸に沿って左から右へ水平に積み重ねることで、長いラベルの見やすさを保ちながら、カテゴリ全体の合計と内部の割合分解の両方を表示できますこれは、アンケートの人口統計結果、部門別プロジェクトリソース配分、またはマルチチャネルコンバージョンパイプラインにおいて特に効果的です。
積み上げ水平棒の仕組み
水平積み上げチャートを作成するには、同じstackプロパティを使用し、カテゴリベースのY軸と組み合わせます。複数のtype: 'bar'シリーズが同じstackキーを持つ水平方向の場合、レンダリングエンジンはX軸に沿って左から右へ値を累積します。
1. 必須の設定
基本的な積み上げ棒グラフを構築するには、yAxisをtype: 'category', xAxisをtype: 'value'に設定し、各シリーズに一致するstack文字列を各シリーズに割り当てます：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' }
},
legend: {
data: ['エンジニアリング', 'プロダクト', 'デザイン', 'マーケティング']
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['プロジェクトアルファ', 'プロジェクトベータ', 'プロジェクトガンマ', 'プロジェクトデルタ']
},
series: [
{
name: 'エンジニアリング',
type: 'bar',
stack: 'allocation',
data: [320, 302, 301, 334]
},
{
name: 'プロダクト',
type: 'bar',
stack: 'allocation',
data: [120, 132, 101, 134]
},
{
name: 'デザイン',
type: 'bar',
stack: 'allocation',
data: [220, 182, 191, 234]
},
{
name: 'マーケティング',
type: 'bar',
stack: 'allocation',
data: [150, 212, 201, 154]
}
]
};
高度な構造技術
積み重ねられた水平棒は、絶対的な体積比較用に設定できるか、カテゴリ間のパーセンテージ比を示すために正規化できる。
1. 100%正規化された水平棒グラフ
長文カテゴリ間で絶対値ではなく相対比を評価するには、シリーズデータを各行で合計が100%になるように正規化する：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' },
formatter: '{b}
{a0}: {c0}%
{a1}: {c1}%
{a2}: {c2}%'
},
legend: {
data: ['満足', '中立', '不満']
},
xAxis: {
type: 'value',
min: 0,
max: 100,
axisLabel: { formatter: '{value}%' }
},
yAxis: {
type: 'category',
data: [
'エンタープライズカスタマーサクセス',
'ミッドマーケットサポートサービス',
'セルフサービスオンボーディング'
]
},
series: [
{
name: '満足',
type: 'bar',
stack: 'フィードバック',
data: [75, 60, 45]
},
{
name: '中立',
type: 'bar',
stack: 'フィードバック',
data: [18, 25, 35]
},
{
name: '不満',
type: 'bar',
stack: 'フィードバック',
data: [7, 15, 20]
}
]
};
レイアウトとスタイルの微調整
明確な視覚的境界と丸みを帯びた外側の端は、水平積み上げ棒グラフに洗練された現代的な印象を与える。
1. セグメントの分離と外側端の丸み
内側のセグメントを明確に区別するために細い垂直の境界線を適用し、角の半径スタイルを右端の最終セグメントに限定する：
ECharts
Edit ECharts in VPasCode
option = {
grid: {
left: '15%',
right: '10%',
containLabel: true
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['Q1予算', 'Q2予算', 'Q3予算', 'Q4予算']
},
series: [
{
name: '固定費',
type: 'bar',
stack: '予算',
data: [400, 420, 410, 430],
itemStyle: {
color: '#5470c6',
borderColor: '#ffffff',
borderWidth: 1
}
},
{
name: '変動費',
type: 'bar',
stack: '予算',
data: [200, 250, 220, 280],
itemStyle: {
color: '#91cc75',
borderColor: '#ffffff',
borderWidth: 1
}
},
{
name: '任意支出',
type: 'bar',
stack: '予算',
data: [100, 150, 130, 190],
itemStyle: {
color: '#fac858',
borderColor: '#ffffff',
borderWidth: 1,
borderRadius: [0, 6, 6, 0] // 右端のカバー部分の丸み
}
}
]
};
戦略的なベストプラクティス
- 最初のセグメントの基準：Y軸の基準に最も近いセグメントは、カテゴリ間で比較しやすい。常に最も重要なコンポーネントを最初のシリーズオブジェクトに配置する。
- 積み上げコンポーネントの数を制限する：1本の棒あたりの積み上げセグメントの合計数を5個以下に抑えることで、視覚的な分析を明確に保ちつつ、視聴者を圧倒しないようにする。
- 棒内のテキストラベル：広いセグメントを持つ水平積み上げ棒の場合、次のように有効化することを検討する：
label: { show: true, position: 'inside' }個々のセグメントの値を、ホバー時のツールチップに頼らずに読み取れるようにする。