在 jQuery flot 中在 y 轴上显示小时

Question

我制作了一个图表，在 y 轴上显示小时。但现在我必须将时间转换为小数。

2:30 将是 2.5

我知道你可以将 y 轴设置为时间模式，但我可以无法让它工作：

        yaxis: {
            mode: "time",
            timeformat: "%H:%M"

        },

但是我应该如何将小时数传递给 jQuery Plot：“1:40”不起作用

我想让它看起来像这样，只需要几个小时而不是几分钟

我在互联网上搜索帮助，jQuery API 没有正确解释它： http://flot.googlecode.com/svn/trunk/API.txt

非常感谢您的帮助！

Answer 1

您想要做的只是使用轴 tickFormatter 来伪造它。 “时间”模式实际上应该被称为“日期”模式，因为它是关于日期而不是时间。时间真的只是偶然。因此，如果您已经完成了将时间转换为十进制的工作，只需使用 JavaScript 函数将它们转换回您想要的格式：

function timeTickFormatter(val,axis) {
  var hours = Math.floor(val);
  var minutes = (val - hours) * 60;

  return hours+":"+minutes;
}

这显然并没有涵盖所有排列（即，如果您需要的话，可以在前导零） ，但这就是想法。如果您不知道如何将其放入 flot 中，请在绘图选项中如下所示：

$.plot(placeholder, data, {
  ..,
  yaxis: {
    ..,
    tickFormatter:timeTickFormatter,
    ..
  }
});