C3.js 之间的差距吧答案

【问题标题】：Gap between bars C3.jsC3.js 之间的差距吧
【发布时间】：2016-12-30 15:17:06
【问题描述】：

我想在条之间放置间隙。我试过 ; ... bar:{ width: { ratio: 0.5 } }, ... 上面的代码对我不起作用。问题是：为什么它不起作用或者我怎样才能让它起作用？

【问题讨论】：

您将不得不更加努力地解决您的问题。编写minimal example here，我可以证明该选项工作得很好。为什么它对您不起作用，没有人会知道直到您为我们重现问题。

【解决方案1】：

尝试类似：

 

var colors = ['#1f77b4', '#aec7e8', '#ff7f0e'];


var chart = c3.generate({
  bindto: '#chart',
  data: {
    columns: [
      ['value: ', 20, 14, 3]
    ],
    type: 'bar',
    labels: true,

    color: function(color, d) {
      return colors[d.index];
    }

  },
  axis: {
    x: {
      type: 'category',
      categories: ['cat1', 'cat2', 'cat3']
    }
  },
  bar: {
    width: {
      ratio: 0.5,
    }
  },
  grid: {
    focus: {
      show: false
    }
  }

});

<!DOCTYPE html>
<html>
  <head>        
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/c3/0.4.5/c3.min.css" />
  </head>
  <body>
    <div id="chart"></div>
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.6/d3.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/c3/0.4.5/c3.min.js"></script>
  </body>
</html>

【讨论】：

Ratio 并没有在条之间设置间隙，它基本上是 5 行代码，没有做任何事情。也许我应该只为那部分使用 D3.js @MMK
我发现了发生了什么。数据作为一个块被推送到我的 c3 代码中，所以我有 9 个条形图，它接受所有 9 个条形图作为一个，当我输入 ratio 时，它使它作为一个块变小或变大。当它像这样分组时，我需要在条形之间留出空隙。（在分组的数据部分：假，这不能解决问题）
另一种说法是：数据不是作为列接收的：[['data1', 20,30,30]] 它是作为列接收的：[ ['data1', 20], [ 'data2', 30] ]