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

Question

我正在使用 morris.js 创建栏 chart.But 栏的大小太宽了。你能建议我如何限制栏的大小吗？

使用 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 的值以满足您的最大条形宽度标准。

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

Bar chart horizontal bar width i want fixed or max width for each horizontal bar

bar-chart

morris.js