如何增加morris.js栏的宽度或在栏之间增加空格？ [英] How to increase width of morris.js bar or add space between bars?

问题描述

我有这个带有多个条形的morris.js栏，我想改变条形的宽度或在持续时间之间留出空间。从下面的图像有一种方法可以提供更多的空间 2月 3月和 4月或者有没有办法调整条宽？

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 Feb March and April or is there a way to adjust bar widths?

这是我的代码

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

你可以测试它这里

推荐答案

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

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:

barGap 和 barSizeRatio

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

barGap is 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. barSizeRatio is 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.

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

这篇关于如何增加morris.js栏的宽度或在栏之间增加空格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！