的解决方案：

Question

我正在使用flot.tooltip的{{1}}插件，我的数据是时间序列。用户可以选择要绘制的数据的时间范围（从7天到“所有数据”的7个不同步骤）并且flot相应地重新格式化x轴 - '1月03日，04年4月等'，如果7天，' 1月，2月等，如果是1年，依此类推。

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

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

目前的相关代码如下：

138887...

的解决方案：

我必须从接受的答案中更改一些内容，最值得注意的是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; ... } }, }＆gt; plot.getXAxes()。此外，我还必须将绘图创建为命名变量，以便我可以访问plot.getAxes().xaxis，然后在最后调用plot.getAxes().xaxis - 在初始plot.draw();刚好在函数内部之前。

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的广告素材数据格式化功能，如果不足以满足您的需求我推荐尊敬的moment.js.

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

的解决方案：

1 个答案: