javascript - C3js时间序列无法显示连续线

标签 javascript json d3.js c3.js timeserieschart

我想使用 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 的连续线。 这是一个错误还是任何方法都可以显示连续线?

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

最佳答案

我发现这是一个老问题,解决方案是“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

关于javascript - C3js时间序列无法显示连续线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37832029/

相关文章:

json - Flutter POST json 请求正文在服务器端为空/null

ios - 如何上传/操作 Apple News JSON 文件?

animation - 通过动画以编程方式调整 d3 画笔

javascript - 设置 SVG 元素的宽度和高度 - d3.js

javascript - 如何推送数据创建饼图-chart js

javascript - 如何在 d3 javascript 中为 SVG 文本元素分配唯一 ID

javascript - 如何禁用 Chrome 媒体暂停

javascript - 使用存储在变量中的 jQuery 句柄

javascript - 将 PHP 数组传递到 cookie 并使用 jQuery 检索

javascript - 循环遍历 Angular 中的模板项