C3.js堆叠柱状图实现两组数据重叠显示的技术需求

我刚好做过类似的需求，这就给你一个完整的C3.js实现方案，完美匹配你提到的所有要求：

核心需求拆解与实现思路 #

• 第二组数据绑定到Y2轴：单独为data3、data4配置Y2轴关联，同时开启Y2轴显示
• 两组柱子重叠+第二组更窄：通过柱子宽度比例设置，让第二组堆叠柱比第一组更窄，自然实现重叠效果
• data3透明效果：用带透明度的RGBA颜色值配置data3的样式

完整代码示例 #

// 初始化重叠堆叠柱状图
var chart = c3.generate({
    bindto: '#chart', // 绑定到页面中的DOM元素
    data: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 50, 20, 10, 40, 15, 25],
            ['data3', 130, 100, 140, 200, 160, 120],
            ['data4', 20, 40, 60, 80, 100, 120]
        ],
        // 定义两组堆叠数据
        groups: [
            ['data1', 'data2'], 
            ['data3', 'data4']  
        ],
        types: {
            data1: 'bar',
            data2: 'bar',
            data3: 'bar',
            data4: 'bar'
        },
        // 将第二组数据绑定到Y2轴
        axes: {
            data3: 'y2',
            data4: 'y2'
        },
        // 设置颜色：data3用透明RGBA，data4用对应实色
        colors: {
            data3: 'rgba(128, 179, 255, 0.3)',
            data4: '#4d94ff'
        },
        bar: {
            width: {
                // 第二组柱子宽度设为第一组的50%，实现窄柱效果
                ratio: 0.5
            }
        }
    },
    axis: {
        y: {
            label: {
                text: '第一组数据轴',
                position: 'outer-middle'
            }
        },
        y2: {
            show: true, // 显示Y2轴
            label: {
                text: '第二组数据轴',
                position: 'outer-middle'
            }
        },
        x: {
            type: 'category',
            categories: ['类别1', '类别2', '类别3', '类别4', '类别5', '类别6']
        }
    },
    grid: {
        y: {
            show: true
        }
    }
});

关键配置说明 #

1. 堆叠分组：通过data.groups明确划分两组堆叠数据，确保每组内部的柱子是堆叠关系，两组之间是重叠关系
2. Y2轴绑定：data.axes配置让data3和data4使用独立的Y2轴，避免两组数据因数值范围差异导致显示异常
3. 窄柱设置：data.bar.width.ratio控制第二组柱子的相对宽度，0.5表示宽度是第一组的一半，这样重叠时不会完全遮挡第一组数据
4. 透明效果：使用rgba()颜色值给data3设置透明度，你可以调整最后一个参数（0-1之间）来控制透明程度，完全匹配你需要的Excel效果

你可以根据实际业务数据调整数值、颜色、宽度比例以及轴标签等参数，来达到最贴合需求的展示效果。

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