C3(V4)条形图中的重叠条形 [英] Overlapping bars in c3 (v4) bar chart
问题描述
我想参考上一个问题:
我想要的那个应该重叠,例如,在2010年,我们只会看到一点绿色(未通过的7名女学生),因为前面的蓝色仅比绿色少7个单位。在右边的29个红色单元中(未通过的男性学生)。
我以前从未与 c3
一起工作过,所以我不知道如果 c3
中有任何图表可以特别做到这一点。我能够通过使用 d3
来解决这个问题。
首先 c3
为条形图使用路径
而不是 rects
用于条形,否则会更改 width <
我要做的是先使用以下命令将所有四个类别的所有条形的尺寸存储到四个不同的数组中 d3.select(** bars **)。node()。getBBox()
,然后调整 y
和宽度
表示女人总数
和总数男人
的条形,根据< 通过女性
和通过男性
的code> y 属性,因为我们想
然后隐藏 c3 $ c创建的所有
路径
元素$ c>,然后将所有这些包装到一个函数中,以便用户调整浏览器窗口的大小。
I would like to make a reference to this previous question:
stacked bar chart with overlapping bars C3js
However, my only problem is that I want to overlap columns to show (as an example) that from 4 students, 3 have passed the subject. Right now I have a bar with height 3 and on top a bar with height 4, which makes it 7 and I want a bar of 4 with a bar of 3 overlapping. How can I change my code? Thanks:
<div id="chart3"></div>
<script>
var chart = c3.generate({
bindto: '#chart3',
data: {
url: '../static/CSV/Chart_data/number_students.csv,
x:'AC_YEAR',
type: 'bar',
groups: [
['Total women', 'Passed women'],
['Total men', 'Passed men']
],
},
axis: {
y: {
label: {
text:"Number of students",
position: "outer-middle"
},
},
x: {
label: {
text:"Year",
position: "outer-center"
},
}
},
size: {
height: 400,
width: 800
},
bar:{
width:{ratio:0.7}
},
legend: {
show: true,
position: 'inset',
inset: {
anchor: 'top-right',
x: 10,
y: 5,
step: 2
}
}
});
</script>
The csv file number_students is:
AC_YEAR,Passed women,Passed men,Total women,Total men
2010,72,239,98,315
2011,77,227,83,276
2012,65,226,93,298
2013,54,215,77,283
2014,63,233,88,294
2015,49,205,64,267
The current one looks like this:
And the one I want should overlap so that, in 2010 for example, we would see only a little of green (the 7 female students that did not passed) because the blue in the front is only 7 units less than the green. And in the right 29 units of red color (the male students that did not passed).
I have never worked with c3
before so I have no idea if there is any chart in c3
that can particularly do this. I was able to solve this by using d3
.
Firstly c3
uses path
for bars instead of rects
for some reason otherwise changing the width
of the bars could have been easier.
What I did was first store all the dimensions of the bars for all four categories into four different arrays using d3.select(**bars**).node().getBBox()
and then adjust the y
and width
for Total women
and Total men
bars according to y
attributes of Passed women
and Passed men
because we want to overlap them.
Then hide all the path
elements created by c3
and then wrap all this in a function to be called when the user resizes the browser window.
Here'a the complete fiddle or a plunkr
这篇关于C3(V4)条形图中的重叠条形的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!