如何配置flot在零点的y轴上绘制缺失的时间序列？

Question

我正在使用flot(在github上的flot)绘制一个包含以下时间序列数据的图表:

[
    [1357171200000, 1],
    [1357344000000, 1],
    [1357430400000, 2],
    [1357516800000, 2],
    [1357689600000, 3],
    [1357776000000, 1]
]

正如您所看到的,图表中有一些点可以显示给定日期的销售情况.我的json响应不包含未发生销售的天数的销售计数/数据.例如1月4日.如何配置flot在零点的y轴上绘制缺失的天数(因为没有销售)？正如您在图像中看到的那样,flot确实连接了点,因此图中没有零点.

Answer 1

这是一个解决方案,在缺少的日子里创建一个新的数组,并将它们的值设置为零:

/* create and return new array padding missing days*/
function newDataArray(data) {
  var startDay = data[0][0],
    newData = [data[0]];

  for (i = 1; i < data.length; i++) {
    var diff = dateDiff(data[i - 1][0], data[i][0]);
    var startDate = new Date(data[i - 1][0]);
    if (diff > 1) {
      for (j = 0; j < diff - 1; j++) {
        var fillDate = new Date(startDate).setDate(startDate.getDate() + (j + 1));
          newData.push([fillDate, 0]);
      }
    }
    newData.push(data[i]);
  }
  return newData;
}


/* helper function to find date differences*/
function dateDiff(d1, d2) {
  return Math.floor((d2 - d1) / (1000 * 60 * 60 * 24));
}

使用:

var data = [
  [1357171200000, 1],
  [1357344000000, 1],
  [1357430400000, 2],
  [1357516800000, 2],
  [1357689600000, 3],
  [1357776000000, 1]
];

var newData=newDataArray(data);
/* pass newData to flot*/

演示:http://jsfiddle.net/LK2gD/3/