用flot.tooltip进行动态时间格式化

Question

我将flot.tooltip插件用于flot，我的数据是时间序列。用户可以选择要绘制的数据的时间框架(从7天到“所有数据”的7个不同步骤)，并相应地重新格式化x轴的格式-‘1月03,2004年1月等’如果7天，' Jan，Feb，等等，如果1年，等等。

问题是当使用工具提示时，日期没有格式化，因为它只是获得原始unix时间戳，在工具提示中给出了类似于138887...的输出。

有一个时间格式选项，但由于用户可以更改我的数据集，因此此选项不起作用。有办法用flot.tooltip插件动态格式化时间戳数据吗？

现行有关守则如下：

tooltip: true,
tooltipOpts: {
  content: function(label, xval, yval) {
    var section = $("#select-buttons").find('li.selected a')[0].innerHTML;
    switch (section) {
    case "Country":
      return xval + ':\n ' + yval + ' users from ' + label
      break;
    ...
    }
  },
}

解决办法：

我不得不从公认的答案中更改一些东西，最显著的是plot.getXAxes() > plot.getAxes().xaxis。此外，我还必须将这个图创建为一个命名变量，这样我就可以访问plot.getAxes().xaxis，然后在结束时调用plot.draw(); --在最初的$.plot(...)就在函数中之前。

Answer 1

您必须自己应用格式设置。类似于content回调中的如下内容：

tooltipOpts: {
    content: function(label, xval, yval, flotItem){
        var xAxis = plot.getXAxes();
        var range = (xAxis.max - xAxis.min);

        if (range > 3.15569e10){
          // range is larger than a year, just show year
          return $.plot.formatDate(new Date(xval), '%Y');

        }else if (range > 2.62974e9){
          // range is less than a year, larger than a month, show month names
          return $.plot.formatDate(new Date(xval), '%m');

        }else if (range > 604800000){                                    
          // range is less than a month, larger than a week
          etc...

        }else if (range > 86400000){
          // range is less than a week, larger than a day
          etc...

        }else{
          etc...
        }

    }
},

我正在使用来自jquery.flot.time.js的flots数据格式化功能，如果不够高级，我会推荐值得尊敬的moment.js。