如何为Highcharts甘特图中点击选中的Y轴标签及Y轴标题设置背景色

一、高亮选中的Y轴标签 #

你原代码存在指向错误，click事件回调中的this指向的是当前被点击的Y轴标签实例，而非图表实例，需要调整坐标计算逻辑，让高亮矩形刚好匹配选中标签的位置：

yAxis: {
  className: "highcharts-color-0",
  uniqueNames: true,
  title: {
    text: "Data"
  },
  labels: {
    events: {
      click: function () {
        const chart = this.chart;
        // 先销毁之前的高亮背景
        if (chart.activeLabelBg) {
          chart.activeLabelBg.destroy();
        }
        // 获取当前点击标签的位置和尺寸
        const labelBbox = this.label.getBBox();
        // 绘制高亮矩形
        chart.activeLabelBg = chart.renderer
          .rect(
            labelBbox.x,
            labelBbox.y,
            labelBbox.width,
            labelBbox.height,
            2 // 圆角值，可自定义
          )
          .attr({
            fill: "yellow",
            opacity: 0.6,
            zIndex: 0
          })
          .add();
      }
    }
  }
}

如果需要点击空白处取消高亮、或者支持多选，可在此基础上扩展判断逻辑。

二、为Y轴标题设置背景色 #

有两种简单的实现方案：

方案1：开启HTML渲染直接加样式（推荐）

直接在yAxis.title配置中开启useHTML，自定义背景样式：

yAxis: {
  // 其余配置不变
  title: {
    text: "Data",
    useHTML: true,
    style: {
      backgroundColor: "#e8f4ff", // 自定义背景色
      padding: "5px 10px",
      borderRadius: "4px",
      color: "#333"
    }
  }
}

方案2：通过CSS类控制

给Y轴设置自定义className，通过CSS选择器匹配标题元素设置样式：

yAxis: {
  className: "custom-y-axis",
  // 其余配置不变
}

对应CSS代码：

.custom-y-axis .highcharts-axis-title {
  background-color: #e8f4ff;
  padding: 5px 10px;
  border-radius: 4px;
}

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