如何配置flot以在零点处绘制y轴上的缺失时间序列？ [英] How to configure flot to draw missing time series on y-axis at point zero?

问题描述

我使用flot（ github上的flot）绘制一个包含以下时间序列的图表数据：

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

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

  / *创建并返回新的数组填充缺少的天数* / 
 function newDataArray （data）{
 var startDay = data [0] [0]，
 newData = [data [0]]; （i = 1; 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]）; 
} 
返回newData; 
 
 
 $ b / *帮助函数查找日期差异* / 
函数dateDiff（d1，d2）{
返回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）; 
 / *将newData传递给flot * / 
  

DEMO：

I'm using flot (flot on github) to draw a graph with the following time series data:

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

As you can see there are some points in the graph wich show the sales for the given day. My json response doesn't contain sales count / data for days where no sale has happened. For example the 04th of January. How can i configure flot to draw the missing days on y-axis at point zero (because there are no sales)? As you can see in the image flot does connect the points so there are no zero points in the graph.

解决方案

Here's a solution that creates a new Array adding in missing days and setting their values to zero:

/* 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));
}

To use:

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

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

DEMO: http://jsfiddle.net/LK2gD/3/

这篇关于如何配置flot以在零点处绘制y轴上的缺失时间序列？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！