水平棒グラフ順位データ、長いカテゴリ名、または進捗メトリクスを表示するのに適しています。X軸に沿って棒を延長することで、この視覚構造はカテゴリラベルに十分な水平スペースを提供し、テキストを傾けたり切り詰めたりする必要がありません。トップ10のリーダーボードテーブル、アンケート回答の内訳、または水平方向のパフォーマンス比較を構築する場合でも、棒グラフはデスクトップとモバイルの両方の画面で明確な読みやすさを提供します。
水平棒の仕組み
Apache EChartsでは、棒グラフと柱状グラフはまったく同じ'bar'シリーズタイプを使用します。水平レイアウトへの切り替えは、カテゴリデータを垂直軸（yAxis）に直接割り当て、水平軸（xAxis）を数値軸として定義することで行われます。チャートエンジンはレンダリング方向を回転させ、棒を左から右へ水平に描画します。
1. 必須の設定
基本的な水平棒グラフを構築するには、type: 'category'をyAxisに設定し、データ配列を提供します。一方、type: 'value'をxAxis:
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' }
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['ブラジル', 'インドネシア', 'アメリカ', 'インド', '中国']
},
series: [
{
type: 'bar',
data: [214, 273, 331, 1380, 1411]
}
]
};
高度な構造技術
水平棒グラフは、複数のデータグループ、ターゲットハイライト、および現代的なダッシュボードデザイン向けのカスタムコーナー処理をサポートしています。
1. マルチシリーズの水平比較
複数のオブジェクトをシリーズカテゴリーラベルごとにグループ化された水平棒を生成する配列：
ECharts
Edit ECharts in VPasCode
option = {
レジェンド: {
data: ['2025目標', '2025実績']
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['プロジェクトA', 'プロジェクトB', 'プロジェクトC', 'プロジェクトD']
},
series: [
{
name: '2025目標',
type: 'bar',
data: [80, 95, 70, 85]
},
{
name: '2025実績',
type: 'bar',
data: [85, 90, 75, 92]
}
]
};
2. ラウンドエンドキャップとハイライトスタイル
以下の設定を使用して、右側の角をラウンドする：borderRadius水平棒に適用する（指定：[右上、右下、左下、左上]):
ECharts
Edit ECharts in VPasCode
option = {
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['直接検索', 'メールキャンペーン', 'ソーシャルメディア', '有料検索']
},
series: [
{
type: 'bar',
data: [
120,
200,
{
value: 450,
itemStyle: {
color: '#fac858'
}
},
280
],
itemStyle: {
color: '#91cc75',
borderRadius: [0, 6, 6, 0] // 右端の角だけをラウンドする
}
}
]
};
レイアウトと間隔の微調整
水平方向のカテゴリーラベルのテキスト長が異なるため、左マージンとラベルの配置を調整することで、ラベルの切り取りを防ぐことができます。
1. コンテナグリッドのマージン
以下の設定を使用して、grid長いY軸ラベルに十分なスペースを確保するための設定ブロック：
ECharts
Edit ECharts in VPasCode
option = {
grid: {
left: '15%', // 長いカテゴリーテキスト用に左マージンを増やす
right: '8%',
bottom: '10%',
containLabel: true
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: [
'エンタープライズインフラストラクチャの近代化',
'クラウド移行フェーズ2',
'データベース最適化',
'APIゲートウェイの再設計'
]
},
series: [
{
type: 'bar',
data: [75, 60, 90, 40],
barWidth: '50%'
}
]
};
戦略的なベストプラクティス
- データを意図的に並べ替えましょう：可能な限り、水平棒を昇順または降順に並べ替えましょう。順位付きリストは、読者にとってトップパフォーマーをすぐに理解できるようにします。
- 使用する
containLabel: true: 常に含めるcontainLabel: true内部にグリッド設定により、長いカテゴリータイトルがキャンバスの端からはみ出るのを防ぎます。 - 直接値ラベル： クリーンなリーダーボードのためには、各棒の先端にデータ値を直接表示し、
label: { show: true, position: 'right' }数値の下軸を完全に非表示にするのを検討してください。