将图表呈现为列范围类型

Question

我有以下图表我希望将工作时间间隔渲染为列范围并将图表放在接近xAxis的位置。

在下面的代码中使用这部分代码

chart: {
    spacingTop: 0,
    paddingTop: 0,
    zoomType: 'x',

},

我得到以下图表：

https://jsfiddle.net/62jq6zsd/

但我没有得到正确的结果。

Answer 1

将代码放入小提琴中，我可以看到没有绘制任何内容：

• http://jsfiddle.net/jlbriggs/3d3fuhbb/225/

查看您的数据，原因很明显。您将数据设置为;

{
  x: 1483358580000,
  y: 1
}

但columnrange系列类型需要low和high的数据元素，并带有可选/推断的x值。

此外，您有null x的值，这对于Highcharts不起作用 - 必须始终有x值，无论是设置还是推断。

它也是不必要的 - 因为线条是连续的，所以需要使用null点来打破line系列。 columnrange类型已经内置了中断。

最后，您将x和y混淆了 - 因为您正在反转图表，轴交换位置 - x是垂直轴，{{1}是水平的。

如果您的值是时间，就像上面的y一样，您需要指定两个时间戳 - 一个用于开始，一个用于每个条形段的结尾。

Highcharts演示示例：

1483358580000

（在此示例中， data: [ [-9.7, 9.4], [-8.7, 6.5], [-3.5, 9.4], [-1.4, 19.9], [0.0, 22.6], [2.9, 29.5], [9.2, 30.7], [7.3, 26.5], [4.4, 18.0], [-3.1, 11.4], [-5.2, 10.4], [-13.5, 9.8] ] 值由数据点的顺序决定，不需要明确设置。在您的情况下，您需要指定x值，因为你想要它们都在同一条线上）

演示小提琴：

• http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/columnrange/

{{EDIT}}

以图表为基础，这是一个更新版本。

代码（基于您的数据，为演示编辑）

x

小提琴：

• http://jsfiddle.net/jlbriggs/qdza1032/

{{再次修改评论}}

为减少系列之间的空间，您有多种选择

1）降低图表的高度

2）增加栏的宽度

1/2）两者都做！

3）使用你的轴min / max和minPadding / maxPadding设置，如果你想要系列的一面而不是另一面。

选项一，小提琴：

• http://jsfiddle.net/jlbriggs/qdza1032/1/

选项三：

• http://jsfiddle.net/jlbriggs/qdza1032/2/