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

我正在使用flot( 在github上的flot )绘制带有以下时间序列数据的图形:

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

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

图形

这是一个解决方案,可以在缺少的日子中添加新数组,并将其值设置为零:

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

所以,你每天都有数量。 然后,您可以迭代每个条目并找到当前条目和下一个条目之间的天数,然后您只需要将数组填充为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]] 

检查哪个时间间隔是日期,并更新’interval’数组中的countscounts

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

然后你可以使用index来计算特定日期的计数:

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