我们如何在c3js中为多组条形添加条形间距？

Question

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

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

    }
});

这里我们已经将数据分为三组显示在data1，data2和data3中，但这些图形没有任何空格，如图像中所示

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

Answer 1

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

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

Answer 2

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

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

});

Answer 3

使用此

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

Answer 4

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

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

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