[英]How to get rounded corner for grouped bar chart(stack chart) in c3.js
请帮助我在c3.js中为堆叠图表(分组条形图)添加圆角。
我在这里找到了类似的方法如何在c3.js条形图中获取四舍五入的列,但这是正常的条形图。 它不适用于堆积图。 我对d3.js不熟悉。 谢谢 :)
var chart = c3.generate({
bindto: "#id",//element
padding: {
left: 50,
right: 50,
top: 20,
bottom: 20
},
data: {
// x : 'x',
columns: [//Data Arry
['data1', 30, 200, 200, 400, 150, 250, 30, 200, 200, 400, 150, 250, 0, 100, 100, 200, 150, 400, 400, 400, 400, 400, 400, 400],
['data2', 30, 200, 200, 400, 150, 250, 30, 200, 200, 400, 150, 250, 0, 100, 100, 200, 150, 400, 400, 400, 400, 400, 400, 400],
['data3', 30, 200, 200, 400, 150, 250, 30, 200, 200, 400, 150, 250, 0, 100, 100, 200, 150, 400, 400, 400, 400, 400, 400, 400],
],
type: 'bar',
groups: [
['data1', 'data2', 'data3']//grouping data to get stacked chart
],
},
bar: {
width: {
ratio: .6 //setting width of bar
},
spacing: 2//setting space between bars
},
grid: {
y: {//grid lines
show: true,
color:'red'
}
},
axis: {
x: {
type: 'category',
tick: {
rotate: -90,
multiline: false,
format: "%b" //format: "%e %b %y"
},
height: 50,
categories: ['2016', '2017', '2016', '2017', '2016', '2017', '2016', '2017', '2016', '2017', '2016', '2017', '2016', '2017', '2016', '2017', '2016', '2017', '2016', '2017', '2016', '2017', '2016', '2017'] //Xaxis labels
},
y2: {
show: false
},
y: {
tick: {
format: d3.format("s")//format y axis
}
}
},
color: {
pattern: ['#fc7f86', '#34dfe2', '#dc92fa', '#43daa1'] //color code
}
});
将数据顺序设置为空
data: {
columns: [
['data1', 30, 200, 200, 400, 150, 250, 30, 200, 200, 400, 150, 250, 0, 100, 100, ],
['data2', 30, 200, 200, 400, 150, 250, 30, 200, 200, 400, 150, 250, 0, 100, 100, ],
['data3', 30, 200, 200, 400, 150, 250, 30, 200, 200, 400, 150, 250, 0, 100, 100, ],
],
type: 'bar',
groups: [
['data1', 'data2', 'data3']
],
order: null
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.