5

flot ( githubの flot ) を使用して、次の時系列データでグラフを描画しています。

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

ご覧のとおり、グラフには特定の日の売上を示すポイントがいくつかあります。私の json 応答には、販売が行われなかった日の販売数/データが含まれていません。たとえば、1 月 4 日。ポイントゼロでy軸に欠落した日を描画するようにflotを構成するにはどうすればよいですか(販売がないため)? 画像でわかるように、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 に答える