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>，然后将所有这些包装到一个函数中，以便用户调整浏览器窗口的大小。

这里是完整的小提琴或 plunkr

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屋！