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'
        ...

c3.js 显示混乱

c3.js messed up display

javascript

c3.js