Flotr2 ошибка с датами Гистограмма

Question

у меня есть flotr2 график, который должен отображать некоторые данные в нем:

Edit: пользователи Chrome: Обратите внимание, что это jsfiddle не похоже на работу мне в хроме, не уверен, почему

http://jsfiddle.net/1jgb2k6r/7/

Моя проблема заключается в том, что мои бары не выровнен по центру над датой, которую они представляют.

$(function() { 
    (function color_gradients(container) { 
     var myData = []; 

     myData.push([new Date('1/1/2014').getTime(), Math.ceil(Math.random() * 10)]); 
     myData.push([new Date('1/8/2014').getTime(), Math.ceil(Math.random() * 10)]); 
     myData.push([new Date('1/15/2014').getTime(), Math.ceil(Math.random() * 10)]); 
     myData.push([new Date('1/22/2014').getTime(), Math.ceil(Math.random() * 10)]); 
     var 
     bars = { 
      data: myData, 
      bars: { 
       show: true, 
       barWidth: 0.8, 
       lineWidth: 20, 
      } 
     }; 

     graph = Flotr.draw(
     container, [bars], { 
      yaxis: { 
       min: 0, 
       max: 11 
      }, 
      xaxis: { 
       mode: 'time', 
       timeMode: 'local', 
       min: (new Date('1/1/2014').getTime() - (7 * 24 * 60 * 60 * 1000)), 
       max: (new Date('1/22/2014').getTime() + (7 * 24 * 60 * 60 * 1000)) 
      } 
     }); 
    })(document.getElementById("editor-render-0")); 
}); 

Есть ли способ, чтобы перепланировать эти решетки?

Answer 1

Всегда в одиннадцатый час я отправляю свой вопрос, и всегда в одиннадцатый час я нахожу решение.

http://jsfiddle.net/1jgb2k6r/10/

В принципе, Flot линия Graphing библиотек имеют интегральную ошибку в своих расчетах даты и времени. Все они страдают от серьезных ошибок округления с плавающей запятой по отношению к оси времени на графике, что приводит к тому, что бары перемещаются слева от их предполагаемых участков участка.

Ниже приведен пример функции getTimeScale, которая возвращает дату как номер недели от времени эпохи (начиная с ~ 2200 от 1/1/2014):

function getTimeScale(date){ 
    return (new Date(date).getTime()/1000/60/60/24/7); 
} 

Эта функция применяется к дате аргументов в серии данных, возвращает нормализованное число не порядка сот тысяч:

$(function() { 
    (function color_gradients(container) { 
     var myData = []; 


     myData.push([getTimeScale('1/1/2014'),Math.ceil(Math.random() * 10)]); 
     myData.push([getTimeScale('1/8/2014'),Math.ceil(Math.random() * 10)]); 
     myData.push([getTimeScale('1/15/2014'), Math.ceil(Math.random() * 10)]); 
     myData.push([getTimeScale('1/22/2014'), Math.ceil(Math.random() * 10)]); 

     var bars = { 
      data: myData, 
      bars: { 
       show: true, 
       barWidth: 0.8, 
       lineWidth: 1, 
      } 
     }; 

     graph = Flotr.draw(
     container, [bars], { 
      yaxis: { 
       min: 0, 
       max: 11 
      }, 
      xaxis: { 
       ticks: ticks, 
       min: (getTimeScale('1/1/2014') - 1), 
       max: (getTimeScale('1/22/2014') + 1) 
      } 
     }); 
    })(document.getElementById("editor-render-0")); 
}); 

для того, чтобы отобразить тики как DateTime снова, вы должны указать явно тики:

var ticks = []; 

ticks.push([getTimeScale('1/1/2014'), '1/1/2014']); 
ticks.push([getTimeScale('1/8/2014'), '1/8/2014']); 
ticks.push([getTimeScale('1/15/2014'), '1/15/2014']); 
ticks.push([getTimeScale('1/22/2014'), '1/22/2014']); 

graph = Flotr.draw(
    container, [bars], { 
     yaxis: { 
      min: 0, 
      max: 11 
     }, 
     xaxis: { 
      ticks: ticks, 
      min: (getTimeScale('1/1/2014') - 1), //gives a little padding room on the graph 
      max: (getTimeScale('1/22/2014') + 1) //gives a little padding room on the graph 
     } 
});