highcharts - 如何使用 HighCharts 创建 "on/off"图表？

Question

我读过 the documentation很多次，但我似乎无法找到制作这样的图表的方法。也许是因为我不知道它叫什么，所以我什至不知道该找什么。让我试着解释一下我要做什么。

通常如果你有一系列这样的点:

3 May, 5:00 PM ---> 0
3 May, 5:20 PM ---> 3
4 May, 5:00 PM ---> 0
4 May, 5:20 PM ---> 3

如果您制作标准的线图， Highcharts 将绘制两者之间的值增加。所以我最终得到了这个:

但问题是，显示的值实际上是在某个时间点发生变化的值。换句话说，我想要的是:

更重要的是，时间间隔似乎不正确。你会注意到它创造了一个完美的之字形，即使第一点和第二点之间的时间是 20 分钟(下午 5 点到下午 5:20)，第二点和第三点是 23 小时 40 分钟(5 月 5 日 5 月 3 日) :20 PM 和 5 月 4 日下午 5 点)。所以我真正想要的是:

1. 知道这样的图叫什么吗？
2. 知道如何使用 HighCharts 制作它吗？

更新

我现在能想到的唯一解决方案是在真实点之间伪造点。因此，例如，如果该值在下午 5 点为 0，并在下午 5:20 变为 3，那么我将在这两者之间添加 19 个点。因此，在 5:01 时我会将其设置为 0，5:02 时我也会将其设置为 0，然后 5:03 等。直到 5:19。但即使是这种方法也会导致从 5:19 上升到 5:20 的线略微倾斜。这正是我实际上想要避免的。

有什么想法吗？

更新 2

“step : left”解决方案确实解决了我一半的问题，但出于某种原因我仍然有这个问题:

您现在应该看到，尽管我有台阶，但它们并没有达到预期的间距。对于 5 月 5 日的 17:13，我预计图表更接近 5 月 6 日的标记，而不是 5 月 5 日的标记。

关于为什么会发生这种情况有什么想法吗？

更新 3

我为我的问题创建了一个 jFiddle:https://jsfiddle.net/coderama/ubz7m0Lh/4/

更新 4

根据 wergeld 的输入，似乎在 x 轴上使用“序数”是可行的方法 --> http://api.highcharts.com/highstock#xAxis.ordinal

但它产生了一个非常奇怪的图表:https://jsfiddle.net/coderama/6tz8h53x/1/

我会继续寻找，但至少感觉正在取得进展!

Answer 1

您正在寻找的是 step选项。您可以设置如下内容:

$(function() {
  $('#container').highcharts({
    title: {
      text: 'Step line types, with null values in the series'
    },
    xAxis: {
      type: 'datetime',
            tickInterval: 86400000
    },
    series: [{
      data: [
        [Date.UTC(2016, 04, 3, 17, 00), 0],
        [Date.UTC(2016, 04, 3, 20, 00), 3],
        [Date.UTC(2016, 04, 4, 17, 00), 0],
        [Date.UTC(2016, 04, 5, 18, 00), 3],
        [Date.UTC(2016, 04, 5, 19, 00), 0],
        [Date.UTC(2016, 04, 6, 20, 00), 3],
        [Date.UTC(2016, 04, 7, 17, 00), 0]
      ],
      step: 'left'
    }]
  });
});

step 参数告诉 highcharts 如何从给定点转到下一个点。