• <menu id="w2i4a"></menu>
  • logo LightningChart JS中文文檔

    時間序列


    立即下載LightningChart JS

    LightningChart JS數(shù)據(jù)值總是用JavaScript數(shù)字來描述,當涉及到時間序列數(shù)據(jù)時,時間戳被描述為自ECMAScript紀元以來的毫秒數(shù)。

    這聽起來可能很復雜但它很常見并且簡單。

    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 
    })

    默認情況下軸顯示數(shù)字刻度,當軸間隔由時間戳配置時這一點意義不大,這可以通過激活時間軸上的DateTime刻度來改進:

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

    DateTime軸顯示帶有“2023年1月1日”等文本的刻度標簽,有關自定義格式請參見日期時間刻度標簽格式。對于較小的時間間隔,最好使用AxisTickStrategiesTime。

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

    這將導致類似于“00:00:00”(hh:mm:ss)的格式,并在需要時顯示毫秒和更小的單位。

    DateTime軸間隔限制

    如上所示,ECMAScript時間戳是非常大的數(shù)字(大約10*12),LightningChart軸間隔有一些限制(源于WebGL的使用),限制了可配置的開始和結束軸間隔。有關這方面的更多信息,請參閱變焦范圍限制。

    在DateTime軸的情況下,當軸范圍(結束-開始)小于1天時達到實際限制——例如,縮放以查看時間序列數(shù)據(jù)中的單個秒。

    有一些變通方法可以解決這個問題,最廣泛使用的是使用日期起源,這是一個三步操作:

    1. 將軸距任意移動,這樣開始將接近于零(而不是非常大的數(shù)字)。
    2. 同時將數(shù)據(jù)時間坐標移動相同的量,對每個數(shù)據(jù)點重復。
    3. 將數(shù)據(jù)的變化通知LightningChart,這將調(diào)整軸和光標格式,使其看起來像預期的那樣即使數(shù)據(jù)被移動。

    通常使用日期起源意味著添加如下代碼:

    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. 
    )

    使用日期起源解決方案會帶來額外的復雜性,并且還會給數(shù)據(jù)輸入增加一些性能開銷。目前,在大多數(shù)需要以小于1天的縮放范圍顯示時間序列數(shù)據(jù)的應用程序中,這是一個必然的弊端。

    掃碼咨詢


    添加微信 立即咨詢

    電話咨詢

    客服熱線
    023-68661681

    TOP
    三级成人熟女影院,欧美午夜成人精品视频,亚洲国产成人乱色在线观看,色中色成人论坛 (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })();