c3.js显示混乱

Question

我正在尝试使用json中的c3.js显示样条图，并将x轴显示为时间序列。

x轴似乎被弄乱了。它不识别日期，而是仅显示一列。您可以查看下面的图像。

window.all = [
    {
        report_date: "2019-03-15 15:00:00",
        swipes_count: 132556,
        results_count: 123,
    },
    {
        report_date: "2019-03-15 15:05:00",
        swipes_count: 142556,
        results_count: 356,
    },
    {
        report_date: "2019-03-15 15:10:00",
        swipes_count: 156556,
        results_count: 678,
    },
    {
        report_date: "2019-03-15 15:15:00",
        swipes_count: 184322,
        results_count: 975,
    },
    {
        report_date: "2019-03-15 15:20:00",
        swipes_count: 194322,
        results_count: 1035,
    },
    {
        report_date: "2019-03-15 15:25:00",
        swipes_count: 198322,
        results_count: 1456,
    }
];

c3.generate({
    bindto: '#' + id, // id of chart wrapper
    data: {
        json: window[key],
        keys: {
            x: 'report_date',
            value: ['swipes_count', 'results_count'],
        },
        labels: true,
        type: 'spline'
    },
    axis: {
        x:{
            type: "timeseries",
            tick:{
                format: "%Y-%m-%d %H:%M:%S"
            }
        }
    },
    padding: {
        bottom: 0,
        top: 0
    },
});

Answer 1

您需要在数据配置中添加一个 xFormat 字符串（与壁虱格式声明中的字符串基本相同），以便c3知道如何解析日期时间

        ...
        keys: {
            x: 'report_date',
            value: ['swipes_count', 'results_count'],
        },
        xFormat: "%Y-%m-%d %H:%M:%S",
        labels: true,
        type: 'spline'
        ...