ARTICLE DETAIL

建站实战干货

来自一线的建站与推广经验沉淀,每一条都经过真实交付验证。

用Highcharts如何动态向一个序列添加点-示列讲解

2026/8/7 8:15:43 拓冰建站 浏览量
用Highcharts如何动态向一个序列添加点-示列讲解

动态向 Highcharts 序列添加点通常用series.addPoint()

最常见写法是:

Highcharts.chart('container',{chart:{type:'line'},title:{text:'动态添加点'},xAxis:{type:'datetime'},series:[{name:'随机数据',data:[[Date.UTC(2026,7,5,10,0,0),10],[Date.UTC(2026,7,5,10,1,0),12]]}]});setInterval(function(){constchart=Highcharts.charts[0];constseries=chart.series[0];constx=(newDate()).getTime();consty=Math.round(Math.random()*100);series.addPoint([x,y],true,false);},1000);


参数说明

series.addPoint(point, redraw, shift, animation)

  • point:要添加的数据点,例如12[x, y],或对象{ x, y }
  • redraw:是否立即重绘,通常设为true
  • shift:是否移除最早的一个点,适合实时曲线
  • animation:是否动画更新

实时折线常见用法

如果你希望图表像监控面板一样持续滚动,可以用:

series.addPoint([x,y],true,true);

这样每添加一个新点,就会移除最旧的点。

官方文档

  • series.addPoint: https://api.highcharts.com/class-reference/Highcharts.Series#addPoint
  • 实时数据示例: https://www.highcharts.com/docs/working-with-data/live-data