Даты отображаются неправильно для данных недельного графика в Flot

Я пытаюсь построить некоторые данные во Flot, которые должны отображать x-axis в режиме времени. Справочный API флота не указывает, что minTickSize может принимать «неделю» в качестве единицы, поэтому я указал единицу измерения как «день» со значением 7:

  minTickSize: [7, "day"],

Это отображает размер тика с разницей в 7 дней для некоторых тиков и с интервалом около 8-9 дней для некоторых тиков. Вот пример, показывающий несовместимые отметки: http://jsfiddle.net/UEePE/583/

Я знаю, что график также не отображает простую линию, которую я ожидаю. Все еще работаю над тем, чтобы выяснить, почему. Когда я удаляю все параметры из оси x, кроме режима: время, кажется, что это работает, но не когда я добавляю другие параметры.

Будем признательны за любую помощь в том, как заставить Flot добавлять тики с интервалом в 7 дней/1 неделю и как в этом случае на самом деле построить график.

Спасибо!


jquery flot
person Harman    schedule 05.07.2011    source источник
comment
Выяснил, почему диаграмма не отображается. Я неправильно добавил миллисекунды. Таким образом, диаграмма теперь правильно отображается в моей среде разработки, но на диаграмме все еще есть неправильные деления, поскольку они не разнесены ровно на 7 дней. Скриншот находится по адресу imageshack.us/photo/my-images/684/flotchart. .png Однако диаграмма в JSFiddle вообще не отображается. Обновленная ссылка: jsfiddle.net/UEePE/583. Также поправили в исходном посте выше.   -  person Harman    schedule 06.07.2011

Ответы (1)


arrow_upward
6
arrow_downward

Сначала вверх. Аргумент данных Flot представляет собой массив рядов. Каждая серия представляет собой массив точек, каждая точка представляет собой массив двух значений: x и y. Итак, ваши данные должны выглядеть так:

var data = [ [
    [1301634000000, 315.71], //Apr 1, 2011
    [1302238800000, 209.21], //Apr 8, 2011
    [1302843600000, 420.36], //Apr 15
    [1303448400000, 189.86], //4/22
    [1304053200000, 314.93], //4/29
    [1304658000000, 279.71], //5/6
    [1305262800000, 313.34], //5/13
    [1305867600000, 114.67], //5/20
    [1306472400000, 315.58] //5/27
] ];

Next Flot конвертирует ваши [7, "день"] в [0,25, "месяц"]. Для minTickSize существует не так много значений, которые он может принять (ищите «spec» в исходном коде).

Это означает, что вам придется указать значения тиков самостоятельно. Самый простой способ — взять значения оси X из первого ряда данных, создать массив тиков и передать его в хэш оси X:

var ticks = [];
for (var i = 0; i < data[0].length; i++) {
  ticks.push(data[0][i][0]); //corrected the missing closing bracket here..
}

потом

$.plot($("#placeholder"), data, {
  xaxis: {
    mode: "time",
    ticks: ticks,
    timeformat: "%m/%d",
    min: (new Date(2011, 2, 31)).getTime(),
    max: (new Date(2011, 4, 31)).getTime()
  },
  ..etc..
person jmbucknall    schedule 05.07.2011
comment
Спасибо! Я исправил отсутствующую закрывающую скобку в вашем сообщении, и это отлично сработало в моем Dev. окружающая обстановка. Все еще не работает в jsfiddle. - person Harman; 06.07.2011
comment
Я использовал это, но производительность снижается, когда я использую это. Можете ли вы сказать мне какое-либо другое решение. - person Durgpal Singh; 11.02.2017
comment
Прошу прощения, но нет. Я предполагаю, что потребуются некоторые изменения в Flot, чтобы поддерживать неделю в качестве значения тика. - person jmbucknall; 13.02.2017