javascript 如何增加 morris.js 栏的宽度或在栏之间添加空间？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23558766/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to increase width of morris.js bar or add space between bars?
提问by AabinGunz
I have this morris.js bar with multiple bars, i want to change width of the bars or make space between durations. From the below image is there a way to provide either more space between FebMarchand Aprilor is there a way to adjust bar widths?
我有这个带有多个条的 morris.js 条，我想更改条的宽度或在持续时间之间留出空间。从下图中，有没有办法在FebMarch和之间提供更多空间，April或者有没有办法调整条宽？
Here is my code
这是我的代码
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'
});
you can test it here
你可以在这里测试
回答by chiliNUT
The api doc pages seem to omit several properties. You can learn about more by looking at the source, where I found these 2 guys:
api 文档页面似乎省略了几个属性。您可以通过查看来源了解更多信息，我在那里找到了这两个家伙：
barGapand barSizeRatio
barGap和 barSizeRatio
barGapis an integer that sets the space between bars in a single bar group. It defaults to 3. Increase it to space them further, decrease it to bring them closer together. barSizeRatiois the proportion of the width of the entire graph given to bars. It defaults to 0.75. Increase the number closer to 1 to make the bars wider, if its =1 the bars will take up the entire graph, if its > 1 bars will overlap.
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'
});
