如何增加morris.js栏的宽度或在栏之间增加空格？

我有这个morris.js酒吧有多个酒吧，我想改变酒吧的宽度或在持续时间之间腾出空间。 从下面的图像有一种方法可以在Feb March到April之间提供更多的空间，还是有办法调整条宽？

这是我的代码

 Morris.Bar({ element: 'morris-chart-bar', data: [ { y: 'Feb', a: 75, b: 60, c: 5, d: 50 }, { y: 'March', a: 180, b: 220, c: 140, d: 160 }, { y: 'April', a: 300, b: 340, c: 350, d: 270 } ], xkey: 'y', ykeys: ['a', 'b', 'c', 'd'], labels: ['A', 'B', 'C', 'D'], barColors: ['#0B62A4','#f75b68','#4DA74D','#646464'], hideHover: 'auto' }); 

你可以在这里测试一下

Answer 1

api doc页面似乎省略了几个属性。 你可以通过查看源代码了解更多信息，我找到了这两个人：

barGap和barSizeRatio

barGap是一个整数，用于设置单个条形图组中条形之间的barGap 。 它默认为3.增加它以进一步间隔它们，减少它以使它们更靠近在一起。 barSizeRatio是给予条形的整个图形宽度的比例。 默认为0.75。 将数字增加到接近1以使条形更宽，如果它= 1，条形将占据整个图形，如果它的> 1条形将重叠。

 Morris.Bar({ barGap:4, barSizeRatio:0.55, element: 'morris-chart-bar', data: [ { y: 'Feb', a: 75, b: 60, c: 5, d: 50 }, { y: 'March', a: 180, b: 220, c: 140, d: 160 }, { y: 'April', a: 300, b: 340, c: 350, d: 270 } ], xkey: 'y', ykeys: ['a', 'b', 'c', 'd'], labels: ['A', 'B', 'C', 'D'], barColors: ['#0B62A4','#f75b68','#4DA74D','#646464'], hideHover: 'auto' });