xAxis 标签上的 Highcharts renderer.rect 无响应

Question

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

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>

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/