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

实战案例创建一个实时动态刷新的平滑折线图效果每秒自动新增一个数据点自动滚动、自动丢弃旧数据永远保持最新 20 个点核心功能✅每秒自动刷新一次✅带脉冲扩散动画新增点时扩散圆圈✅时间轴自动滚动✅本地时间显示✅鼠标悬浮可查看精确时间与数值✅平滑曲线美观流畅THML代码!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title实时动态数据图表 - Highcharts/title !-- 引入 Highcharts -- script srchttps://cdn.jsdelivr.net/npm/highcharts10.3.3/highcharts.js/script style #container { width: 100%; height: 80vh; margin: 0 auto; } /style /head body div idcontainer/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}/bbr/, 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核心功能说明(1) 初始化数据生成最近 20 秒的历史随机数据让图表打开就有内容。(2) 定时器刷新setInterval(..., 1000)每 1 秒生成一个新的随机数 当前时间添加到图表。(3) 自动滚动series.addPoint([x,y], true, true)第 3 个参数true自动移除最早的点保持长度不变实现滚动效果(4) 脉冲动画插件新增点时自动画一个扩散并消失的圆形光圈视觉效果极强适合监控大屏。4. 适用场景实时监控大屏传感器数据展示服务器状态监控随机数据模拟物联网数据实时展示✅ 使用方法复制全部代码新建文件 → 粘贴 → 保存为chart.html双击打开即可看到动态图表