ChartJS鼠标跟随垂直线在tooltip消失后停止更新的问题求助

问题原因 #

ChartJS默认仅在有必要场景（如hover数据点显示tooltip、数据更新、配置变更）时触发重绘，你仅修改了mousePosX变量但没有主动通知ChartJS重绘，因此鼠标离开数据点没有tooltip触发重绘时，垂直线就会停止更新。

解决方案 #

无需用定时器持续重绘，只需要在鼠标移动事件里，坐标更新后主动触发一次无动画的轻量重绘即可，仅在鼠标移动时执行，性能开销极低。

代码修改步骤 #

1. 初始化图表时保存实例

const myChart = new Chart(canvas, config);

2. 修改mousemove事件监听，坐标更新后触发重绘

canvas.addEventListener('mousemove', function(evt) {
  var mousePos = getMousePos(canvas, evt);
  // 坐标无变化时跳过重绘，进一步优化性能
  if (mousePosX === mousePos.x) return;
  mousePosX = mousePos.x;
  // 传入none参数表示无动画重绘，没有额外性能消耗
  myChart.update('none');
}, false);

可选优化 #

可以增加鼠标移出画布时隐藏垂直线的逻辑，体验更流畅：

// 新增鼠标移出监听
canvas.addEventListener('mouseleave', function() {
  mousePosX = null;
  myChart.update('none');
});

// 修改afterDraw钩子，坐标为空时不画线
afterDraw(chart) { 
  let x = mousePosX;
  if (x == null) return;
  let yAxis = chart.scales.y;
  let ctx = chart.ctx;
  ctx.save();
  ctx.beginPath();
  ctx.moveTo(x, yAxis.top);
  ctx.lineTo(x, yAxis.bottom);
  ctx.lineWidth = 1;
  ctx.strokeStyle = 'rgba(0, 0, 255, 0.4)';
  ctx.stroke();
  ctx.restore();
}

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