Question

我已设法使用时间模式并在x轴上显示从时间戳格式化的绝对时间。

现在我想显示自第一个数据点以来的传递时间。

示例：第一个数据点是17:40，第二个数据点是17:45，然后x轴上的第一个点应显示00:00:00，第二个刻度应显示00:05:00。

这可以用Flot吗？

Answer 1

是的，这是可能的。

这个想法是使用2个x轴：原始的第一个和第二个x轴，时间范围从午夜开始，持续与原始x轴相同的时间段。

所以例如第一个x轴是int p; ON_CALL(mockObj, my_func(_, _, _, _)). WillByDefault(DoAll( SaveArg<3>(&p), IgnoreResult(InvokeArgument<2>(p)), Return(0)));，第二个：17:40 - 17:55我们每次需要计算（现在我们知道它将是0:00 - ?但是flot需要一个值时间戳）。

这可以让您了解如何计算：

0:00 - 0:15

（如果您发现此时间戳令人困惑，您可以查看此timestamp converter）

由于现在我们的x轴都有两个范围，我们可以将它们添加到选项中：

1467906900000 - 1467906000000 = 900000 // difference between 17:55 - 17:40 (result: 15 minutes in timestamp)

1467842400000 + 900000 = 1467843300000 // 0:00 + 15 minutes (result: 0:15 in timestamp)

问题在于，如果我们没有为其分配任何图形数据，那么第二个x轴也不会出现。幸运的是，我们可以通过传递空数据集来轻松欺骗它：

"xaxes": [{
    "mode": "time",
    "timeformat": "%H:%M",
    "tickSize": [5, "minute"],
    "min": 1467906000000, // 17:40
    "max": 1467906900000, // 17:55
    "timezone": "browser"
  }, {
    "mode": "time",
    "timeformat": "%H:%M",
    "tickSize": [5, "minute"],
    "min": 1467842400000, // 0:00
    "max": 1467843300000, // 0:15
    "timezone": "browser"
  }]

请参阅JSFiddle上的工作示例。

显示Flot时间序列中的传递时间

1 个答案: