重要な目標や運用上の安全限界に対して単一のKPIをモニタリングする際、ゲージチャート（またはスピードメーター・チャート）は、直感的で非常に認識しやすい視覚的サインを提供します。単一の値を針付きの円弧上にマッピングし、色分けされたステータス領域を用いることで、ゲージチャートはユーザーが警告しきい値および目標限界に対する現在のパフォーマンスを評価できる—例えばサーバーのCPU負荷、プロジェクト完了率、信用スコア、または車両の速度など。
ゲージチャートの仕組み
Apache EChartsでは、ゲージチャートはtype: 'gauge'を使用します。複数カテゴリのチャートとは異なり、ゲージチャートは通常、径方向の弧上に単一の値または少数の針を表示します。軸のスケールはminおよびmaxプロパティで定義され、axisLine.lineStyle.colorは周囲の弧を明確な警告帯（例：緑、黄、赤）に分割します。
1. 必須の設定
基本的なゲージチャートを構築するには、min, maxを設定し、シリーズのdata配列内に単一の値エントリを提供します：
option = {
tooltip: {
formatter: '{a}
{b} : {c}%'
},
series: [
{
name: 'システムの健全性',
type: 'gauge',
progress: {
show: true
},
detail: {
valueAnimation: true,
formatter: '{value}%'
},
data: [
{
value: 70,
name: 'CPU負荷'
}
]
}
]
};
高度な構造技術
ゲージチャートは、複数色の軸バンド、カスタム進捗フィル、または複数の針を用いて、単一の目盛り上で実際値と目標値を比較できるようにスタイル設定できます。
1. 色分けされたしきい値帯とカスタムポインター
円形軸に沿って明確な色の停止点を定義するには、axisLine.lineStyle.color警告ゾーン（例：安全、警告、深刻）をマークするために使用します：
option = {
series: [
{
type: 'gauge',
axisLine: {
lineStyle: {
width: 20,
color: [
[0.3, '#67c23a'], // 30%まで緑
[0.7, '#e6a23c'], // 70%までオレンジ
[1, '#f56c6c'] // 100%まで赤
]
}
},
pointer: {
itemStyle: {
color: 'auto'
}
},
axisTick: {
distance: -20,
length: 8,
lineStyle: {
color: '#fff',
width: 2
}
},
splitLine: {
distance: -20,
length: 20,
lineStyle: {
color: '#fff',
width: 4
}
},
axisLabel: {
color: 'inherit',
distance: 25,
fontSize: 14
},
detail: {
valueAnimation: true,
formatter: '{value} km/h',
color: 'inherit'
},
data: [
{
value: 80,
name: '速度'
}
]
}
]
};
レイアウトと中心メトリクスの微調整
現代的なラウンドされたプログレスリングとカスタムの中心ラベルフォントを適用することで、標準的なゲージは洗練されたダッシュボードカードに変化します。
1. 中心ラベル表示付きの洗練されたリングゲージ
従来の針を非表示にし、太めでラウンドされたプログレスリングと大きな中央テキストを組み合わせて、洗練された現代的なUIコンポーネントを作成します：
option = {
series: [
{
type: 'gauge',
startAngle: 180,
endAngle: 0,
min: 0,
max: 100,
splitNumber: 5,
itemStyle: {
color: '#5470c6',
shadowColor: 'rgba(0,138,255,0.45)',
shadowBlur: 10,
shadowOffsetX: 2,
shadowOffsetY: 2
},
progress: {
show: true,
roundCap: true,
width: 18
},
pointer: {
show: false // ポインター針を非表示にして、スムーズなリング表示を実現
},
axisLine: {
roundCap: true,
lineStyle: {
width: 18
}
},
axisTick: { show: false },
splitLine: { show: false },
axisLabel: { show: false },
title: {
offsetCenter: [0, '20%'],
fontSize: 14,
color: '#666'
},
detail: {
offsetCenter: [0, '-10%'],
valueAnimation: true,
formatter: '{value}%',
fontSize: 32,
fontWeight: 'bold',
color: '#333'
},
data: [
{
value: 78,
name: 'プロジェクト進捗'
}
]
}
]
};
戦略的なベストプラクティス
- 範囲を絞り込む：ゲージは単一のメトリクスを表示するために大きな視覚的スペースを占めます。すぐに状態を評価する必要がある重要な優先度の高いメトリクスに限定して使用してください。
- 色の意味を明確に使う：しきい値の色帯を普遍的な基準（例：安全は緑、注意はオレンジ/黄色、危険は赤）に合わせて、ユーザーが正確な数値を読まなくても状態を判断できるようにします。
- ポインターなしのリングレイアウトを検討する：デジタルダッシュボードやモバイル画面では、ポインターなしの弧状プログレスゲージは、従来の針メーターと比べてより洗練された見た目になり、垂直方向の高さをより小さくできます。