如何在 y 轴甘特图 Highcharts 上设置点击或选择标签的背景？

Question

我想在甘特图中突出显示选定的 Y-axis 标签。还有什么方法可以给 y-axis 标题一些背景颜色？

y轴：{ 类名：“highcharts-color-0”，唯一名称：真实，标题： { 文本：“数据” }, 标签： { 事件：{ 点击：功能（）{ 警报（“你好www”）; var图表=这个，系列 = chart.series, plotLeft = chart.plotLeft, plotTop = chart.plotTop, plotWidth = chart.plotWidth; 如果（chart.myBackground）{ chart.myBackground.destroy(); }

      chart.myBackground = chart.renderer
        .rect(10, plotTop, 500, 30, 1)
        .attr({
          "stroke-width": 2,
          stroke: "red",
          fill: "yellow",
          opacity: 0.5,
          zIndex: -1
        })
        .add();
      }
    }
  }
}

enter image description here

link转码笔https://codepen.io/mehrotrarohit07/pen/PoKxvQp?editors=1010

Answer 1

尝试使用这种方法：

  yAxis: {
    labels: {
      events: {
        click: function() {
          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();
        }
      }
    }
  },

我希望代码中的一切都清楚 - 如有任何疑问，请随时提出。

演示：https://jsfiddle.net/BlackLabel/qyj327Lx/

API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#rect

如何在 y 轴甘特图 Highcharts 上设置点击或选择标签的背景？

How to set the background of clicked or selected label on y axis gantt chart Highcharts?

gantt-chart

highcharts