Chart.js折线图鼠标悬停同时绘制水平与垂直指示线问题求助

开发者阿泽

2026-9-25

解决方案

你只需要在原有绘制垂直线的逻辑基础上，补充获取当前数据点的Y轴坐标、绘制水平线的逻辑即可，修改后的代码如下：

首先是修改后的lineOnHover函数：

window.lineOnHover = function(){        
    Chart.defaults.LineWithLine = Chart.defaults.line;
    Chart.controllers.LineWithLine = Chart.controllers.line.extend({
    draw: function(ease) {
      Chart.controllers.line.prototype.draw.call(this, ease);

      if (this.chart.tooltip._active && this.chart.tooltip._active.length) {
         var activePoint = this.chart.tooltip._active[0],
             ctx = this.chart.ctx,
             x = activePoint.tooltipPosition().x,
             y = activePoint.tooltipPosition().y, // 新增：获取当前悬浮点的Y坐标
             topY = this.chart.legend.bottom,
             bottomY = this.chart.chartArea.bottom,
             leftX = this.chart.chartArea.left, // 新增：获取图表区域左边界
             rightX = this.chart.chartArea.right; // 新增：获取图表区域右边界

         // 保存画布状态，两种线共用一套样式即可
         ctx.save();
         ctx.lineWidth = 1;
         ctx.setLineDash([3,3]);
         ctx.strokeStyle = '#FF4949';
         
         // 绘制垂直线
         ctx.beginPath();
         ctx.moveTo(x, topY);
         ctx.lineTo(x, bottomY);
         ctx.stroke();
         
         // 新增：绘制水平线
         ctx.beginPath();
         ctx.moveTo(leftX, y);
         ctx.lineTo(rightX, y);
         ctx.stroke();
         
         ctx.restore();
      }
    }
    });
}