Принять значение 0 в дни без данных (диаграмма временных рядов C3js)

Когда на графике C3js отображается массив непоследовательных дней, линии рисуются непосредственно между точками. Есть ли параметр, который позволяет C3js интерпретировать дни, которые не указаны, как имеющие значение 0, так что строки между непоследовательными днями сначала упадут до значения 0 в промежуточные дни, а затем снова вернутся к значению следующего предоставленного дня?

Я мог себе представить временную альтернативу - использование гистограммы, но я бы предпочел линейный график.

Нежелательные результаты Выше показано изображение нежелательного результата, в котором точки с разбросанными данными связаны напрямую, без снижения до значения 0 в течение промежуточного периода.

Временное решение

Метод, который я создал в качестве временного решения, состоит в том, чтобы написать функцию, которая просто создает массив дат, которые идут от первой до последней даты массива значений дня. Затем он предоставляет значение 0 для дней с индексом -1 в исходном массиве дат.

var newKeysDay = getDatesArray(firstDay, lastDay);
var newValsDay = [];
newKeysDay.forEach(function (day) {
  var i = keysDay.indexOf(day);
  if (i > -1) newValsDay.push(valsDay[i]);
  else newValsDay.push(0);
});

d3.js time-series timeserieschart c3.js
person kuanb    schedule 02.09.2016    source источник
comment
line.connectNull()?   -  person altocumulus    schedule 03.09.2016

Ответы (1)


arrow_upward
2
arrow_downward

Проблема в том, что c3 не интерпретирует отсутствующие даты как нули или нули, а только даты, к которым вы не заявили интереса, поэтому ваше решение выглядит правильным.

Я предполагаю, что вы уже установили для connectNull значение true, поскольку на вашем снимке экрана есть две серии, в которых некоторые точки данных присутствуют в одной серии, а не в другой, но они перескакивают, как если бы connectNull.

Вы можете сделать свой код более эффективным, поместив только «нулевые дни» до и после существующих дат и не заполняя все промежуточные даты. Пример адаптирован из http://c3js.org/samples/timeseries.html. Он может отображаться немного быстрее и не создает лишних тиков.

var dates = ['2013-01-01', '2013-01-02', '2013-01-03', '2013-01-11', '2013-01-08', '2013-01-09', '2013-05-02'],
    val1 = [30, 200, null, 400, 150, 250],
    val2 = [130, 340, 200, 500, 250, 350];

    var dateSet = d3.set(dates);
    var df = d3.time.format("%Y-%m-%d");

    var addIfNeeded = function (d, inc) {
        var nbour = new Date (d);
        nbour.setDate (nbour.getDate() + inc);
        var nf = df(nbour);

        if (!dateSet.has(nf)) {
            dateSet.add (nf);
            dates.push (nf);
            val1.push (0);
            val2.push(0);
        };
    }

    dates.slice(0).forEach (function(date) {
        var d = new Date(date);
        if (val1[i] === null) { val1[i] = 0; }
        if (val2[i] === null) { val2[i] = 0; }
        addIfNeeded (d, 1);
        addIfNeeded (d, -1);
    })

    console.log ("dates", dates, val1, val2);



var chart = c3.generate({
    data: {
        x: 'x',
        columns: [
            ['x'].concat(dates),
            ['data1'].concat(val1),
            ['data2'].concat(val2)
        ]
    },
    axis: {
        x: {
            type: 'timeseries',
            tick: {
                format: '%Y-%m-%d'
            }
        }
    }
});
person mgraham    schedule 05.09.2016