Question

有没有办法在c3.js的时间序列中添加零值在示例中，您可以看到，错过了2016-01-07。我们可以用零值显示这样的错过日期吗？

var jsonData = [{"id": 569, "date": "2016-01-10", "data1": 1, "data2": 0}, {"id": 569, "date": "2016-01-06", "data1": 96, "data2": 22}, {"id": 569, "date": "2016-01-08", "data1": 24, "data2": 1}, {"id": 569, "date": "2016-01-09", "data1": 1, "data2": 0}, {"id": 569, "date": "2016-01-11", "data1": 43, "data2": 2}, {"id": 569, "date": "2016-01-12", "data1": 10, "data2": 1}] 

 var chart = c3.generate({
      bindto: '#chart',
      data: {
        json: jsonData,
        keys: {
          x: 'date',
          value: ['data1', 'data2']
        }
      },
      axis: {
        x: {
          type: 'timeseries',
          tick: {
            format: function (x) { 
            return x.toLocaleDateString('en-GB');}
          }
        }
      },
      subchart: {
        show: true
      },
      zoom: {
        enabled: true
      }
    });

http://jsfiddle.net/pr18wkz6/16/

Answer 1

看看这是否适合您。像moment.js这样的日期库也有助于简化这一点

// first sort by date
var data = jsonData.sort(function(a, b) {
  return a.date > b.date
}).reduce(function(res, curr, i, arr) {
  res.push(curr);
  // if not last element in array increment current date
  // compare to next date and fill holes until they match
  if (arr[i + 1]) {
    var currDate = itemDate(curr.date);
    var nextDate = itemDate(arr[i + 1].date);
    while (currDate.setDate(currDate.getDate() + 1) < nextDate) {
      res.push(blankItem(currDate))
    }
  }
  return res;
}, []);

//can pass data to chart now


// date helper    
function itemDate(str) {
  var parts = str.split('-');
  return new Date(+parts[0], (+parts[1] - 1), +parts[2])
}
// new item helper for padding
function blankItem(date) {
  return {
    data1: 0,
    data2: 0,
    date: date.toISOString().slice(0, 10)
  }
}

的 DEMO

如何将零值添加到c3.js中的时间序列中

1 个答案: