Highcharts 动态图（Dynamic / Real-time Charts）详解
Highcharts 最强大的特性之一就是支持实时动态更新，无需刷新页面即可平滑添加、修改或删除数据点，非常适合以下场景：
- 实时监控仪表盘（如服务器负载、传感器数据）
- 股票/加密货币价格走势
- 网站流量统计
- IoT 数据可视化
- 直播数据展示
核心动态更新方法
| 方法 | 用途 | 示例 |
|---|---|---|
series.addPoint(point, redraw, shift, animation) | 添加单个新数据点 | series.addPoint([x, y], true, true) |
series.setData(data, redraw) | 替换整个系列数据 | series.setData(新数组) |
point.update(value, redraw) | 更新单个点 | points[0].update(新值) |
chart.addSeries(options) | 添加新系列 | chart.addSeries({name: '新系列', data: [...]}) |
series.remove() | 删除系列 | chart.series[0].remove() |
chart.update(options) | 批量修改图表配置（如切换类型） | chart.update({chart: {type: 'column'}}) |
1. 经典实时折线图（每秒添加新点，保持最近 N 个点）
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Highcharts 实时动态折线图</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 900px; height: 500px; margin: 50px auto;"></div>
<script>
Highcharts.chart('container', {
chart: {
type: 'spline',
animation: Highcharts.svg,
marginRight: 10,
events: {
load: function () {
var series = this.series[0];
setInterval(function () {
var x = (new Date()).getTime(), // 当前时间戳
y = Math.sin(x / 1000) * 50 + 50 + Math.random() * 10; // 模拟数据
series.addPoint([x, y], true, true, true); // 添加点并动画
}, 1000);
}
}
},
time: { useUTC: false },
title: { text: '实时传感器数据监控' },
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
labels: { format: '{value:%H:%M:%S}' }
},
yAxis: {
title: { text: '数值' },
min: 0,
max: 120
},
tooltip: {
formatter: function () {
return '<b>' + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '</b><br/>' +
'值: <b>' + this.y.toFixed(2) + '</b>';
}
},
legend: { enabled: false },
exporting: { enabled: false },
series: [{
name: '传感器A',
data: (function () {
var data = [], time = (new Date()).getTime(), i;
for (i = -19; i <= 0; i += 1) {
data.push({
x: time + i * 1000,
y: Math.sin((time + i * 1000) / 1000) * 50 + 50
});
}
return data;
}())
}]
});
</script>
</body>
</html>关键参数解释：
addPoint([x, y], true, true, true)：- 第2个 true：立即重绘
- 第3个 true：shift（当点数超出显示范围时，自动删除最旧点）
- 第4个 true：开启动画
2. 多系列实时更新
load: function () {
var chart = this;
setInterval(function () {
var x = (new Date()).getTime();
chart.series[0].addPoint([x, Math.random() * 100], true, true);
chart.series[1].addPoint([x, Math.random() * 50 + 30], true, true);
chart.series[2].addPoint([x, Math.random() * 30 + 60], true, true);
}, 2000);
}3. 从外部接口获取数据（Ajax 示例）
setInterval(function () {
fetch('/api/realtime-data') // 替换为你的后端接口
.then(response => response.json())
.then(data => {
var x = (new Date()).getTime();
chart.series[0].addPoint([x, data.temperature], true, true);
chart.series[1].addPoint([x, data.humidity], true, true);
});
}, 5000);4. 动态切换图表类型
// 按钮点击事件示例
document.getElementById('switchBtn').addEventListener('click', function () {
chart.update({
chart: { type: chart.options.chart.type === 'line' ? 'column' : 'line' }
});
});5. 性能优化建议（大数据量时）
- 使用 Boost 模块（支持百万级点渲染）：
<script src="https://code.highcharts.com/modules/boost.js"></script>- 限制显示点数（shift: true）
- 关闭不必要动画：
animation: false - 使用
turboThreshold: 0禁用阈值限制
6. 其他动态图推荐类型
- 实时柱状图：type: ‘column’（新点进来时柱子生长动画很酷）
- 实时区域图：type: ‘areaspline’
- 实时散点/气泡图：适合轨迹追踪
动态图是 Highcharts 的杀手级功能，几乎所有图表类型都支持实时更新。
如果你需要：
- 股票K线实时图（Highcharts Stock）
- 仪表盘（gauge）动态指针
- WebSocket 实时推送示例
- 在 Vue/React 中的封装方式
告诉我你的具体场景，我可以提供完整可运行的代码！
