在Highcharts组合条形图中控制条之间的间距

时间:2014-01-08 10:13:24

标签: highcharts spacing

我在一个页面上有两个使用highcharts库绘制的条形图。我需要在这些图表中保持条形图的宽度和组中条形图之间的相同间距。容器的大小在图表中是不同的,并根据UI布局固定。

剧情选项片段:

    series: {             
         grouping:true,
         groupPadding:0.12,
         borderWidth: 0,  
         events: {
           legendItemClick: function () {
           return false; 
           }
         }
    }

我尝试过各种组合,这里有一个jsfiddle链接 - http://jsfiddle.net/U6mhy/29/

在上面的链接中,尽管两个图表之间的条形宽度相同,但单个组中条形之间的间距不同。实际上,chart1中的条形似乎很难分组。

我尝试过指定groupPadding,pointPadding和pointWidth的不同值,但无法在这些图表之间实现一致的间距。

请建议是否有任何其他选项组合可以帮助我实现这一目标。

-Thanks

1 个答案:

答案 0 :(得分:6)

为了说清楚,你可以使用(不是两者)之一:

  • pointWidth:强制Highcharts绘制固定宽度的条形
  • pointPadding + groupPadding:根据这些值和图表宽度/高度计算条形宽度

想一想:当你有不同数量的酒吧时,如何为所有图表设置相同的条形宽度?答案是根据列数更改图表的宽度。例如,你有4个酒吧?图表高度/宽度将是总和:4 x 10px + some_padding。如果你有10个条形,当高度/宽度为:10 x 10px + some_padding(与上面相同)。我希望这是你想要实现的目标。