将数据添加到Lightning chart中的现有图表系列中

Question

我有一个react js应用程序，在其中，我使用了一个点序列来绘制图表中的数据。

我得到了要显示的图表。但是，我希望实时数据绑定到图表中。

例如：如果一张图表在加载时包含10个点，则将其标记为图表。然后在5秒的时间间隔内，我将从套接字中获取数据，我必须将其添加到现有图表中。所以现在，图表中必须有15个点，当数据进入时，图表必须从左向右移动

这是我的代码，用于在启动时绑定数据

import {
lightningChart,
AxisTickStrategies,
LegendBoxBuilders,
Themes,
PointShape,
translatePoint,
AxisScrollStrategies
} from "@arction/lcjs";

const dateOrigin = new Date(startingDate);
const chart = lightningChart()
.ChartXY({
container: id,
theme: Themes.lightNew,
columnIndex: 0,
columnSpan: 1,
rowIndex: 0,
rowSpan: 1
})
.setTitle(id.split(" ")[1]);
const originDate = new Date(moment().subtract(1, 'days'))
const xAxis = chart.getDefaultAxisX().setTickStrategy(
// Use DateTime TickStrategy for this Axis
AxisTickStrategies.DateTime,
// Modify the DateOrigin of the TickStrategy
// (tickStrategy) => tickStrategy.setDateOrigin(dateOrigin)
(tickStrategy) => tickStrategy.setDateOrigin(originDate)
);
const yAxis = chart
.getDefaultAxisY()
.fit(true)
.setScrollStrategy(undefined)
.setInterval(-20, 20)
.setTitle("");
const series = chart
.addPointSeries({
xAxis: xAxis,
yAxis: yAxis,
pointShape: PointShape.Circle
})
.setName("Actual");
const dataFrequency = ((((600 - 600 * 250) - (60 * 60 * 100)) - (1000 * 2)) - 900)
//0-24 hrs
chart.getDefaultAxisX().setInterval(92 * dataFrequency, 60);
series.add(
sensorData.map((point) => ({
//x: new Date(point.x).getTime() - startingDate.getTime(),
x: new Date(point.x).getTime() - new Date(startingDate).getTime(),
y: point.y, // * 1000,
}))
);

请让我知道如何将套接字中的输入数据添加到图表中的现有点。

提前感谢。

Answer 1

您可以通过另一个对add方法的调用将更多数据点附加到PointSeries，方法与您将其用于初始数据的方法相同。

因此，保留对PointSeries对象的引用，当您从websocket接收到新数据时，只需使用与以前完全相同的add方法将数据附加到以前的数据点上。

对于"；当数据点进入时从左向右移动图表"；，您应该将X轴滚动策略配置为渐进式。请参考此心电图图示例以获取代码参考(第44行，chart.getDefaultAxisX()...(。

对于Stack Overflow历史完整性的方法，我还将在此处添加突出显示的代码行：

// Configure X Axis as progressive scrolling with value interval of 1000
chart.getDefaultAxisX().setInterval(0, 1000).setScrollStrategy(AxisScrollStrategies.progressive)