如何在Highcharts甘特图中实现点击Y轴标签时高亮对应X轴行

解决方法 #

你当前代码的核心问题是绘制高亮矩形的横向范围和起始位置错误，仅覆盖了Y轴右侧的小部分区域，没有延伸到整个X轴对应的行区域，同时没有清理之前的高亮层，会出现多个高亮重叠的问题。
修改后的完整yAxis配置如下：

yAxis: {
  className: "highcharts-color-0",
  uniqueNames: true,
  title: {
    text: "Data"
  },
  labels: {
    events: {
      click: function () {
        const chart = this.chart;
        const axis = this.axis;
        const labelPos = this.pos;
        const tick = axis.ticks[labelPos];
        const height = axis.height / axis.tickPositions.length;
        const y = axis.top + labelPos * height;

        // 清理之前的高亮层，避免重叠
        if (chart.rowHighlight) {
          chart.rowHighlight.destroy();
        }

        // 绘制覆盖全绘图区的高亮矩形
        chart.rowHighlight = chart.renderer
          .rect(
            chart.plotLeft, // 从绘图区最左侧开始
            y, 
            chart.plotWidth, // 宽度取整个绘图区的宽度，覆盖全X轴
            height
          )
          .attr({
            fill: "rgba(255,255,0,0.3)", // 用半透明黄色避免遮挡任务内容
            zIndex: 0
          })
          .add();
      }
    }
  }
}

核心修改点说明 #

• 修正了矩形起始横坐标：从绘图区左边界chart.plotLeft开始，而非原来的右侧边距位置
• 修正了矩形宽度：取整个绘图区宽度chart.plotWidth，完全覆盖X轴对应的行区域
• 新增高亮层缓存与清理逻辑：每次点击前销毁上一次生成的高亮矩形，避免多次点击出现多层高亮重叠
• 调整填充色为半透明样式，避免高亮遮挡该行的甘特图任务内容，你也可以根据业务需求调整为纯色或其他透明度

效果示意 #

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