時間序列

---

立即下載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天的縮放范圍顯示時間序列數據的應用程序中，這是一個必然的弊端。