highcharts - xAxis标签上的Highcharts renderer.rect没有响应

Question

我已经使用 chart.renderer.rect() 方法在我的列类型图表中设置了我的 xAxis 标签背景颜色，但它对屏幕大小调整没有响应。我的目标是通过在 xAxis 周围绘制矩形来扩展 plotband 以扩展到一列上的 xAxis 标签。请注意，亮点延伸到 3 月，而不是停留在 1 月。如何使其响应。 FiddleLink

Highcharts.chart('container', {
    chart: {
        type: 'column',
          events: {
                    // Highlights the specialty labels at the bottom of the chart. Also see plotBands settings below
                    load: function() {
                        let chart = this;
                        let xAxis = chart.xAxis[0];
                        let yAxis = chart.yAxis[0];
                        let top = chart.plotTop + yAxis.height;
                        let height = 60; // Stretches the highlight to the bottom
                        let options = {
                                fill: 'rgb(235, 236, 238, 0.5)'
                            };
                        // colorize from -1 to .5
                        let start_1 = xAxis.toPixels(-0.5);
                        let end_5 = xAxis.toPixels(.5);

                        let rect1 = chart.renderer.rect(
                            start_1,
                            top,
                            end_5 - start_1,
                            height
                        ).attr(options).add();
                    }
                },
    },

    title: {
        text: 'Threshold is set to 100'
    },

    xAxis: {
        categories: ['Jan', 'Mar']
    },

    plotOptions: {
        series: {
            threshold: 2
        }
    },

    series: [{
        data: [10, -5],
        zones: [{
                    value: 0,
                    color: '#233b66'
                }]
    }]
});

#container {
	max-width: 800px;
	margin: 0 auto;
}

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container"></div>

标签： highcharts

Answer 1

您需要在图表调整大小/重绘事件上设置矩形尺寸。

function rectDimensions(chart) {
  const xAxis = chart.xAxis[0]
  const yAxis = chart.yAxis[0]

  const top = yAxis.top + yAxis.height
  const height = 60

  const x1 = xAxis.toPixels(-0.5)
  const x2 = xAxis.toPixels(0.5)

  return {
    x: x1,
    y: top,
    width: x2 - x1,
    height
  }
}


Highcharts.chart('container', {
  chart: {
    type: 'column',
    events: {
      // Highlights the specialty labels at the bottom of the chart. Also see plotBands settings below
      load: function() {
        const chart = this
        const dimensions = rectDimensions(chart)

        let options = {
          fill: 'rgb(235, 236, 238, 0.5)'
        };

        this.rect1 = chart.renderer
          .rect()
          .attr(Object.assign(dimensions, options))
          .add();

      },

      redraw() {
        this.rect1.attr(rectDimensions(this))
      }
    }
  },

现场示例：http: //jsfiddle.net/3xg17bby/