LightningChart JS - LineSeries / Progressive X 的損壞

Question

我在 LightningChart 中遇到了一個有趣的問題，它似乎正在破壞或以其他方式破壞我的數據，具體取決於它與圖表的 DateOrigin 的距離。 我的數據是每秒 1000 個樣本，我試圖一次顯示 1-2 周的數據。 我正在使用 ChartXY class，x 軸類型設置為“linear-highPrecision”，精度應為 1 毫秒，這就是我所需要的，我不再需要了，我正在創建一個 LineSeries 及其數據模式是 'ProgressiveX' 和 regularProgressiveStep: true。

這是在 DateOrigin 附近繪制數據時的樣子。

這是放大 DateOrigin 附近數據的樣子。

看起來棒極了！ 閃電圖正在做我想要的！

但是，我希望正確偏移此數據以顯示它是真實的絕對時間。

這是我將此數據偏移 14 天后的樣子。 我設置相對偏移的代碼如下所示。

ds.addArrayY(curve.data,step=1,start=14*24*60*60*1000)

好的，縮小看起來不錯，但是如果我們放大呢？

它已經失控了。 看起來 X 軸值被強制到 X 軸的某個較大步長。 從 DateOrigin 中 go 越遠，情況就越糟，我擔心這是引擎的一些內置行為，我期望太多，但是，它說它有 1ms 分辨率。 所以我希望這一點得到尊重。

這是我創建圖表的方法。

// Create a Line Chart.
const PumpsChart = lightningChart().ChartXY({
    // Set the chart into a div with id, 'target'. 
    // Chart's size will automatically adjust to div's size. 
    theme: Themes.lightGradient,
    container: 'PumpsChart',
    defaultAxisX: {
        type: 'linear-highPrecision'
    }
}).setTitle('') // Set chart title
.setTitleFont(new FontSettings({
    family: waveChartFontFamily,
    size: 20
}))
.setMouseInteractionWheelZoom(false)

axisPumpsChartDateTime = PumpsChart.getDefaultAxisX()
.setTickStrategy(
    AxisTickStrategies.DateTime, 
    (tickStrategy) => tickStrategy.setDateOrigin(waveDateOrigin))

axisPumpsChartPressurePSI = PumpsChart.getDefaultAxisY()
    .setTitle("Pressure (PSI)")
    .setInterval(0,10000,0,true)

這是我創建 LineSeries 的方法

newDataSeries = targetChart.chart.addLineSeries(
                                    { 
                                        yAxis: targetChart.axis,
                                        dataPattern: {
                                            pattern: 'ProgressiveX',
                                            regularProgressiveStep: true,
                                        }
                                     }
                                );

這是我向圖表添加數據的方法：

ds.addArrayY(curve.data,step=1,start=14*24*60*60*1000)

出於某些原因，我寧願不使用 AxisTickStrategies.DateTime 而不是 AxisTickStrategies.DateTime，我的數據跨越數周，100 小時太少，我對毫秒分辨率很好，我不需要更多，我需要以相對而非絕對時間呈現我的數據。

希望有一些我遺漏的參數可以調整以實現此目的。

編輯

好吧，當數據相對於原點 -636 小時偏移時，這種損壞也會發生在 Time tick strategy s 上。 我在將和不將 ProgressiveX 設置為 DataPattern.pattern 的情況下進行了嘗試。

**** 編輯 2 ****

好吧，我什至嘗試將采樣率降低到每秒 20 個樣本，然后將其改回 AxisTickStrategies.DateTime，由於某種原因，它正在“擠壓”這個神奇的所有點。25 秒間隔。

Answer 1

我試圖在類似的情況下生成一個參考應用程序 - 使用具有高分辨率時間數據（1000 Hz）的 DateTime 刻度。 下面的代碼片段應該在堆棧溢出中打開，生成一組相當大的測試數據（可能需要一段時間），並使用日期原點以高縮放范圍顯示它。

這對你有用嗎？ 如果是，那么您的應用程序中可能存在一些問題，您可以在此參考應用程序的幫助下發現這些問題。

 const { lightningChart, AxisTickStrategies } = lcjs const { createProgressiveTraceGenerator } = xydata createProgressiveTraceGenerator().setNumberOfPoints(1000 * 60 * 60 * 4).generate().toPromise().then((data) => { // Just for generating data set const dataStart = Date.now() return data.map((p) => ({ x: dataStart - 1000 * 60 * 60 * 4 + px, y: py })) }).then((data) => { // 1. Offset data X by date origin const dateOrigin = new Date() const tDateOrigin = dateOrigin.getTime() data = data.map((p) => ({ x: px - tDateOrigin, y: py })) const chart = lightningChart().ChartXY({ disableAnimations: true }) const axisX = chart.getDefaultAxisX().setTickStrategy(AxisTickStrategies.DateTime, (ticks) => ticks // 2. Inform Tick Strategy of date origin.setDateOrigin(dateOrigin), ) const series = chart.addLineSeries({ dataPattern: { pattern: 'ProgressiveX', regularProgressiveStep: true, }, }) series.add(data) chart.addLegendBox().add(chart) })

 <script src="https://unpkg.com/@arction/lcjs@3.4.0/dist/lcjs.iife.js"></script> <script src="https://unpkg.com/@arction/xydata@1.2.1/dist/xydata.iife.js"></script>

回顧您的問題，也許最初的問題是關於刻度格式的？ 當您放大這種情況時，它最終會在每個刻度上顯示幾秒鍾，而不是完整的時間。 這是問題嗎？ 如果是，那么問題在於格式化軸刻度，我將不得不看看可以做些什么。

Answer 2

會不會是32位浮點精度損失？ 以秒為單位的兩周等於1 209 600 ，並且log2(1_209_600) = 20.2 = 21 bits存儲空間。 32 位二進制浮點數的尾數只有 23 位，剩下 2 位用於小數部分，這可以解釋 0.25 的增量。

因此，如果我是正確的，您需要將 X position 精度提高到 64 位浮點數。 不過，您已經在使用"linear-highPrecision"軸模式，這將是我對解決方案的第一個猜測，據我所知，它實際上並沒有將數據精度提高到 64 位，只是提高了軸。 除非我錯過了另一種解決方案，否則您可能需要將數據拆分為單獨的系列。

編輯：我實際上不確定這是 LightningChart 的問題，現在我已經查過了。 OpenGL ES 3.0（WebGL 2 依賴於它，而 LightningChart 又依賴於它） 要求將“高精度”浮點參數存儲在 binary32 IEEE 754 標准浮點數中。

官方規范，p. 53 :

highp 浮點值以 IEEE 754 單精度浮點格式存儲。 Mediump 和 lowp 浮點值具有如下詳述的最小范圍和精度要求，並具有 IEEE 754 定義的最大范圍和精度。

所以鑒於這些信息，它似乎是 LCjs 中的一個錯誤導致了 WebGL 技術限制。