如何将ChartJS点击事件处理逻辑迁移到main.js文件中正常运行

你定义的show_info函数没有接收activeEls、chart两个参数，这两个变量是ChartJS onClick回调的局部入参，不传入的话show_info内部无法访问，执行时会抛出变量未定义错误，因此函数看起来没有运行。

1. 调整main.js中的show_info函数定义，添加入参，同时增加空值判断避免点击图表空白区域时报错：

function show_info(activeEls, chart) {
    if (activeEls && activeEls.length > 0) {
        alert(chart.data.labels[activeEls[0].index]);
    }
}

2. 修改HTML中ChartJS的点击回调，把对应参数传入show_info：

onClick: (evt, activeEls, chart) => {
    show_info(activeEls, chart);
},

精简写法（可选） #

如果不想多包一层匿名函数，可以直接调整函数参数顺序，把show_info直接作为回调赋值：

1. main.js调整函数参数：

function show_info(evt, activeEls, chart) {
    // 可选链写法和上面的判空逻辑效果一致
    if (activeEls?.length) {
        alert(chart.data.labels[activeEls[0].index]);
    }
}

2. HTML中直接绑定函数：

onClick: show_info

要保证main.js的引入顺序在ChartJS配置代码之前，否则会出现show_info未定义的错误。

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