Highcharts如何动态向一个序列添加点

要动态向一个序列添加点，可以使用 addPoint 方法。

以下是一个简单的示例，展示如何在 Highcharts 中实现这一功能。请注意，这里使用了一些虚拟数据。

let chart;

function requestData() {
const series = chart.series[0];
const point = [Date.now(), Math.random()];
const shift = series.data.length >= 20;

series.addPoint(point, true, shift);
setTimeout(requestData, 1000);
}

chart = Highcharts.chart('container', {
chart: {
type: 'line',
events: {
load: requestData
}
},
title: {
text: '动态数据更新示例'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
title: {
text: '值'
},
min: 0,
max: 1
},
series: [{
name: '随机数据',
data: []
}]
});

在这个示例中，requestData 函数每秒生成一个新的随机数据点，并将其添加到图表中。你可以根据需要调整数据生成逻辑。

注意：这段代码是在浏览器本地生成随机数据，并没有向服务器请求数据。若需要从服务器获取数据，应在 requestData 中使用 fetch。Highcharts 实时数据文档：Live data。

在 Highcharts 中，向已有序列添加点通常使用 series.addPoint()。下面的示例每秒添加一个随机值，并只保留最近 20 个点：

const now = Date.now();
const initialData = Array.from({ length: 20 }, (_, i) => [
now – (19 – i) * 1000,
Math.random()
]);

const chart = Highcharts.chart('container', {
chart: {
type: 'line',
events: {
load() {
const series = this.series[0];

setInterval(() => {
const point = [Date.now(), Math.random()];
series.addPoint(point, true, true);
}, 1000);
}
}
},
title: {
text: '动态添加数据点'
},
xAxis: {
type: 'datetime'
},
yAxis: {
min: 0,
max: 1,
title: {
text: '值'
}
},
series: [{
name: '随机数据',
data: initialData
}]
});

关键调用是：

series.addPoint(point, true, true);

• point：要添加的数据点。时间序列通常使用 [时间戳, 数值]；时间戳单位是毫秒。
• 第二个参数 true：添加后立即重绘图表。
• 第三个参数 true：移除最早的点，让序列保持固定长度。若不需要移除旧点，可改为 false。

这里用 chart.events.load 在图表加载后开始更新，并通过 this.series[0] 获取第一个序列。示例数据由浏览器随机生成；若要显示实际数据，可在定时回调中获取数据，再传给 addPoint()。