Question

在图中显示xaxis标签时，我对Flot插件有一点问题。他们是'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问题数据库，issue 141会解决时区问题。 Issue 484建议您使用的语法合并到此问题中。

documentation说：

通常您希望根据a显示时间戳某个时区，通常是数据所在的时区产生的。但是，Flot始终根据UTC显示时间戳。它必须作为核心Javascript的唯一选择来解释根据访问者所在的时区的时间戳，这意味着蜱将随着时区不可预测地转变和每位访客的夏令时。

因此，对于自定义时区没有很好的支持 Javascript，你必须要照顾这个服务器端。

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

或者按照问题141查看补丁或插件。

Answer 3

对于UTC timeStamps，请使用UTC时间函数：

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

并删除xaxis时区。

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

3 个答案: