c3 (v4) 条形图中的重叠条

Question

我想参考一下之前的问题：

但是，我唯一的问题是我想重叠列以显示（作为示例）4 名学生中有 3 名通过了该科目。现在我有一个高度为 3 的条形图，顶部有一个高度为 4 的条形图，这使得它为 7，我想要一个 4 条形图和一个 3 条形重叠的条形图。如何更改我的代码？感谢：

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

csv 文件 number_students 是：

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

当前的是这样的：

而我要的应该是重叠的，比如2010年，我们只能看到一点绿色（没通过的7个女同学），因为前面的蓝色只比前面的少了7个单位绿色的。而右边29个单位的红色（没及格的男同学）。

Answer 1

我以前从未使用过 c3 所以我不知道 c3 中是否有任何图表可以特别做到这一点。我能够通过使用 d3.

来解决这个问题

首先，出于某种原因，c3 使用 path 而不是 rects，否则更改柱的 width 会更容易。

我所做的是首先使用 d3.select(**bars**).node().getBBox() 将所有四个类别的条形图的所有尺寸存储到四个不同的数组中，然后调整 y 和 width [=20] =] 和 Total men 条根据 Passed women 和 Passed men 的 y 属性，因为我们想重叠它们。

然后隐藏由 c3 创建的所有 path 元素，然后将所有这些元素包装在用户调整浏览器大小时调用的函数中 window。

这是完整的 fiddle or a plunkr

c3 (v4) 条形图中的重叠条

Overlapping bars in c3 (v4) bar chart

html

javascript

bar-chart

d3.js

c3.js