ChartJS 4.4.0中如何监听图表鼠标离开事件以移除悬停时添加的虚线？

我完全懂你的痛点！Chart.js确实没有内置的onLeave回调函数，但我们可以借助原生DOM事件来解决这个问题——直接给图表对应的Canvas元素添加mouseleave监听就可以啦。

具体操作步骤如下：

1. 首先在初始化图表后，获取到图表关联的Canvas元素：

   const myChart = new Chart(ctx, {
     // 你的图表配置（包含onHover添加虚线的逻辑）
   });
   const chartCanvas = myChart.canvas;
   

2. 给这个Canvas元素绑定mouseleave事件，在事件处理函数里移除你之前添加的虚线并更新图表：
   假设你是通过annotation插件来添加虚线的，代码大概是这样：

   chartCanvas.addEventListener('mouseleave', () => {
     // 移除对应的虚线配置
     if (myChart.options.annotations?.hoverLine) {
       delete myChart.options.annotations.hoverLine;
       // 更新图表让修改生效
       myChart.update();
     }
   });
   

如果你的虚线是通过自定义绘制（比如在onHover里直接画到Canvas上），那可以在mouseleave里设置一个标记（比如isHovering = false），然后调用myChart.update()，让图表重绘时不再渲染这条虚线。

这个方法的核心逻辑是：Chart.js的图表完全依赖Canvas渲染，所以鼠标离开Canvas元素就等同于离开整个图表区域，原生DOM事件能完美覆盖这个场景，补上Chart.js内置回调的缺失。

备注：内容来源于stack exchange，提问作者Robert Bierbauer