使用Flot jQuery插件显示具有正确时区的工具提示

Question

我在Flot插件中遇到一些问题,同时在图表中显示xaxis标签.他们是'mode: "time"'.目前我使用Flot工具提示功能,工具提示包含日期和时间.我向包含时间戳的插件提供JSON.然后我转换时间戳,然后在工具提示中显示它.问题是,在图表中显示数据时,由于时区之间的差异,工具提示的时间与插件生成的xaxis标签不对应.我的JSON时间戳是+2 GMT,但Flot中的xaxis标签是+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);
 });  

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和工具提示之间的差异.

你有什么想法我应该如何解决我的问题？

Answer 1

您可以尝试使用timezone而不是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 }
    };

我的flot版本是0.7

Answer 2

如果您查看 flot 问题数据库，就会发现问题 141涉及时区。 建议您使用的语法的问题 484已合并到此问题中。

文档说：

通常，您希望根据特定时区（通常是生成数据的时区）显示时间戳。但是，Flot 始终根据 UTC 显示时间戳。它必须这样做，因为核心 Javascript 的唯一替代方案是根据访问者所在的时区解释时间戳，这意味着刻度将随着每个访问者的时区和夏令时而不可预测地变化。

因此，鉴于 Javascript 中没有对自定义时区的良好支持，您必须处理此服务器端。

因此，正确的解决方案是让您的数据看起来像 UTC 服务器端（即使不是）。如果您无法更改数据源，您可能需要考虑代理它。服务器端语言应该允许时区操作。

或者按照问题 141 并注意补丁或插件。