我们如何在 c3js 中为多组条形图添加条形之间的空间？答案

【问题标题】：How can we add the space between bars for multiple groups of bars in c3js?我们如何在 c3js 中为多组条形图添加条形之间的空间？
【发布时间】：2016-02-25 03:37:20
【问题描述】：

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30],
            ['data2', 130],
            ['data3', 130]

        ],
        type: 'bar'
    },
    bar: {
        width: 50,

    }
});

在这里，我们将数据分为三组，分别显示为 data1、data2 和 data3，但附上图表时没有任何空格，如图像中的

如何在条之间添加空间？

【问题讨论】：

标签： javascript d3.js c3.js

【解决方案1】：

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30],
            ['data2', 130],
            ['data3', 130]

        ],
        type: 'bar'
    },
    bar: {
        space: 0.25
    }
});

【讨论】：

非常感谢！这目前不在c3js.org/reference.html 文档中，如果我没有找到这个答案，我正要求助于 svg 操作。（通过指定负值，相同的bar.space 设置似乎也可用于获取重叠条。）

【解决方案2】：

感谢@zohaib-ijaz 的评论。我想出了：

d3.selectAll(".c3-target-nameofyourclass")
    .selectAll(".c3-bar")
    .attr("transform", "translate(-5, 0)");

将栏从“nameofyourclass”列向左移动 5 个像素。

【讨论】：

【解决方案3】：

这是在 c3 中实现您想要的方式。据我所知，您无法在不同列之间创建空间。

var chart = c3.generate({
      data: {
        columns: [
            ['barData', 30, 130, 130]
        ],
         type: 'bar'
    },
    axis: {
        x: {
            type: 'category',
            categories: ['data1', 'data2', 'data3']
        }
    },
    bar: {
        width: 50,
    }

});

【讨论】：

【解决方案4】：

使用这个

bar: {
    width: {
        ratio: 0.5 // this makes bar width 50% of length between ticks
    }

【讨论】：

在这种情况下保持宽度并不能解决上面代码情况下的问题这里数据表示为三组，其各个组的数据不同。
检查元素栏并检查它是什么css class。假设它是bar 然后应用类似 .bar { padding-left: 5px;} 的样式
如果要表示单个数据集，您将创建三个不同的列，为什么不将其表示为 ['data', 30,130,130]？