如何在c3js条形图中获得圆角

Question

看起来像 none 基于 d3 的图表库，如 nvd3，c3js 支持条形图的圆角。

我的项目需要条形图中的条形看起来如下图所示，带有渐变和圆角。

在 c3js 中实现此目的的任何 hack 或配置？

Answer 1

需要重写c3js函数generateDrawBar，并提供获取圆角的逻辑，一般c3js路径元素由四个点组成，分别对应条的四个角

现在您需要提供逻辑以在标准杆的 top-left 和 top-right 拐角处设置多个点，以平滑条形拐角。

还有几种情况：-

1) 堆叠条形图的圆角。

2) 负值的圆角，向下或相反方向的条。

rounded corner bars jsFiddle

圆角 c3js 条形图快照

var chart = c3.generate({
bindto: '#chart',
padding: {
    left: 200,
    right: 100,
    top: 20,
    bottom: 20
},
data: {
    x: 'x',
    labels: true,
    columns: [
        ['data1',40, 30, 200, 100, 400, 150, 250, 50, 100, 250,67,190,48,123,76,54,254],
        ['x','Travel and Hospitality','Life Science and Pharma', 'Saas and Cloud', 'Hi-tech Manufacturing', 'Software', 'Business Services', 'Govt/Public Sector', 'Energy', 'Manufacturing', 'Healthcare','Media','Internet','Retail','Biotech','Automobile','Consumer Goods','Financial Services']
    ],
    type: 'bar'
},
axis: {
    rotated: true,
    x: {
        type: 'category',
        tick:{
            multiline: false
        }
    }
},
legend: {
    show: false
},
tooltip: {
    show: false
},
bar: {
    width: {
        ratio: .7
    },
    spacing: 2
}
});

如何在c3js条形图中获得圆角

How to get rounded corner in c3js bar charts

javascript

charts

d3.js

c3.js