C3js时间序列无法显示连续线答案

【问题标题】：C3js timeseries can't show continuous lineC3js时间序列无法显示连续线
【发布时间】：2016-06-15 09:54:55
【问题描述】：

我想使用 c3 来显示时间序列的设备信息。这是我的 json 数据。

  json: [
            {datetime: '2016-01-02 12:00:01.001', wifi: 1},
            {datetime: '2016-01-02 12:00:01.999', wifi: 0},
            {datetime: '2016-01-02 12:00:03.000', GPS: 0},
            {datetime: '2016-01-02 12:00:04.003', wifi: 1},
            {datetime: '2016-01-02 12:00:05.959', GPS: 1},
            {datetime: '2016-01-02 12:00:06.006', wifi: 0},
        ],

我发现它无法为每个 wifi / gps 显示连续线。是bug还是任何方法都可以显示连续线？

The line what I expected

var chart = c3.generate({
    data: {
        xFormat: '%Y-%M-%d %H:%M:%S.%L',
        json: [
            {datetime: '2016-01-02 12:00:01.001', wifi: 1},
            {datetime: '2016-01-02 12:00:01.999', wifi: 0},
            {datetime: '2016-01-02 12:00:03.000', GPS: 0},
            {datetime: '2016-01-02 12:00:04.003', wifi: 1},
            {datetime: '2016-01-02 12:00:05.959', GPS: 1},
            {datetime: '2016-01-02 12:00:06.006', wifi: 0},
        ],
        keys: {
            x: 'datetime',
            value: ['wifi','GPS'],
        },
        types: {
            wifi: 'line',
            GPS:'line',
        },
    },
    axis: {
        x: {
            type: 'timeseries',
                tick: {
                    format: '%Y-%m-%d %H:%M:%S'
            }
        },
    },
    zoom: {
        enabled: true
    },
});

Source Code

【问题讨论】：

标签： javascript json d3.js c3.js timeserieschart

【解决方案1】：

我发现这是一个老问题，解决方案是“connectNull: true”。

    var chart = c3.generate({
    data: {
        xFormat: '%Y-%M-%d %H:%M:%S.%L',
        json: [
            {datetime: '2016-01-02 12:00:01.001', wifi: 1},
            {datetime: '2016-01-02 12:00:01.999', wifi: 0},
            {datetime: '2016-01-02 12:00:04.003', wifi: 1},
            {datetime: '2016-01-02 12:00:06.006', wifi: 0},
            {datetime: '2016-01-02 12:00:03.000', GPS: 0},
            {datetime: '2016-01-02 12:00:05.959', GPS: 1},
        ],
        keys: {
            x: 'datetime',
            value: ['wifi','GPS'],
        },
        types: {
            wifi: 'step',
            GPS:'step',
        },
    },
    axis: {
        x: {
            type: 'timeseries',
                tick: {
                    format: '%Y-%m-%d %H:%M:%S'
            }
        },
    },
    zoom: {
        enabled: true
    },
line: {
    connectNull: true
}
});

SourceCode

【讨论】：

【解决方案2】：

我从未使用过 c3，但这是我的猜测：您必须为所有日期时间指定 wifi 和 GPS 的值。

我只是在没有价值的地方添加了 0。看看发生了什么，现在你有一个折线图：https://jsfiddle.net/gerardofurtado/oshujxux/

【讨论】：

谢谢，我们无法为所有时间戳添加所有值。浏览器会出现性能问题。我刚刚找到解决方案：github.com/c3js/c3/issues/563