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

【问题标题】：How to set minimum bar width of C3 Bar chart.如何设置 C3 条形图的最小条形宽度。
【发布时间】：2016-06-17 09:13:20
【问题描述】：

我想使用比率设置 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>

请提出实现此目的的方法。

【问题讨论】：

你的具体要求是什么@Raichu
@Dinesh- 具体来说，我只想设置 C3 条形图每个条的最小宽度。默认情况下，它是响应式的，并且条形宽度会根据容器宽度自动为每个条形设置。这里 m 试图设置图表每个条的最小宽度。我希望你能明白我的想法。

标签： javascript jquery d3.js c3.js

【解决方案1】：

你可以使用

bar: {
  width: {
    ratio: 0.2
  }
}

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

【讨论】：