Question

我想提及上一个问题：

stacked bar chart with overlapping bars C3js

然而，我唯一的问题是我想重叠列以显示（作为一个例子）来自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和Total women根据{{1}}和Total men的{{1}}属性显示y条，因为我们希望将它们重叠。

然后隐藏Passed women创建的所有Passed men元素，然后在用户调整浏览器窗口大小时将所有这些元素包装在要调用的函数中。

这里是完整的fiddle或plunkr

c3（v4）条形图中的重叠条形图

1 个答案: