C3.js时间序列图表问题：秒级时间轴显示NaN如何解决？

你碰到的X轴全是NaN的问题，本质是时间解析格式不匹配！之前年份的例子里你用了xFormat: '%Y'刚好对应纯年份的字符串，但现在你的时间是带时分秒的YYYY-MM-DD HH:mm:ss格式，C3没办法自动识别，所以才会解析失败显示NaN。

下面是修正后的完整可运行代码，重点看标出来的关键部分：

var chart = c3.generate({
    data: {
        x: 'x',
        // 关键：这里的xFormat要和你传入的时间字符串格式完全对应
        xFormat: '%Y-%m-%d %H:%M:%S', 
        columns: [
            ['x', '2013-01-01 12:00:00', '2013-01-02 12:00:05', '2013-01-03 12:00:10', '2013-01-04 12:00:15', '2013-01-05 12:00:20', '2013-01-10 12:00:25', '2013-01-15 12:00:30', '2013-02-15 12:00:35'],
            ['data1', 30, 200, 100, 400, 150, 250, 400],
            ['data2', 830, 1200, 1100, 1400, 1150, 1250, 1500],
        ],
        axes: {
            data2: 'y2'
        },
    },
    axis: {
        x: {
            type: 'timeseries',
            tick: {
                // 这里可以自定义显示格式，比如想简化显示可以用'%Y-%m-%d %H:%M'
                format: '%Y-%m-%d %H:%M:%S' 
            }
        },
        y2: {
            show: true
        }
    },
});

几个要注意的细节： #

• xFormat的格式必须和你传入的时间字符串完全匹配，包括空格、分隔符（-和:）、大小写（比如%H是24小时制，%h是12小时制，别写错）
• 如果你的时间字符串是YYYY-MM-DDTHH:mm:ss（带T分隔符），那xFormat就要改成'%Y-%m-%dT%H:%M:%S'
• tick.format是控制X轴刻度显示的格式，和解析用的xFormat可以不一样，根据你的视觉需求调整就行

这样修改后，C3就能正确解析你的秒级时间数据，图表就能正常渲染啦！

内容的提问来源于stack exchange，提问作者Parthiban Soundram