Отобразить всплывающую подсказку с правильной временной зоной с помощью плагина jQuery для флота

У меня есть небольшая проблема с плагином Flot при отображении ярлыков xaxis на графике. Они 'mode: "time"'. В настоящее время я использую Flot с функцией всплывающей подсказки, а всплывающая подсказка содержит дату и время. Я поставляю JSON в плагин, который содержит отметки времени. Впоследствии я конвертирую временную метку, и я показываю ее в подсказке. Проблема заключается в том, что при отображении данных на графике времена из всплывающих подсказок не соответствуют ярлыкам xaxis, генерируемым плагином из-за разницы между часовыми поясами. Мои отметки JSON составляют +2 GMT, но ярлыки xaxis в Flot +0 GMT. Поэтому я задаюсь вопросом, есть ли возможность установить смещение в часовом поясе или что-то подобное.

Мой JSON (сгенерированный AJAX)

 [1300087800000,29],
 [1300088700000,39],
 [1300089600000,46],
 [1300090500000,53],
 [1300091400000,68],
 [1300092300000,95],
 ...

Моя функция подсказки

$(placeholder).bind("plothover", function (event, pos, item) {
     $("#tooltip").remove();

     var x = item.datapoint[0].toFixed(2);
     var y = item.datapoint[1].toFixed(2);

     var currDate   = new Date(Math.floor(x));
     var hour       = currDate.getHours();
     var minute     = String("") + currDate.getMinutes();

     var tooltip = hour + ":" +
                   ((minute.length < 2) ? "0" + minute : minute) + " " +
                   (Math.round(y * 100)/100) + "Wh"
     showTooltip(item.pageX, item.pageY, tooltip);
 });

Параметры флота

 var plotOptions = {  
     lines:  { show: true, lineWidth: 1 },  
     points: { show: false, symbol: "cross" },  
     xaxis:  {  
         mode:   "time",  
         tickLength: 5,  
         timeZoneOffset: (new Date()).getTimezoneOffset()  
     },  
     selection: { mode: "x", color: "#BCBCBC" },
     grid:      { hoverable: true, clickable: false }
};

но, к сожалению, timeZoneOffset не работает, и у меня все еще есть различия между xaxis и всплывающими подсказками.

Есть ли у вас идеи, как я должен решить свою проблему?

Ответ 1

Вы можете попытаться использовать часовой пояс вместо timeZoneOffset. ваши варианты выглядят так:

var plotOptions = {  
     lines:  { show: true, lineWidth: 1 },  
     points: { show: false, symbol: "cross" },  
     xaxis:  {  
          mode:   "time",  
          tickLength: 5,  
          timezone: "browser" // "browser" for local to the client or timezone for timezone-js  
          },  
    selection: { mode: "x", color: "#BCBCBC" },
    grid:      { hoverable: true, clickable: false }
    };

Моя версия флота - 0,7

Ответ 2

Если вы посмотрите на базу данных о проблемах с флотом, проблема 141, укажите часовые пояса. Проблема 484, предполагающая, что используемый вами синтаксис был объединен с этой проблемой.

В документации говорится:

Обычно вы хотите, чтобы метки времени отображались в соответствии с определенный часовой пояс, обычно часовой пояс, в котором данные были производится. Тем не менее, Flot всегда отображает отметки времени в соответствии с UTC. Он должен в качестве единственной альтернативы с основным Javascript - интерпретировать отметки времени в соответствии с часовым поясом, в котором находится посетитель, что означает, что тики будут непредсказуемо изменяться с часовым поясом и дневной сбережения каждого посетителя.

Поэтому, если нет хорошей поддержки пользовательских часовых поясов в Javascript, вам придется позаботиться об этой стороне сервера.

Итак, правильное решение состоит в том, чтобы сделать ваши данные похожими на серверный сервер UTC (даже если это не так). Если вы не можете изменить свой источник данных, вам может потребоваться прокси-сервер. Серверные языки должны позволять манипуляции с часовым поясом.

Альтернативно следуйте за проблемой 141 и смотрите патчи или плагины.

Ответ 3

для UTC timeStamps используйте функции времени UTC:

var hour = currDate.getUTCHours();  // instead of getHours()
var minute = String("") + currDate.getUTCMinutes(); // instead of getMinutes()

и удалите часовой пояс xaxis.