javascript - 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 轴上呈现奇怪的值

标签： javascriptlightningchart

Answer 1

LightningChart JS 的 DateTime 轴期望以毫秒值接收数据。它不Date直接支持对象。因此，如果您有时间作为Date对象，那么您需要调用getTime()方法以获取时间为毫秒。AxisTickStrategies.DateTime然后，当在具有时间值的轴上使用 a 时，该数据可以在图表中显示为时间。如果您希望在将系列添加到图表时默认使用 DateTime 轴刻度策略，defaultAxisXTickStrategy或者defaultAxisYTickStrategy如果时间位于 Y 轴上。

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

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>