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

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

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

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

知道这样的图形叫做什么？
知道如何使用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轴上使用“序数”是要走的路 - ＆gt; 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如何从您的给定点到下一个点。

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

1 个答案: