Я пытаюсь создать прямоугольник с фоном для оси Y в карте высокой температуры. Прямо сейчас это работает для оси X, и я хочу то же самое для Yaxis. Я пробовал chart.renderer.rect (), но не уверен, где его правильно использовать. Заранее спасибо.
$(function () {
var categoryLinks = {
'Foo': 'http://www.google.com/search?q=foo',
'Bar': 'http://www.google.com/search?q=foo+bar',
'Foobar': 'http://www.google.com/serach?q=foobar'
};
$('#container').highcharts({
chart: {
events: {
load: function () {
var chart = this,
xAxis = chart.xAxis[0],
yAxis = chart.yAxis[0],
top = chart.plotTop + yAxis.height,
height = 20,
options = {
fill: 'rgba(50, 50, 150, 0.5)'
},
// colorize from 2 to 8
start_2 = xAxis.toPixels(2),
end_8 = xAxis.toPixels(8),
// colorize from 9 to 16
start_9 = xAxis.toPixels(9),
end_16 = xAxis.toPixels(16);
var rect1 = chart.renderer.rect(
start_2,
top,
end_8 - start_2,
height
).attr(options).add();
var rect2 = chart.renderer.rect(
start_9,
top,
end_16 - start_9,
height
).attr(options).add();
}
}
},
xAxis: {
tickInterval: 2
},
series: [{
data: [29.9, 71.5, 106.4, 29.9, 71.5, 106.4, 29.9, 71.5, 106.4, 29.9, 71.5, 106.4, 29.9, 71.5, 106.4, 29.9, 71.5, 106.4, 29.9, 71.5, 29.9]
}]
});
});
.hc-label {
background-color: red;
padding: 0px 5px;
color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px; width: 500px"></div>