使用Chart.js环形图调用getElementsAtEventForMode时控制台报错

报错原因 #

你遇到的chart.getElementsAtEventForMode is not a function错误，是因为Chart.js v3及以上版本已经移除了getElementsAtEventForMode方法，这个方法仅存在于v2版本中。

解决方案 #

方案1：使用Chart.js v3+替代方法getElementsAtEvent #

修改点击事件处理代码，替换方法名并修正实例引用问题：

// Pass the canvas ID
let myChart = Chart.getChart('myChart');

//updating chart with new values each time a value is selected
if (myChart) {
    myChart.data.labels = legend;
    myChart.data.datasets[0].data = stats;
    myChart.config.options.plugins.title.text = "Top 5 causes of death in " + country;
    myChart.update();
} else {
    // 保存新创建的图表实例到myChart
    myChart = new Chart('myChart', config);
}

//detecting click on doughnut sections for modal
// 先移除旧的事件处理（避免重复绑定）
if (this.previousClickHandler) {
    removeEventListener("click", this.previousClickHandler);
}

this.clickHandler = function (event) {
    if (!myChart) return;
    // 使用v3+的getElementsAtEvent方法
    const elements = myChart.getElementsAtEvent(event);

    if (elements.length > 0) {
        modal.classList.toggle('hide');
    }
}

this.previousClickHandler = this.clickHandler;
addEventListener("click", this.clickHandler);

方案2：使用Chart.js内置的onClick配置（更推荐） #

直接在图表配置中定义点击事件，无需绑定全局click事件，触发更精准：

// 先在config中添加onClick配置
config.options = {
    // 保留你的其他配置项
    plugins: {
        title: {
            text: "Top 5 causes of death in " + country
        }
    },
    onClick: function(event, elements) {
        if (elements.length > 0) {
            modal.classList.toggle('hide');
        }
    }
};

// Pass the canvas ID
let myChart = Chart.getChart('myChart');

//updating chart with new values each time a value is selected
if (myChart) {
    myChart.data.labels = legend;
    myChart.data.datasets[0].data = stats;
    myChart.options.plugins.title.text = "Top 5 causes of death in " + country;
    // 如果需要动态修改点击逻辑，也可以在这里更新onClick
    // myChart.options.onClick = function(event, elements) { ... };
    myChart.update();
} else {
    myChart = new Chart('myChart', config);
}

额外注意点 #

• 创建新图表时，务必将实例赋值给myChart，避免后续引用undefined。
• 全局绑定click事件会导致点击页面任意位置都触发，使用Chart内置onClick仅在图表区域点击时触发，更符合需求。

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