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

Question

我在一个页面上有两个使用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的不同值,但无法在这些图表之间实现条形之间的一致间距.

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

-谢谢

Answer 1

为了说清楚,你可以使用(不是两个)中的一个:

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

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