如何使用 HighCharts 创建“开/关”图表？

Question

我已经阅读了很多次文档，但我似乎无法找到一种方法来制作这样的图表。也许是因为我不知道它叫什么，所以我什至不确定要寻找什么。让我试着解释一下我要做什么。

通常，如果您有这样的一系列要点：

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

如果您制作标准的 LINE GRAPH，高图表将绘制两者之间的值 INCREASE。所以我最终得到了这个：

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

更重要的是，时间之间的间隔似乎不正确。您会注意到它创建了一个完美的锯齿形，即使第一点和第二点之间的时间是 20 分钟（下午 5 点到下午 5:20），第二点和第三点之间的时间是 23 小时 40 分钟（5 月 3 日） ：下午 20 点和 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 如何从给定的点到下一个点。