如何设置C3条形图的最小条宽。

Question

我想设置C3条形图的最小条宽以及它们之间的间距。我试图设置单条的最小宽度而不是整个图表。

var chart = c3.generate({
  bindto: '#div1',  
  data: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250]
        ],
        type: 'bar'
    },
    bar: {
        width: {
            ratio: 0.5 // this makes bar width 50% of length between ticks
        }
        // or
        //width: 100 // this makes bar width 100px
    }
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" />
 
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<div id="div1"></div>

请建议一种方法来实现这一目标。

Answer 1

您可以使用

执行此操作

bar: {
  width: {
    ratio: 0.2
  }
}

默认值为0.6，您可以通过更改此值来更改条形的宽度，但条形间距将保持不变。