Javascript 如何在c3js条形图中获得圆角
看起来像nvd3、c3js这样的基于d3的图表库都不支持条形图的圆角 我需要条形图中的条形图如下所示,为我的项目提供渐变和圆角Javascript 如何在c3js条形图中获得圆角,javascript,d3.js,charts,c3.js,Javascript,D3.js,Charts,C3.js,看起来像nvd3、c3js这样的基于d3的图表库都不支持条形图的圆角 我需要条形图中的条形图如下所示,为我的项目提供渐变和圆角 在c3js中实现这一点的任何黑客或配置?都需要重写c3js函数generateDrawBar,并提供获取圆角的逻辑,通常c3js路径元素由四个点组成,对应于该条的四个角 现在你需要提供逻辑以在PAR的左上角和右上角有多个点来平滑条角。 仍有几起案件:- 1) 用于堆叠条形图的圆角 2) 负值的圆角,向下或相反方向的条 圆角c3js条形图快照 如果使用d3.js系列
在c3js中实现这一点的任何黑客或配置?都需要重写c3js函数generateDrawBar,并提供获取圆角的逻辑,通常c3js路径元素由四个点组成,对应于该条的四个角
现在你需要提供逻辑以在PAR的左上角和右上角有多个点来平滑条角。 仍有几起案件:-
1) 用于堆叠条形图的圆角 2) 负值的圆角,向下或相反方向的条 圆角c3js条形图快照如果使用d3.js系列,条形图的每个条形图必须是一个“rect”元素,并且rect元素具有“rx”和“ry”属性。您可以设置这些属性来创建圆角。不,使用的svg元素是c3jsp的PATH。非常感谢。我添加了堆叠条形图的案例,并将解决方案更新为
d3.v4
。不过我有个问题。工具提示仅显示在中间栏上。看看这个JSFIDLE。嘿,这个解决方案很有效,谢谢。我想扩展功能,并使所有的角落圆角。你能指导我如何做到这一点吗。
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
}
});