Highcharts 测量图（Gauge Chart）详解
在中文教程（如菜鸟教程）中，“测量图”通常指 Highcharts 的仪表图（Gauge Chart），也称为仪表盘或速度表图。它是一种圆形图表，使用指针（dial）在刻度盘上显示单个或多个关键指标值，非常适合展示 KPI、进度、速度、温度等单值测量场景。
Highcharts 提供了两种主要仪表图类型：
- gauge：经典指针式仪表图（带指针和刻度）
- solidgauge：实心填充式仪表图（填充弧形进度条，常用于进度环或现代仪表盘）
环境配置（必须引入额外模块）
仪表图需要额外加载模块：
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script> <!-- gauge 必须 -->
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script> <!-- solidgauge 必须 -->1. 经典指针式测量图（Gauge）示例 – 速度表
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Highcharts 测量图示例 - 指针式仪表</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
</head>
<body>
<div id="container" style="width: 600px; height: 400px; margin: 50px auto;"></div>
<script>
Highcharts.chart('container', {
chart: {
type: 'gauge', // 关键：指针式仪表图
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: { text: '汽车速度表' },
pane: {
startAngle: -150, // 起始角度
endAngle: 150, // 结束角度
background: [{
backgroundColor: { linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, stops: [[0, '#FFF'], [1, '#333']] },
borderWidth: 0,
outerRadius: '109%'
}, {
backgroundColor: { linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, stops: [[0, '#333'], [1, '#FFF']] },
borderWidth: 1,
outerRadius: '107%'
}, {
backgroundColor: '#DDD',
borderWidth: 0,
outerRadius: '105%',
innerRadius: '103%'
}]
},
yAxis: {
min: 0,
max: 200,
title: { text: 'km/h' },
plotBands: [{ // 颜色分区
from: 0, to: 120, color: '#55BF3B' }, // 绿色安全区
{ from: 120, to: 160, color: '#DDDF0D' }, // 黄色警示区
{ from: 160, to: 200, color: '#DF5353' } // 红色危险区
}]
},
series: [{
name: '速度',
data: [80], // 当前值
tooltip: { valueSuffix: ' km/h' },
dataLabels: { enabled: true }
}]
});
</script>
</body>
</html>2. 实心填充式测量图（Solid Gauge）示例 – 进度环
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
<script>
Highcharts.chart('container', {
chart: { type: 'solidgauge' }, // 关键：实心仪表图
title: { text: '任务完成进度' },
pane: {
center: ['50%', '85%'],
size: '140%',
startAngle: -90,
endAngle: 90,
background: { outerRadius: '100%', innerRadius: '60%', shape: 'arc' }
},
yAxis: {
min: 0,
max: 100,
stops: [[0.1, '#55BF3B'], [0.5, '#DDDF0D'], [0.9, '#DF5353']],
lineWidth: 0,
tickWidth: 0,
minorTickInterval: null,
tickAmount: 2,
title: { y: -70, text: '进度' },
labels: { y: 16 }
},
plotOptions: {
solidgauge: {
dataLabels: { y: 5, borderWidth: 0, useHTML: true }
}
},
series: [{
name: '进度',
data: [68],
dataLabels: { format: '<div style="text-align:center"><span style="font-size:25px">{y}%</span></div>' }
}]
});
</script>3. 常用配置总结
| 配置项 | 说明与推荐值 |
|---|---|
chart.type | ‘gauge’（指针式） / ‘solidgauge’（实心填充式） |
pane.startAngle/endAngle | -150/150（经典速度表） / -90/90（半圆进度） |
yAxis.plotBands | 颜色分区（绿色安全、黄色警示、红色危险） |
yAxis.stops | 渐变色（solidgauge 常用） |
series.data | 单值数组，如 [当前值] |
4. 动态更新示例（实时变化）
在 gauge 中可使用 point.update() 动态更新指针：
setInterval(function () {
chart.series[0].points[0].update(Math.random() * 200);
}, 2000);仪表图（测量图）是 Highcharts 中非常适合单值 KPI 展示的类型，视觉冲击强，常用于仪表盘系统。
如果你需要：
- 多指针仪表图
- 时钟样式
- VU 音量表
- 动态实时测量图
告诉我具体需求，我可以提供完整代码示例！
