C3.js(v4)柱状图实现重叠显示的代码修改咨询

我明白你的需求——你想要让「总人数」柱子作为底层，「通过人数」柱子重叠在上方，这样未通过的部分（总人数-通过人数）就能直观显示出来，而不是默认的堆叠相加。

要实现这个效果，我们需要调整C3.js的配置，核心是取消堆叠分组，并控制柱子的绘制顺序和对齐方式，具体步骤如下：

关键修改点 #

• 移除堆叠分组配置：原来的groups选项会让同组的柱子堆叠起来，我们需要删掉它，让同一x轴位置的柱子自然重叠。
• 调整数据系列顺序：把「Total」系列放在「Passed」系列前面，这样C3会先绘制总人数柱子（底层），再绘制通过人数柱子（上层）。
• 设置柱子居中对齐：确保同一x位置的柱子完全重叠，而不是并排。
• 优化柱子宽度与颜色：调整宽度让重叠效果更清晰，用颜色区分层级，方便识别未通过部分。

修改后的完整代码 #

<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',
        // 手动指定系列顺序，确保Total系列先绘制（底层）
        order: ['Total women', 'Total men', 'Passed women', 'Passed men'],
        colors: {
            'Total women': '#7cb342', // 绿色（未通过部分显示此颜色）
            'Passed women': '#f8bbd0', // 浅粉色（通过部分）
            'Total men': '#1e88e5', // 蓝色
            'Passed men': '#bbdefb' // 浅蓝色
        }
    },
    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},
        align: 'center' // 确保同一x位置的柱子居中重叠
    },
    legend: {
        show: true,
        position: 'inset',
        inset: { anchor: 'top-right', x: 10, y: 5, step: 2 }
    }
});
</script>

配套CSV调整（可选） #

如果不想在代码里指定order，可以调整你的CSV列顺序，把Total系列放在前面，这样C3会自动按顺序绘制：

AC_YEAR,Total women,Total men,Passed women,Passed men
2010,98,315,72,239
2011,83,276,77,227
2012,93,298,65,226
2013,77,283,54,215
2014,88,294,63,233
2015,64,267,49,205

效果说明 #

• 总人数柱子（绿色/蓝色）会先绘制，作为底层；
• 通过人数柱子（浅粉/浅蓝）重叠在上方，覆盖对应高度；
• 未通过的人数就是底层柱子露出的部分（比如2010年女生的绿色部分就是98-72=26）；
• 柱子居中对齐后，同一年份的男女柱子会各自重叠，不会互相干扰。

这样就能完美实现你想要的「总人数为底，通过人数重叠在上」的效果啦！

内容的提问来源于stack exchange，提问作者MTT