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

Question

我想为一些yAxis标题设置不同的背景色，你可以在下图中看到我想要的。

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

Answer 1

你可以使用 Highcharts.SVGRenderer 类来在标签后面添加矩形元素。例子:

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.netBlackLabelnaL810ye

API参考。 https:/api.highcharts.comclass-referenceHighcharts.SVGRenderer#rect。