Lightningchart JS 中 X 轴的自定义日期时间

Question

我有这样的 X 和轴，它的 15 秒图表。

["2020-05-22 14:20:22", "173.9"]
["2020-05-22 14:20:40", "175.3"]
["2020-05-22 14:20:58", "172.4"]

我试着像下面这样添加

for(var key in json)
{

    var xTime = stringToDate(json[key][0]);
    var yVal  =  parseFloat(json[key][1]);
    series.add({ x: timer, y: yVal})

}

function stringToDate(s)  {
  s = s.split(/[-: ]/);
  return new Date(s[0], s[1]-1, s[2], s[3], s[4], s[5]);
}

但是图表在 x 轴上呈现奇怪的值

Answer 1

LightningChart JS 的日期时间轴期望以毫秒值接收数据。它不直接支持 Date 对象。因此，如果您有时间作为 Date 对象，那么如果时间在 Y 轴上，则需要调用 getTime() method to get the time as milliseconds. This data can then be displayed by in the chart as time when using a AxisTickStrategies.DateTime on the axis that has the time values. If you want to have the DateTime axis tick strategy by default when adding a series to chart you can use defaultAxisXTickStrategy or defaultAxisYTickStrategy。

当您显示当前时间或接近当前时间时，您将需要使用 origin 作为值并将时间添加为与原始时间的偏移量。

const dateOrigin = new Date()
const chart = lightningChart().ChartXY({
    defaultAxisXTickStrategy: AxisTickStrategies.DateTime(dateOrigin)
})

const series = chart.addLineSeries()
const xTime = new Date(new Date().getTime() + 100000000)
const yVal = 1
series.add({ x: xTime.getTime() - dateOrigin.getTime(), y: yVal})

请参阅下面的工作示例。

const {
    lightningChart,
    AxisTickStrategies
} = lcjs

// Create a XY Chart.
const dateOrigin = new Date()
const chart = lightningChart().ChartXY({
    defaultAxisXTickStrategy: AxisTickStrategies.DateTime(dateOrigin)
})

const series = chart.addLineSeries()
series.setCursorInterpolationEnabled(false)

const data = [
    ["2020-05-22 14:20:22", "173.9"],
    ["2020-05-22 14:20:40", "175.3"],
    ["2020-05-22 14:20:58", "172.4"]
]

function stringToDate(s)  {
  s = s.split(/[-: ]/);
  return new Date(s[0], s[1]-1, s[2], s[3], s[4], s[5]);
}

for(var key in data)
{
    var xTime = stringToDate(data[key][0]);
    var yVal  =  parseFloat(data[key][1]);
    series.add({ x: xTime.getTime() - dateOrigin.getTime(), y: yVal})
}

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

Lightningchart JS 中 X 轴的自定义日期时间

Custom DateTime in X axis in Lightningchart JS

javascript

lightningchart