[英]How to get rounded columns in c3.js bar chart
I was wondering if anyone know how to round the corners of the columns in a c3.js bar chart? 我想知道是否有人知道如何绕过c3.js条形图中的列的角? The hacks I have found online, doesn't seem to work, so I hope somewhere here can help! 我在网上找到的骇客似乎无法正常运作,因此希望在这里有所帮助!
Thank you :) 谢谢 :)
var mph_chart = c3.generate({
bindto: '#mph_chart',
padding: {
top: 10,
right: 50,
bottom: 10,
left: 190
},
bar: {
width: 35,
},
color: {
pattern: ['#3366ff']
},
data: {
x: 'x',
labels:true,
columns: [
['x', 'Porsche Macan','Porsche Macan S','Porsche Macan S Diesel','Porsche Macan Turbo','Porsche Macan GTS'],
['0-62 mph in seconds', 6.7, 5.4, 6.3, 4.8, 5.2]
],
type: 'bar',
},
legend: {
show: true
},
axis: {
rotated: true,
x: {
type: 'category',
tick: {
multiline: false
} // this needed to load string x value
}
},
tooltip: {
show:false
},
bar: {
width: {
ration: .7
},
spacing: 2
}
});
I have tried it for simple bar charts, which provides bars with rounded corner as shown below:- 我已经尝试过使用简单的条形图,它提供了带有圆角的条形,如下所示:-
Here is the jsFiddle:- jsFiddle: Rounded bar charts 这是jsFiddle: -jsFiddle:圆形条形图
.c3-legend-item-tile, .c3-xgrid-focus, .c3-ygrid, .c3-event-rect, .c3-bars path {
shape-rendering: auto;
}
You need to basically override certain c3.js functions and provide logic for getting rounded corner by providing multiple points near the corner. 您需要基本重写某些c3.js函数,并通过在拐角处提供多个点来提供获取圆角的逻辑。
Otherwise all bars in a bar chart are polygons with 4 points. 否则,条形图中的所有条形都是4点的多边形。 Solution is to provide bars with more points. 解决方案是为酒吧提供更多积分。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.