控制 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（与上面相同）。我希望这就是您想要实现的目标。