我使用chart.renderer.rect()方法在我的列类型图表中设置了我的xAxis标签背景颜色,但它没有响应屏幕大小调整。我的目标是通过在xAxis周围绘制矩形来扩展plotband以扩展到一列上的xAxis标签。注意到亮点延伸到3月而不是1月份。如何使其响应。 here
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>
答案 0 :(得分:0)
您需要在图表调整大小/重绘事件上设置矩形尺寸。
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))
}
}
},