Question

我想使用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

Answer 1

我发现这是一个老问题，解决方案是＆＃34; connectNull：true＆＃34;。

    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

Answer 2

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

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

C3js时间序列不能显示连续线

2 个答案: