Я использую flot (flot на github) для рисования графика со следующими данными временного ряда:

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

Как видите, на графике есть несколько точек, которые показывают продажи за данный день. Мой ответ json не содержит данных о продажах за те дни, когда продажи не происходили. Например 4 января. Как я могу настроить flot для рисования пропущенных дней на оси Y в точке ноль (потому что нет продаж)? Как вы можете видеть на изображении, flot соединяет точки, поэтому на графике нет нулевых точек.

Graph

5
whitenexx 25 Янв 2013 в 17:23

2 ответа

Лучший ответ

Вот решение, которое создает новый массив, добавляя в пропущенные дни и устанавливая их значения в ноль:

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

15
charlietfl 25 Янв 2013 в 22:38

Итак, у вас есть ежедневный счет. Затем вы можете перебирать каждую запись и находить число дней между текущей записью и следующей, тогда вам просто нужно будет заполнить ваш массив 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' ( 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);
}
2
JohnJohnGa 25 Янв 2013 в 13:49