javascript - 将背景框添加到 highcharts 中的 y 轴

Question

我正在尝试在 highcharts 热图中的 y 轴上创建一个背景矩形框。现在它适用于 x 轴，我也希望 y 轴也能使用它。我已经尝试过 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>

Answer 1

您只需使用正确的值:

$('#container').highcharts({
    chart: {
        events: {
            load: function () {
                ...,
                    startY40 = yAxis.toPixels(40),
                    endY60 = yAxis.toPixels(60);
                ...

                var rect3 = chart.renderer.rect(
                    yAxis.left - height, 
                    endY60, 
                    height,
                    startY40 - endY60, 
                ).attr(options).add();

            }
        }
    },
...
});

<小时/>

现场演示: http://jsfiddle.net/BlackLabel/6m4e8x0y/4770/