Lightningchart JS中X轴上的自定义DateTime

debugcn 发表于 Dev

格雷西·威廉姆斯

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

斯内克

LightningChart JS的DateTime轴期望以毫秒值接收数据。它不Date直接支持对象。因此，如果您将时间作为Date对象，则需要调用getTime()method来获取时间（以毫秒为单位）。然后，在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/[email protected]/dist/lcjs.iife.js"></script>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-04-2

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章

Lightningchart JS中X轴上的自定义DateTime

Lightningchart JS中X轴上的自定义DateTime

轴上的自定义刻度大小（d3js）

Kibana中的自定义X轴

gnuplot：在x2轴上设置自定义标签

D3js堆栈图X轴自定义

JFreeChart自定义x轴标签

R中次要y轴上的自定义标签

在Sigma js中的节点上使用自定义图像

在Flot中设置自定义X轴值

初始化图表后如何在LightningChart JS中添加defaultAxisXTickStrategy？

如何删除图例并向LightningChart js添加新图例？

在LightningChart JS中显示完整日期而不是仅显示hh：ss的方法？

动态更改散点图的大小和形状-LightningChart JS

EllipseSeries中的Maxpointcount-LightningChart JS

更改光标线的颜色-LightningChart

在悬停的X轴上显示自定义刻度

Matplotlib：在自定义格式的x轴上显示所有日期

Lightningchart JS错误报告：仪表板交易示例，布林带的一部分消失了

如何在qplot（）中自定义x轴上的值？

gnuplot：在x2轴上设置自定义标签

JFreeChart DTSC上的自定义X轴标签

R中次要y轴上的自定义标签

C3.js自定义X轴

x轴上的自定义D3`tickValue`-水平条形图

PowerBI自定义X轴

在c3.js中获取x轴值以自定义工具提示？

使用R中的日期自定义x轴标签

使用 Highcharts 在 x 轴上显示自定义值

Highcharts：x 轴上完全自定义的标签位置

在 LightningChart 中，如何锁定 2 个或更多轴的 Y 轴以保持零始终同步？