C3.js堆叠面积图点击事件：实现区域独立点击跳转需求

我刚好碰到过类似的需求，给你分享一个可行的解决方案，能实现整个区域可点击且仅触发对应数据系列的跳转：

核心思路 #

先设置data.selection.grouped = true确保整个堆叠区域可点击，然后在点击事件里通过DOM元素的专属标识，精准定位用户实际点击的数据系列，再执行对应路由跳转——这样就能避开grouped: true时触发所有数据的问题。

具体实现步骤 #

1. 初始化图表时开启分组选择，同时绑定onclick事件
2. 在点击回调中，从事件目标的DOM元素里提取对应的数据系列ID
3. 根据ID匹配对应路由，执行跳转逻辑

代码示例 #

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 50, 20, 10, 40, 15, 25],
            ['data3', 130, 100, 140, 200, 150, 50]
        ],
        type: 'area',
        groups: [['data1', 'data2', 'data3']], // 堆叠配置
        selection: {
            grouped: true // 开启整个区域可点击
        },
        onclick: function (d, element) {
            // 向上遍历DOM，找到带有data-id属性的元素（C3会给每个系列区域绑定这个属性）
            let target = element;
            while (target && !target.getAttribute('data-id')) {
                target = target.parentNode;
            }
            
            if (target) {
                const dataId = target.getAttribute('data-id');
                // 根据数据ID跳转到对应路由
                switch(dataId) {
                    case 'data1':
                        window.location.href = '/your/data1/route'; // 替换成实际路由
                        break;
                    case 'data2':
                        window.location.href = '/your/data2/route';
                        break;
                    case 'data3':
                        window.location.href = '/your/data3/route';
                        break;
                    default:
                        break;
                }
            }
        }
    }
});

关键说明 #

• C3渲染堆叠面积图时，每个数据系列的区域路径元素会自动带上data-id属性，值就是你定义的列名（比如data1）
• 通过遍历点击的DOM元素找到这个data-id，就能精准判断用户点击的是哪个区域，不会触发其他数据系列的事件
• 这种方式既保留了grouped: true带来的整块区域可点击的体验，又实现了按系列跳转的需求

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