如何在c3.js条形图中获取四舍五入的列 [英] How to get rounded columns in c3.js bar chart
问题描述
我想知道是否有人知道如何绕过c3.js条形图中的列的角?我在网上找到的骇客似乎没有用,所以我希望这里能有所帮助!
I was wondering if anyone know how to round the corners of the columns in a c3.js bar chart? The hacks I have found online, doesn't seem to work, so I hope somewhere here can help!
谢谢:)
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:-
这是jsFiddle:- jsFiddle:圆形条形图
Here is the jsFiddle:- jsFiddle: Rounded bar charts
.c3-legend-item-tile, .c3-xgrid-focus, .c3-ygrid, .c3-event-rect, .c3-bars path {
shape-rendering: auto;
}
您需要基本重写某些c3.js函数并提供四舍五入的逻辑
You need to basically override certain c3.js functions and provide logic for getting rounded corner by providing multiple points near the corner.
否则,条形图中的所有条形都是具有4个点的多边形。解决方案是为酒吧提供更多积分。
Otherwise all bars in a bar chart are polygons with 4 points. Solution is to provide bars with more points.
这篇关于如何在c3.js条形图中获取四舍五入的列的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!