显示工具提示与正确的时区使用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不工作，我仍然有x轴和工具提示之间的差异。

你有什么好主意我该怎么解决这个问题吗?

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

查看lot issue数据库，issue 141涉及时区。问题484提示您使用的语法已合并到此问题中。

文档说:

通常您希望时间戳根据a某个时区，通常是数据所在的时区生产。但是，Flot总是根据UTC显示时间戳。它必须作为核心Javascript的唯一替代方案是解释根据来访者所在时区的时间戳，这意味着时间会随着时区的变化而不可预测地变化以及每位访客的夏令时时间

所以考虑到没有很好的支持自定义时区Javascript，你必须照顾这个服务器端。

所以正确的解决方案是使你的数据看起来像UTC服务器端(即使它不是)。如果不能更改数据源，则可能需要考虑代理它。服务器端语言应该允许时区操作。

或者遵循问题141并观察补丁或插件

Answer 3

对于UTC时间戳，使用UTC时间函数:

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