如何在c3js柱状图中获得圆角

Question

如何在c3js柱状图中获得圆角

javascriptd3.jschartsc3.js

4

看起来像是没有d3基础图表库（如nvd3、c3js等）支持为条形图添加圆角。

我需要我的项目中的条形图的柱子看起来像下面展示的那样，具有渐变和圆角效果。

enter image description here

是否有任何技巧或配置可以在c3js中实现此效果？

- Chetan

如果使用d3.js家族，条形图的每个条形必须是'rect'元素，并且'rect'元素具有'rx'和'ry'属性。您可以设置这些属性以创建圆角。 - toshi

不是，c3js使用的svg元素是PATH。 - Chetan

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Kavitha · Accepted Answer

需要重写c3js函数generateDrawBar并提供逻辑以获取圆角，通常c3js路径元素由四个点对应于条形图的四个角组成。

现在您需要提供逻辑以在顶部左侧和顶部右侧角上有多个点来平滑条形图的角落。

还有几种情况：

1）堆叠条形图的圆角。

2）负值的圆角，指向下或相反方向的条形图。

带圆角的条形图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
}
});