ChartJS onClick 引发反应路由器错误；

Question

当用户单击图表中的栏时，我尝试使用反应路由器将用户重定向到特定路径。但是chartjs抛出错误；

"react-chartjs-2": "^4.2.0",
"chart.js": "^3.8.0",


Uncaught TypeError: Cannot read properties of undefined (reading 'handleEvent')
    at Object.afterEvent (chart.esm.js:8068:1)
    at callback (helpers.segment.js:92:1)
    at PluginService._notify (chart.esm.js:4946:1)
    at PluginService.notify (chart.esm.js:4933:1)
    at Chart.notifyPlugins (chart.esm.js:6074:1)
    at Chart._eventHandler (chart.esm.js:6101:1)
    at listener (chart.esm.js:5979:1)
    at Chart.event (chart.esm.js:3224:1)
    at helpers.segment.js:28:1

我跟踪了错误，它似乎是在chartjs库的legend方法中抛出的：

 afterEvent(chart, args) {
    if (!args.replay) {
      chart.legend.handleEvent(args.event);
    }
  },

我的代码：

   const navigate = useNavigate();
    const options: ChartOptions<"bar"> = {
        onClick: (event, elements, chart) => {
            navigate("/path")
     
}

Answer 1

即使我在 ChartJS 选项中禁用了图例插件，我也遇到了同样的错误

plugins: {
  legend: {
    display: false
   }
 }

事实证明，我们需要像这样过滤图例事件：

plugins: {
  legend: {
    display: false,
    events: []
  },
}