如何增加 morris.js 条的宽度或在条之间添加空间？答案

【问题标题】：How to increase width of morris.js bar or add space between bars?如何增加 morris.js 条的宽度或在条之间添加空间？
【发布时间】：2017-08-01 00:26:03
【问题描述】：

我有这个带有多个条的 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'
});

你可以测试一下here

【问题讨论】：

标签： javascript jquery css morris.js

【解决方案1】：

api 文档页面似乎省略了几个属性。您可以通过查看源来了解更多信息，我在其中找到了这 2 个人：

barGap 和 barSizeRatio

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'
});

【讨论】：