Highcharts:列范围图表,其条形高度与y轴中的间隔高度相同

时间:2018-05-16 13:13:32

标签: javascript highcharts highcharts-ng dotnethighcharts angular2-highcharts

我想使用highcharts创建一个列范围图表类型。 我尝试过类似下面的内容:

enter image description here

  • 我想通过以下规范来实现下面的图表: 条形的高度与Y轴值之间的间隙相同,如图所示 图像

  • 消除栏之间的差距。

2 个答案:

答案 0 :(得分:0)

您可以通过在series

中摆弄pointRange来实现理想的行为
series: [{
    name: 'Temperatures',
    data: [
        [-9.9, 10.3],
        [-8.6, 8.5],
        [-10.2, 11.8],
        [-1.7, 12.2],
        [-0.6, 23.1],
        [3.7, 25.4],
        [6.0, 26.2],
        [6.7, 21.4],
        [3.5, 19.5],
        [-1.3, 16.0],
        [-8.7, 9.4],
        [-9.0, 8.6],
    ],
     pointRange: 2
}]

在示例中,我将其设置为2,因为它几乎关闭了条形图之间的整个间隙。 Here你可以找到工作的JSFiddle。

答案 1 :(得分:0)

pointPaddinggroupPaddingborderWidth设置为0

 series: [{
  pointPadding: 0,
  groupPadding: 0,
  borderWidth: 0,
  name: 'Temperatures',
  ...
}]

直播示例:https://jsfiddle.net/smqrhn09/