データ可視化およびレポート作成の分野において、カラムチャート（縦棒グラフ）は、単一または複数の指標にわたって離散的なカテゴリを比較する主なツールです。長いテキストラベルに適している横棒グラフとは異なり、縦棒グラフは高さの違いを利用して、体積、成長、ばらつきを即座に伝えることができます。四半期の売上データ、サーバーのCPU使用率の急上昇、チャネル別のウェブトラフィックを表示する場合でも、カラムチャートはカテゴリベースの指標に対して明確な視覚的基準を提供します。
縦棒の仕組み
Apache EChartsでは、横棒グラフと縦棒グラフの両方が'bar'シリーズタイプに依存しています。カラムチャートを作成するための鍵となる要素は、カテゴリラベルを水平軸（xAxis）に配置することであり、垂直軸（yAxis）を数値に設定することです。チャートエンジンはデータ配列を読み取り、各縦棒の高さを数値スケールに応じて動的にスケーリングします。
1. 必須の設定
基本的なカラムチャートを構築するには、カテゴリベースのX軸を定義し、データセットをtype: 'bar':
option = {
xAxis: {
type: 'category',
data: ['月', '火', '水', '木', '金', '土', '日']
},
yAxis: {
type: 'value'
},
series: [
{
type: 'bar',
data: [120, 200, 150, 80, 70, 110, 130]
}
]
};
高度な構造技術
ダッシュボードを構築する際、単純な単一シリーズのチャートではしばしば不十分です。EChartsは、マルチシリーズの比較、カスタムディメンション、レイアウトの余白を管理するための明確な構文オプションを提供しています。
マルチシリーズ比較
複数のデータセットを横並びで比較する場合（例：前年比の収益）には、series配列内に複数のオブジェクトを追加します。レイアウトエンジンはX軸に沿って各カテゴリごとに関連する棒をグループ化します：
option = {
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]
}
]
};
カスタムカラムスタイルと個別強調
すべてのシリーズにグローバルスタイルを適用したり、特定のデータポイントを直接ターゲットにしたりできます。これは、重要なイベントや外れ値、特定の目標を強調する際に特に役立ちます。
色: 塗りつぶし色を設定します（16進数、RGB、または線形グラデーション）。角の半径: カラムに角を丸くします（例：[5, 5, 0, 0]上部の角用）。透過度: カラムの透過度を調整します。影のぼかし&影の色: カラムに浮き上がり効果と影を追加します。
option = {
xAxis: {
type: 'category',
data: ['直接', 'メール', '広告ネットワーク', '動画広告', '検索']
},
yAxis: {
type: 'value'
},
series: [
{
type: 'bar',
data: [
320,
332,
{
value: 401,
// 単一のピークカラムを強調
itemStyle: {
color: '#ee6666',
borderRadius: [6, 6, 0, 0]
}
},
334,
390
],
itemStyle: {
color: '#5470c6',
borderRadius: [4, 4, 0, 0]
}
}
]
};
レイアウトとサイズの微調整
カラムの寸法と間隔は、特にレスポンシブ画面や密集したダッシュボードでチャートを表示する場合、読みやすさに大きな影響を与えます。
1. 幅と制限の制御
デフォルトでは、カラムの幅はチャートコンテナに応じて動的にスケーリングされます。サイズプロパティを使用して、これらの比率を制御できます：
barWidth: 固定ピクセルまたはカテゴリ幅のパーセンテージ（例：'30%').barMaxWidth: 幅に上限を設定し、ワイドスクリーン表示時にカラムが過度に広がるのを防ぎます。barMinHeight: 近ゼロの値がクリック可能で可視のままになるように、最小ピクセル高さを強制します。
2. 列の間隔と背景トラック
列にモダンなダッシュボード風の外観を与えるには、内側の隙間を調整するか、フルハイツ背景トラックを有効化してください：
option = {
xAxis: {
type: 'category',
data: ['月', '火', '水', '木', '金']
},
yAxis: {
type: 'value'
},
series: [
{
type: 'bar',
data: [120, 200, 150, 80, 70],
barWidth: '40%',
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.15)',
borderRadius: [4, 4, 0, 0]
}
}
]
};
戦略的なベストプラクティス
- 間隔をバランスよく保つ：以下を設定しないでください：
barWidth60%以上にしすぎない（広すぎない）ことで、視覚的なレイアウトが混雑した感じにならないようにしてください。 - 水平 vs. 垂直の選択：カテゴリラベルが短い場合（例：月、四半期、コード）は、列グラフを使用してください。ラベルが長い説明や名前である場合は、カテゴリデータを
yAxisに変更して、代わりに水平棒グラフを作成することを検討してください。 - ゼロベースラインの整合性： 数値軸は常にゼロから始まるようにしてください（
0）。列グラフで下部スケールを切り詰めると、高さの比率が歪み、視聴者を誤解させる原因になります。