Временные ряды C3js не могут отображать непрерывную линию

Я хочу использовать 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},
        ],

Я обнаружил, что он не может отображать непрерывную линию для каждого Wi-Fi / GPS. Это ошибка или любой метод может показать непрерывную линию?

То, что я и ожидал

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
    },
});

Исходный код


javascript json d3.js timeserieschart c3.js
person Maria Chen    schedule 15.06.2016    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Я обнаружил, что это старая проблема, и решение — «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
}
});

Исходный код

person Maria Chen    schedule 16.06.2016

arrow_upward
0
arrow_downward

Я никогда не использовал c3, но это мое предположение: вы должны указать значения для wifi и GPS для всех ваших дат и времени.

Я просто добавил 0, где не было значения. Посмотрите, что получилось, теперь у вас есть линейная диаграмма: https://jsfiddle.net/gerardofurtado/oshujxux/

person Gerardo Furtado    schedule 15.06.2016
comment
Спасибо, мы не можем добавить все значение для всех временных меток. В браузере будут проблемы с производительностью. Я просто нашел решение: github.com/c3js/c3/issues/563 - person Maria Chen; 16.06.2016