条形图水平条宽度我想要每个水平条的固定或最大宽度

Question

我正在使用morris.js创建条形图。但是条形图的尺寸太宽。 你能建议我如何限制条形尺寸？

使用Java脚本代码

  var bar = new Morris.Bar({
      element: 'bar-chart',
      resize: true,
      data: [
        {y: '2012', a: 100, b: 90}
      ],
      barColors: ['#00a65a', '#f56954'],
      xkey: 'y',
      ykeys: ['a', 'b'],
      labels: ['CPU', 'DISK'],
      hideHover: 'auto'
    });

Answer 1

您可以使用barSizeRatio来控制条的宽度。所以，当你有几个酒吧，例如小于5，将barSizeRatio设置为0.2。对于超过5个柱，不要指定barSizeRatio，让图表控件弄明白。

jsfiddle http://jsfiddle.net/bv4xezh7/1/

Morris.Bar({
 barSizeRatio:0.2,
  element: 'chart',
  data: [
    { date: '04-02-2014', value: 3 },
    { date: '04-03-2014', value: 10 },

  ],
  xkey: 'date',
  ykeys: ['value'],
  labels: ['Orders']
});

您可以通过计算图表控件的宽度使其更具动态性，然后确定barSizeRatio的值以满足您的最大条宽度标准。