timestamp - C3.js - 绘制从 InfluxDB 获取的时间序列时如何指定时间戳格式

Question

influxDB 时间戳如下所示:

2015-01-29T21:55:43.702900257Z

问题是我应该为 x-axis 使用哪些选项当我用 C3.js 生成图表时

我得到的错误:

"Failed to parse x '2015-01-29T21:55:43.702900257Z' to Date object"

也许这个 jsfiddle将帮助您进行一些快速测试...我认为问题出在时间格式上，但欢迎提供任何其他建议:

axis: {
    x: {
        type: 'timeseries',
        tick: {
            format: '%Y-%m-%d'
        }
    }
}

Answer 1

首先，我必须添加 xFormat因为作为 @das Keks说 here :

"The format in the axis Object just defines how the date will be displayed. If you want to specify the format for the date parsing you have to use xFormat in the data object."

data: {
    x: 'x',
    xFormat: '%Y-%m-%dT%H:%M:%S.%LZ',
    columns: [
        ['x', ... ],
        ['data1', ... ]
    ]
}

对于 xFormat options见 D3.js/ Time Formatting

其次，为了获得正确的格式，我通过首先使用 Date() 创建一个 Date 对象来更改每个时间戳。然后使用 dateObj.toISOString() .例如，打开您的控制台并尝试以下操作:

> new Date('2015-09-30T12:21:41.447494312Z').toISOString();
> "2015-09-30T12:21:41.447Z"