Javascript 如何在c3js中为多组条添加条间距？

在这里，我们将数据分为三组，分别显示为data1、data2和data3，但图中没有像图像中那样的空格

我们如何在条之间添加空格？

使用此选项

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

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

    }
});

---

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

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

---

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

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

});

---

将条形图从“nameofyourclass”列向左移动5个像素。

在这种情况下保持宽度并不能解决上面代码的问题。此处数据以三组表示，其数据与单个组的数据不同。检查元素条形图并检查它是什么

css class

。假设它是

bar

，然后应用.bar{padding left:5px；}这样的样式。如果要表示单个数据集，您将创建三个不同的列，为什么不将其表示为['data'，30130130130]？非常感谢！这目前不在文档中，如果我没有找到这个答案，我将求助于svg操作。（通过指定负值，相同的

bar.space

设置对于获取重叠条也很有用。）

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

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

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