使用Flot jQuery插件显示具有正确时区的工具提示 [英] Display tooltip with correct Time zone using Flot jQuery plugin

问题描述

在图形中显示xaxis标签时，Flot插件存在一些问题.它们是'mode: "time"'.当前，我将Flot与工具提示功能一起使用，并且工具提示包含日期和时间. 我向包含时间戳的插件提供JSON.之后，我将转换时间戳并将其显示在工具提示中.问题在于，在图形中显示数据时，由于时区之间的差异，工具提示中的时间与插件生成的xaxis标签不对应.我的JSON时间戳为+2 GMT，但Flot中的xaxis标签为+0 GMT.所以我想知道是否有可能设置时区或类似的偏移量.

I have a little problem with the Flot plugin while displaying the xaxis labels in the graph. They are 'mode: "time"'. Currently I use Flot with the tooltip function and the tooltip contains a date and time. I supply JSON to the plugin which contains timestamps. Afterwards I convert the timestamp and I display it in the tooltip. The problem is that while displaying the data in the graph, the times from the tooltips don't correspond to the xaxis labels generated by the plugin due to a difference between the timezones. My JSON timestamps are +2 GMT, but the xaxis labels in Flot are +0 GMT. So I wonder if there is a possibility to set an offset to the time zone or something similar.

我的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和工具提示之间仍然存在差异.

but unfortunately timeZoneOffset doesn't work and I have still differences between the xaxis and the tooltips.

您对我应该如何解决问题有任何想法吗?

Do you have any ideas how I should resolve my problem?

推荐答案

您可以尝试使用时区而不是timeZoneOffset.您的选择如下所示:

You can try to use timezone instead of timeZoneOffset. your options look like:

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

这篇关于使用Flot jQuery插件显示具有正确时区的工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！