C3JS饼图点击功能正常，柱状图点击触发Uncaught TypeError: Cannot read properties of undefined (reading 'getItem')错误的问题求助

我之前也碰到过C3 0.4.8版本的这个坑！你遇到的Cannot read properties of undefined (reading 'getItem')错误，是因为这个早期版本的C3在处理柱状图（bar类型）的onclick事件时存在内部逻辑bug：当点击柱状图元素时，C3的内部代码尝试调用一个未被正确初始化的对象的getItem方法，而饼图的点击事件逻辑是独立实现的，所以没有触发这个问题。

下面给你两种可行的解决方案，按需选择：

方案1：升级C3到稳定新版本（推荐） #

这个bug在C3后续的版本（比如0.7.x及以上）已经被修复了，升级是最彻底的解决办法。你只需要替换HTML里的C3和对应兼容的D3依赖即可：

<!-- 替换成新版本的依赖 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.16.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.min.js"></script>
<div id="myChart"></div>
<div id="myChart2"></div>

升级后，你原来的代码不需要做任何改动，柱状图的onclick事件就能正常触发，不会再出现那个错误。

方案2：不升级版本，改用D3绑定点击事件 #

如果你因为某些原因不能升级C3版本，可以绕过C3自带的onclick配置，直接用D3给柱状图元素绑定点击事件：
修改你生成柱状图的代码：

c3.generate({
    bindto: "#myChart2",
    legend: {
        show: false,
    },
    axis: {
        x: {
            type: "category",
        },
    },
    data: {
        columns: data2,
        type: "bar"
        // 这里去掉原来的onclick配置
    },
});
// 用D3手动绑定点击事件
d3.select("#myChart2").selectAll(".c3-bar").on("click", function(d) {
    console.log(d);
    myFunction(d);
});

这种方式直接通过底层的D3来处理点击事件，避开了C3内部的bug逻辑，同样能实现你需要的功能。

另外，如果你临时需要快速规避错误，也可以在原来的onclick回调里用try-catch包裹逻辑，不过这种方式只是掩盖错误，不是根本解决办法，不推荐长期使用：

onclick: function(event2) {
    try {
        myFunction(event2);
    } catch(e) {
        console.log("处理点击事件：", event2);
        // 可以在这里添加自定义的错误处理逻辑
    }
}

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