在 jQuery 浮点数的 y 轴上显示小时数

【问题标题】：Showing hours on y axis in jQuery flot在 jQuery 浮点数的 y 轴上显示小时数
【发布时间】：2011-10-28 09:07:02
【问题描述】：

我制作了一个图表，在 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

非常感谢您的帮助！

【问题讨论】：

【解决方案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,
    ..
  }
});

【讨论】：