Отображение всплывающей подсказки с правильным часовым поясом с помощью плагина Flot jQuery - PullRequest
Новая
       29

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

15 голосов
/ 14 апреля 2011

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

My 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);
 });

Опции Flot 

 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 и всплывающими подсказками.

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

Ответы [ 3 ]

21 голосов
/ 16 октября 2012

Вы можете попробовать использовать часовой пояс вместо 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

4 голосов
/ 14 апреля 2011

Если вы посмотрите на базу данных выпусков flot, issue 141 адресует часовые пояса. Выпуск 484 о том, что используемый вами синтаксис был объединен с этой проблемой.

Документация гласит:

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

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

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

В качестве альтернативы, следуйте вопросу 141 и следите за исправлениями или плагинами.

0 голосов
/ 15 марта 2016

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

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

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

...