長いカテゴリ名にわたって二次的な指標を比較する場合、最も適切なのはグループ化された棒グラフ。Y軸に沿って関連する水平棒を隣接させて配置することで、このレイアウトは、ラベルの可読性を損なうことなく、複数のカテゴリにわたってパフォーマンス指標をスキャンできるようにします。カテゴリラベルに十分な水平スペースが必要な、複数年の予算構成、製品機能の比較、または複数地域の売上ベンチマークにおいて、効果的な選択肢となります。
グループ化された水平棒の仕組み
垂直の柱グループと同様に、水平棒グループは、Y軸に同一のカテゴリラベルを割り当て、複数のシリーズをtype: 'bar'によって定義することで作成されます。レンダリングエンジンが視覚的なグループ化を自動的に処理し、各シリーズをカテゴリブロック内で垂直方向にオフセットします。
1. 必須の設定
グループ化された棒グラフを構築するには、離散的なカテゴリをyAxis.dataに割り当て、数値型のxAxisを指定し、複数の棒シリーズを含めます：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' }
},
legend: {
data: ['2025年割当', '2026年割当']
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['研究開発', 'マーケティング・販売', 'カスタマーサポート', '運用']
},
series: [
{
name: '2025年割当',
type: 'bar',
data: [320, 450, 210, 380]
},
{
name: '2026年割当',
type: 'bar',
data: [380, 490, 240, 410]
}
]
};
高度な構造技術
チャートを3つ以上のシリーズに拡張することで、より豊かなインサイトが得られますが、視覚的な密度が読みやすく保たれていることが前提です。
1. カスタムカラーグラデーションを用いたマルチメトリックスタイル
異なるグループの可読性を保つために、水平方向のシリーズに独自のカラーパレットや繊細なグラデーションフィルを適用します：
ECharts
Edit ECharts in VPasCode
option = {
legend: {
data: ['Q1売上', 'Q2売上', 'Q3売上']
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['北地域', '南地域', '東地域', '西地域']
},
series: [
{
name: 'Q1売上',
type: 'bar',
data: [120, 200, 150, 80],
itemStyle: {
color: '#5470c6',
borderRadius: [0, 4, 4, 0]
}
},
{
name: 'Q2売上',
type: 'bar',
data: [140, 220, 170, 95],
itemStyle: {
color: '#91cc75',
borderRadius: [0, 4, 4, 0]
}
},
{
name: 'Q3売上',
type: 'bar',
data: [180, 250, 190, 110],
itemStyle: {
color: '#fac858',
borderRadius: [0, 4, 4, 0]
}
}
]
};
レイアウトと間隔の微調整
垂直方向のY軸に沿った棒の間隔を管理することは、カテゴリブロック間の明確な分離を維持するための鍵です。
1. 垂直方向の内側ギャップとカテゴリの余白
シリーズの棒が隣接するカテゴリグループに溶け込まないように、整然とグループ化された状態を保つために、間隔の属性を調整します：
ECharts
Edit ECharts in VPasCode
option = {
grid: {
left: '20%',
right: '10%',
containLabel: true
},
legend: {
data: ['ベースライン', '最適化済み']
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['API応答時間', 'データベースクエリ時間', 'アセット読み込み時間']
},
series: [
{
name: 'ベースライン',
type: 'bar',
barGap: '15%', // 同一カテゴリ内の棒の間隔
barCategoryGap: '40%', // カテゴリブロック間の間隔
data: [350, 180, 520]
},
{
name: '最適化済み',
type: 'bar',
data: [120, 65, 210]
}
]
};
戦略的なベストプラクティス
- グループの焦点を絞る：カテゴリごとに3～4シリーズまでに抑える。それ以上になると、積み上げ型またはマルチパネルのチャートの方が、縦方向の視覚的なごちゃごちゃを防ぐのに適している。
- Y軸の余白を十分に確保する：グループ化された水平チャートは大きな縦幅を占める。コンテナの高さを増すか、または
grid.leftを調整して、テキストの切り詰めを防ぐ。 - メトリクスの順序を一貫させる： コード内のシリーズの順序が、物語の自然な流れと一致していることを確認する（例：過去の年を最初に、現在の年を2番目に）。