データ分析およびビジネスレポートにおいて、グループ化された棒グラフ（クラスタード棒グラフとしても知られる）は、複数の次元にわたる並べ替え比較の主なツールです。標準の棒グラフはカテゴリごとに1つの指標を評価するのに対し、グループ化された棒グラフは同じカテゴリーバイン内に関連するデータセットを隣接して配置します。これにより、時間にわたるトレンド、チームごとのパフォーマンス、または複数指標のパフォーマンス.
グループ化された棒のメカニズム
グループ化された棒グラフは、横軸が離散的なカテゴリを表し、縦軸が連続値を扱う共有座標系上で動作します。グループ化は、横軸上で正確に同じカテゴリの配置を持つ複数のシリーズオブジェクトを宣言することで達成されます。レイアウトエンジンは自動的に必要なオフセットを計算し、各シリーズをその対応するカテゴリブロック内で横並びに描画します。
1. 必須の設定
グループ化された棒グラフを構築するには、単一のカテゴリカル軸を定義し、type: 'bar':
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' }
},
legend: {
data: ['2025年収益', '2026年収益']
},
xAxis: {
type: 'category',
data: ['Q1', 'Q2', 'Q3', 'Q4']
},
yAxis: {
type: 'value'
},
series: [
{
name: '2025年収益',
type: 'bar',
data: [320, 332, 301, 334]
},
{
name: '2026年収益',
type: 'bar',
data: [220, 182, 191, 234]
}
]
};
高度な構造技術
第3または第4のシリーズを追加すると、グラフの密度が増加します。明確さを保つために、シリーズのスタイル、レイアウトの間隔、視覚的ヒントを微調整できます。
1. グループ間でのカスタムスタイル
独自の色、角を丸めたデザイン、またはカスタムアイテムスタイルを適用することで、密集したグラフ内の個々のグループを簡単に区別できます：
ECharts
Edit ECharts in VPasCode
option = {
legend: {
data: ['製品A', '製品B', '製品C']
},
xAxis: {
type: 'category',
data: ['北米', 'ヨーロッパ', 'アジア太平洋']
},
yAxis: {
type: 'value'
},
series: [
{
name: '製品A',
type: 'bar',
data: [150, 230, 224],
itemStyle: {
color: '#5470c6',
borderRadius: [4, 4, 0, 0]
}
},
{
name: '製品B',
type: 'bar',
data: [180, 200, 210],
itemStyle: {
color: '#91cc75',
borderRadius: [4, 4, 0, 0]
}
},
{
name: '製品C',
type: 'bar',
data: [120, 140, 190],
itemStyle: {
color: '#fac858',
borderRadius: [4, 4, 0, 0]
}
}
]
};
レイアウトと間隔の微調整
グループ化された棒を使用する際、間隔は非常に重要です。同じグループ内の棒の間隔と、別々のカテゴリグループ間の間隔を制御することで、視覚的なごちゃごちゃを防ぐことができます。
1. グループ内ギャップ vs. カテゴリギャップ
レイアウト密度を調整するために、間隔属性を使用します：
barGap：棒の間隔を制御します同じカテゴリーグループ内（例：'20%'または'0%'連接する列の場合）。barCategoryGap：スペースを制御します異なるカテゴリーグループの間（例：'40%').barWidth：カテゴリースペースに対する列の幅を制御します。
ECharts
Edit ECharts in VPasCode
option = {
legend: {
data: ['計画', '実績']
},
xAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月']
},
yAxis: {
type: 'value'
},
series: [
{
name: '計画',
type: 'bar',
data: [100, 120, 140, 160, 180],
barGap: '10%',
barCategoryGap: '35%'
},
{
name: '実績',
type: 'bar',
data: [95, 125, 130, 170, 175]
}
]
};
戦略的なベストプラクティス
- グループ数の制限：1つのグループに3～4本以上の列を配置しないようにしてください。カテゴリごとに列が多すぎると、チャートの確認が難しくなります。
- 必ず凡例を含める：グループ化されたチャートは変数の区別に色を使用するため、文脈を明確にするために明確な上部または下部の凡例が必須です。
- グループの順序を一貫させる：すべてのカテゴリでシリーズの順序を一貫させてください（例：常に「2025」を「2026」の前に配置する）。