当前位置：首页 > news >正文

Highcharts图表实战案例｜开发每秒更新的曲线图

news 2026/6/2 11:07:28

实战案例：

创建一个实时动态刷新的平滑折线图效果：每秒自动新增一个数据点，自动滚动、自动丢弃旧数据，永远保持最新 20 个点

核心功能

✅每秒自动刷新一次✅带脉冲扩散动画（新增点时扩散圆圈）✅时间轴自动滚动✅本地时间显示✅鼠标悬浮可查看精确时间与数值✅平滑曲线，美观流畅

THML代码

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>实时动态数据图表 - Highcharts</title> <!-- 引入 Highcharts --> <script src="https://cdn.jsdelivr.net/npm/highcharts@10.3.3/highcharts.js"></script> <style> #container { width: 100%; height: 80vh; margin: 0 auto; } </style> </head> <body> <div id="container"></div> <script> // 图表加载完成后，启动定时器，每秒添加一个新数据点 const onChartLoad = function () { const chart = this, series = chart.series[0]; setInterval(function () { const x = (new Date()).getTime(); // 当前时间 const y = Math.random(); // 随机数值 // 添加新点，自动更新图表 series.addPoint([x, y], true, true); }, 1000); }; // 初始化前20个历史数据 const data = (function () { const data = []; const time = new Date().getTime(); for (let i = -19; i <= 0; i += 1) { data.push({ x: time + i * 1000, y: Math.random() }); } return data; }()); // 插件：新增数据点时显示脉冲扩散动画 Highcharts.addEvent(Highcharts.Series, 'addPoint', e => { const point = e.point; const series = e.target; if (!series.pulse) { series.pulse = series.chart.renderer.circle().add(series.markerGroup); } setTimeout(() => { series.pulse .attr({ x: series.xAxis.toPixels(point.x, true), y: series.yAxis.toPixels(point.y, true), r: series.options.marker.radius, opacity: 1, fill: series.color }) .animate({ r: 20, // 扩散半径 opacity: 0 // 逐渐消失 }, { duration: 1000 }); }, 1); }); // 渲染图表 Highcharts.chart('container', { chart: { type: 'spline', // 平滑折线图 events: { load: onChartLoad // 加载后启动动态刷新 } }, time: { useUTC: false // 使用本地时间 }, // 标题 title: { text: '实时动态随机数据图表' }, // 无障碍新数据提示 accessibility: { announceNewData: { enabled: true } }, // X轴：时间轴 xAxis: { type: 'datetime', title: { text: '时间' }, tickPixelInterval: 150 }, // Y轴 yAxis: { title: { text: '数值' }, plotLines: [ { value: 0, width: 1, color: '#808080' } ] }, // 鼠标悬浮提示框 tooltip: { headerFormat: '<b>{series.name}</b><br/>', pointFormat: '{point.x:%Y-%m-%d %H:%M:%S}<br/>数值：{point.y:.2f}' }, // 隐藏图例、导出按钮 legend: { enabled: false }, exporting: { enabled: false }, // 数据系列 series: [ { name: '随机数据', lineWidth: 2, color: Highcharts.getOptions().colors[2], data: data } ] }); </script> </body> </html>