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

Highcharts2026-08-06 10:36

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

最常见写法是：

javascript 复制代码

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 () {
  const chart = Highcharts.charts[0];
  const series = chart.series[0];
  const x = (new Date()).getTime();
  const y = 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：是否动画更新

实时折线常见用法

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

javascript 复制代码

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

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

官方文档

series.addPoint: api.highcharts.com/class-refer...
实时数据示例: www.highcharts.com/docs/workin...