时间序列

---

立即下载LightningChart JS

LightningChart JS数据值总是用JavaScript数字来描述，当涉及到时间序列数据时，时间戳被描述为自ECMAScript纪元以来的毫秒数。

这听起来可能很复杂但它很常见并且简单。

const date = new Date(2022, 0, 1) // 1st Jan 2022 
const timestamp = date.getTime() // 1640988000000 
const dataPoint = { 
x: timestamp, 
y: Math.random() 
}

const dataPoint = { 
x: Date.now(), 
y: Math.random() 
}

分别地，表示时间的轴也应该作为时间戳进行测量，例如要显示时间X轴从2022年1月开始到结束：

chart.getDefaultAxisX().setInterval({ 
start: new Date(2022, 0, 1).getTime(), // 1st Jan 2022 
end: new Date(2022, 0, 31).getTime() // 31st Jan 2022 
})

默认情况下轴显示数字刻度，当轴间隔由时间戳配置时这一点意义不大，这可以通过激活时间轴上的DateTime刻度来改进：

chart.getDefaultAxisX().setTickStrategy(AxisTickStrategies.DateTime)

DateTime轴显示带有“2023年1月1日”等文本的刻度标签，有关自定义格式请参见日期时间刻度标签格式。对于较小的时间间隔，最好使用AxisTickStrategiesTime。

chart.getDefaultAxisX().setTickStrategy(AxisTickStrategies.Time)

这将导致类似于“00:00:00”(hh:mm:ss)的格式，并在需要时显示毫秒和更小的单位。

DateTime轴间隔限制

如上所示，ECMAScript时间戳是非常大的数字(大约10*12)，LightningChart轴间隔有一些限制(源于WebGL的使用)，限制了可配置的开始和结束轴间隔。有关这方面的更多信息，请参阅变焦范围限制。

在DateTime轴的情况下，当轴范围(结束-开始)小于1天时达到实际限制——例如，缩放以查看时间序列数据中的单个秒。

有一些变通方法可以解决这个问题，最广泛使用的是使用日期起源，这是一个三步操作：

1. 将轴距任意移动，这样开始将接近于零(而不是非常大的数字)。
2. 同时将数据时间坐标移动相同的量，对每个数据点重复。
3. 将数据的变化通知LightningChart，这将调整轴和光标格式，使其看起来像预期的那样即使数据被移动。

通常使用日期起源意味着添加如下代码：

const dateOrigin = new Date() // offset time coordinates by current time. 
const dateOriginTime = dateOrigin.getTime() // cache timestamp that matches `dateOrigin` for use later. 

// let timeSeriesData: { timestamp: number, measurement: number }[] 
const timeSeriesDataShifted = timeSeriesData.map((dataPoint) => ({ 
x: dataPoint.timestamp - dateOriginTime, // shift time coordinates to start close to 0 as a workaround to zoom range limitations. 
y: dataPoint.measurement
})) 
lineSeries.add(timeSeriesDataShifted) 

chart.getDefaultAxisX().setTickStrategy( 
AxisTickStrategies.DateTime, 
(tickStrategy) => tickStrategy.setDateOrigin(dateOrigin) // tell LCJS how much time coordinates are shifted. 
)

使用日期起源解决方案会带来额外的复杂性，并且还会给数据输入增加一些性能开销。目前，在大多数需要以小于1天的缩放范围显示时间序列数据的应用程序中，这是一个必然的弊端。