直感的な視覚的関連性が得られるカテゴリカルな指標を提示する際には、図形バー図従来の長方形のバーとは異なる創造的で魅力的な代替手段を提供します。固体の色ブロックをカスタムベクターアイコン、SVGパス、または繰り返しの記号パターンに置き換えることで、図形バー図は日常的なデータ要約を視覚的に説明的なインフォグラフィック—たとえば、人口統計には人型アイコン、交通指標には車両の形状、収穫数には果物の記号などを使用する。
図形バー図の仕組み
Apache EChartsでは、図形バー図はtype: 'pictorialBar'を使用します。通常のバー図と同様に、標準のカテゴリーアクススと値軸上で動作しますが、長方形のバーの代わりに、symbolプロパティ（標準の形状、画像URL、またはSVGパス文字列など）で定義されたカスタマイズ可能なグラフィックに置き換えます。
1. 必須のセットアップ
複数シリーズの図形バー図を構築するには、カテゴリーアクススと数値軸を設定し、シリーズ全体でtype: 'pictorialBar'を定義し、データ配列内で個々のポイント記号を直接カスタマイズします。data配列内に：
ECharts
Edit ECharts in VPasCode
option = {
title: {
text: "農夫の市場の収穫",
left: 'center'
},
legend: {
data: ['春', '夏'],
top: '8%'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
containLabel: true,
top: '18%',
left: 20
},
yAxis: {
data: ['りんご', 'オレンジ', 'バナナ', 'ぶどう', 'イチゴ'],
inverse: true,
axisLine: { show: false },
axisTick: { show: false },
axisLabel: {
margin: 30,
fontSize: 14
}
},
xAxis: {
splitLine: { show: false },
axisLabel: { show: false },
axisTick: { show: false },
axisLine: { show: false }
},
series: [
{
name: '春',
type: 'pictorialBar',
symbolRepeat: true,
symbolSize: ['80%', '60%'],
barCategoryGap: '40%',
data: [
{ value: 320, symbol: 'circle' },
{ value: 180, symbol: 'rect' },
{ value: 410, symbol: 'diamond' },
{ value: 95, symbol: 'triangle' },
{ value: 240, symbol: 'roundRect' }
]
},
{
name: '夏',
type: 'pictorialBar',
barGap: '10%',
symbolRepeat: true,
symbolSize: ['80%', '60%'],
data: [
{ value: 290, symbol: 'circle' },
{ value: 210, symbol: 'rect' },
{ value: 520, symbol: 'diamond' },
{ value: 130, symbol: 'triangle' },
{ value: 310, symbol: 'roundRect' }
]
}
]
};
高度な構造技術
図形バー図は、アイコンを順次繰り返して単位ベースのインフォグラフィックのカウントを構築するか、クリップパスを使用して充填レベルの可視化を作成できます。
1. シングルシリーズの単位カウントパターン
を有効化してsymbolRepeat: true単一の値軸上で、水平方向の単位ベースの記号スタックをレンダリングします：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'value',
max: 10,
splitLine: { show: false }
},
yAxis: {
type: 'category',
data: ['チームアルファ', 'チームベータ', 'チームガンマ'],
axisLine: { show: false },
axisTick: { show: false }
},
series: [
{
type: 'pictorialBar',
symbol: 'roundRect',
symbolRepeat: true,
symbolSize: [12, 30],
symbolMargin: 4,
data: [8, 5, 9],
itemStyle: {
color: '#91cc75'
}
}
]
};
レイアウトとカスタムSVG形状の微調整
カスタムベクターアイコンのSVGパス文字列を使用することで、チャートシリーズ内に直接カスタマイズされたアイコンをレンダリングできます。
1. カスタムベクターパスと背景オーバーレイ
カスタムSVGパス文字列を symbolに供給し、下にフルスケールの背景グラフィックを重ねて、プログレススタイルのメーターを作成します：
ECharts
Edit ECharts in VPasCode
const pathBattery = 'path://M16 4h-2V2a1 1 0 0 0-1-1H11a1 1 0 0 0-1 1v2H8a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2z';
option = {
title: {
text: 'デバイスのバッテリー残量',
left: 'center'
},
tooltip: {
trigger: 'axis',
axisPointer: { type: 'none' }
},
grid: {
top: '20%',
bottom: '15%',
left: '10%',
right: '10%'
},
xAxis: {
type: 'category',
data: ['ノードA', 'ノードB', 'ノードC', 'ノードD'],
axisLine: { show: false },
axisTick: { show: false }
},
yAxis: {
type: 'value',
max: 100,
show: false
},
series: [
{
name: 'バッテリー外殻',
type: 'pictorialBar',
symbol: pathBattery,
symbolSize: ['60%', '100%'],
symbolPosition: 'start',
symbolBoundingData: 100,
symbolClip: false,
itemStyle: {
color: '#e2e8f0' // 空の背景シェル
},
data: [100, 100, 100, 100],
z: 1
},
{
name: '充電レベル',
type: 'pictorialBar',
symbol: pathBattery,
symbolSize: ['60%', '100%'],
symbolPosition: 'start',
symbolBoundingData: 100,
symbolClip: true, // 値に比例してフィルされる
label: {
show: true,
position: 'top',
formatter: '{c}%',
fontSize: 14,
fontWeight: 'bold',
color: '#333'
},
itemStyle: {
color: '#22c55e' // 充電中の緑色フィル
},
data: [85, 45, 92, 20],
z: 2
}
]
};
戦略的なベストプラクティス
- 異なるカテゴリに個別にシンボルを割り当てる：個別の
symbolをデータオブジェクト内に定義する（例：{ value: 320, symbol: 'circle' }）により、色に完全に依存せずに、行を視覚的に区別できます。 - アイコンの比喩を直感的に保つ：データのトピックと直接一致するシンボル（例：人口統計データにはユーザーの輪郭、電力メトリクスにはバッテリーのアイコン）を選択することで、視覚情報がすぐに読み取れるようにします。
- 使用する
symbolClip: trueフィルインジケーターに：フル背景に対してパーセンテージメトリクスを表示する際は、アクティブなシリーズにsymbolClip: trueを設定することで、カスタムベクターシェイプが値に比例してフィルされます。