使用C3.js时，如何在放大时保持条宽比？

Question

我有一个带有子图的c3.js条形图并启用了缩放。我希望图表能够显示更多的x-tick标签，并在用户选择较小的区域时使条形更宽一些。

这是我的图表缩小（左）和放大（右）的原因：

Here's a fiddle.

var chart = c3.generate({
    bindto: '#chart',
    data: {
      x: 'x',
      columns: [
        ['x', '2015-01-01', '2015-02-01', '2015-03-01', '2015-04-01', '2015-05-01', '2015-06-01', '2015-07-01', '2015-08-01', '2015-09-01', '2015-10-01', '2015-11-01', '2015-12-01', '2016-01-01', '2016-02-01', '2016-03-01', '2016-04-01', '2016-05-01', '2016-06-01', '2016-07-01', '2016-08-01'],
        ['y', 100, 200, 300, 200, 100, 450, 800, 900, 12, 70, 500, 450, 20, 100, 200, 300, 200, 100, 450, 800, 900, 12, 70, 500, 450, 20]
      ],
      type: 'bar',
      color: function(color, d) {
        var color = d3.rgb("#E47911");
        if (d.index % 2 == 0) {
          color = color.darker(1.2);
        }
        return color;
      }
    },
    bar: {
      width: { ratio: 1.0 }
    },
    axis: {
      x: {
        type: 'timeseries',
        tick: {
          format: "%b",
          fit: true
        }
      },
    },
    subchart: {
      show: true
    }, 
    zoom: {
      enabled: true
    }
});

我喜欢在放大时看起来更像这样：

有没有办法使用C3实现这一目标？

Answer 1

将代码复制到你的小提琴js面板。 类型：＆＃39;类别＆＃39; 会更改条形比例。

var chart = c3.generate({
bindto: '#chart',
data: {
  x: 'x',
  columns: [
    ['x', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    ['y', 100, 200, 300, 200, 100, 450, 800, 900, 12, 70, 500, 450, 20, 100, 200, 300, 200, 100, 450, 800, 900, 12, 70, 500, 450, 20]
  ],
  type: 'bar',
  color: function(color, d) {
    var color = d3.rgb("#E47911");
    if (d.index % 2 == 0) {
      color = color.darker(1.2);
    }
    return color;
  }
},
bar: {
  width: { ratio: 0.8 }
},
axis: {
  x: {
    type: 'categories',
    tick: {
      format: "%b",
      fit: true
    }
  },
},
subchart: {
  show: true
}, 
zoom: {
  enabled: true
}
});