5

我正在使用 flot （github 上的 flot ）绘制具有以下时间序列数据的图形：

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

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

图形

4

2 回答 2

15

这是一个解决方案，它创建一个新的数组，添加缺失的天数并将它们的值设置为零：

/* 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/

于 2013-01-25T22:38:48.040 回答
2

所以，你有每日计数。然后，您可以遍历每个条目并找到当前条目和下一个条目之间的天数，然后您只需要用 0 填充数组。

最好使用零填充数组，然后仅添加当前数组中日期的计数，这样您就不需要对日期进行任何检查。

你每天间隔

var millisInDay = 1000*60*60*24;

这将为您提供每日间隔的数量

  var intervals = parseInt(((lastDateInMillis - startDateInMillis)/
                                  millisInDay) + 1);

然后当你迭代你的日期数组时

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

检查哪个时间间隔是日期，并更新“时间间隔”数组中的计数 ( counts)

var interval = ((currentDateMillis - startDateInMillis) / millisInDay);
counts[interval] += currentCount;

然后您可以使用index特定日期映射计数：

function getEpochStartInterval(index){
  return startDateInMillis + (index * millisInDay);
}

function getEpochEndInterval(index){
  return startDateInMillis + ((index + 1) * millisInDay);
}
于 2013-01-25T13:42:12.600 回答