如何在甘特图highchart中单击Y轴标签时选择或突出显示x轴边框

Question

如何通过点击 Y 轴标签在甘特图中选择或突出显示 X 轴？

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

        chart.renderer
          .rect(x, y, tick.slotWidth, height)
          .attr({
            fill: "yellow",
            zIndex: 0
          })
          .add();
      }
    }
  }
}

上面的代码在选择 Y 轴标签时工作正常，但我还想突出显示 X 轴中的选定行。有没有办法达到同样的效果？

码笔网址https://codepen.io/mehrotrarohit07/pen/PoKxvQp?editors=1010

Answer 1

一般情况下，甘特图是用 SVG 绘制的线条和文本，您的要求需要定制。 您可以尝试添加点击事件并更改 Highcharts.CSSObject 中的一些可用选项。 万一我会放置一个具有精确计算位置的背景。

chart.yAxis[0].labelGroup.element.childNodes.forEach(function(label) {
  console.log(label.style);
    
  label.style.cursor = "pointer";
  label.onclick = function(){
    label.style.fill = "green";
    alert('You clicked on '+ this.textContent);
  } 
});

现场演示： https://jsfiddle.net/BlackLabel/koyazbn3/

API 参考： https://api.highcharts.com/class-reference/Highcharts.CSSObject