如何在Highcharts中设置yAxis标头的不同背景颜色？

Question

我想为某些yAxis标头设置一些不同的背景颜色，在下面的图片中可以看到我想要的这种情况：

例如，我想为Planning标头及其子级设置红色，为Develop标头及其子级设置黄色。

Answer 1

您可以使用Highcharts.SVGRenderer类在标签后面添加rect元素。示例：

events: {
  render: function() {
    var yAxis = this.yAxis[0],
      x = yAxis.right,
      y1 = yAxis.top,
      y2 = yAxis.top + yAxis.translationSlope * 5,
      w = yAxis.left - this.spacingBox.x,
      h1 = yAxis.translationSlope * 5,
      h2 = yAxis.translationSlope * 3;

    if (!yAxis.customBG) { // render
      yAxis.customBG = this.renderer.rect(
        x,
        y1,
        w,
        h1
      ).attr({
        fill: 'red'
      }).add();

      yAxis.customBG2 = this.renderer.rect(
        x,
        y2,
        w,
        h2
      ).attr({
        fill: 'yellow'
      }).add();

    } else { // reposition
      yAxis.customBG.attr({
        x: x,
        y: y1,
        width: w,
        height: h1
      });

      yAxis.customBG2.attr({
        x: x,
        y: y2,
        width: w,
        height: h2
      });
    }
  }
}

---

实时演示： https://jsfiddle.net/BlackLabel/naL810ye/

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