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

时间:2014-05-09 07:20:30

标签: javascript jquery css morris.js

我有这个带有多个条形的morris.js栏,我想改变条形的宽度或在持续时间之间留出空间。从下面的图片中可以找到Feb MarchApril之间的更多空间,还是有办法调整条宽?

enter image description here

这是我的代码

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

1 个答案:

答案 0 :(得分:19)

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

barGapbarSizeRatio

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