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

Posted 2023-02-15

【中文标题】C3.js - 如何在绘制取自 InfluxDB 的时间序列时指定时间戳格式

【英文标题】：C3.js - How to specify the timestamp format when plotting timeseries taken from InfluxDB

【发布时间】：2016-01-01 23:51:42

【问题描述】：

influxDB 时间戳如下所示：

2015-01-29T21:55:43.702900257Z

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

我得到的错误：

“未能将 x '2015-01-29T21:55:43.702900257Z' 解析为 Date 对象”

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

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

【问题讨论】：

InfluxDB 发出 RFC3339 时间戳。快速搜索显示 few recommendations 用于在 javascript 中解析 RFC3339 时间戳。

【参考方案1】：

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

“轴对象中的格式只是定义了日期的显示方式。如果要指定日期解析的格式，则必须在数据对象中使用xFormat。 "

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"