Javascript 将矩形添加到highchart

Javascript 将矩形添加到highchart,javascript,highcharts,Javascript,Highcharts,我试图在一个图表中的一组y&x坐标之间添加一个方框Html或其他内容。基本上是一个介于x20和y25之间的盒子,但无法找到数字来计算盒子的正确宽度和高度,也无法设置放置盒子的正确x、y坐标。尝试渲染一个矩形和一个标签,如fiddle示例所示,但没有得到它 解决方案是使用chart.x/yAxis[0].toPixelsvalue。将从图表上的值转换为像素位置: 我只渲染rect,因为标签可以有一些额外的填充,这会弄乱rect。现在,使用chart.renderer.text方法以相同的方式添加文

我试图在一个图表中的一组y&x坐标之间添加一个方框Html或其他内容。基本上是一个介于x20和y25之间的盒子,但无法找到数字来计算盒子的正确宽度和高度,也无法设置放置盒子的正确x、y坐标。尝试渲染一个矩形和一个标签,如fiddle示例所示,但没有得到它

解决方案是使用chart.x/yAxis[0].toPixelsvalue。将从图表上的值转换为像素位置:

我只渲染rect,因为标签可以有一些额外的填充,这会弄乱rect。现在,使用chart.renderer.text方法以相同的方式添加文本

注: SVG中的点0,0是视口的左上角。

解决方案是使用chart.x/yAxis[0].toPixelsvalue。将从图表上的值转换为像素位置:

我只渲染rect,因为标签可以有一些额外的填充,这会弄乱rect。现在,使用chart.renderer.text方法以相同的方式添加文本

注: SVG中的点0,0是视口的左上角

var chart = new Highcharts.Chart(options);

chart.renderer.label('1,99 %', chart.xAxis[0].left,265)
                    .attr({
                        r: 0,
                        width: 97,
                        height: 66,
                        fill: 'blue'
                    })
                    .css({
                        color: 'white',
                        fontWeight: 'bold'
                    })
                    .add();
        }); 
        var chart = new Highcharts.Chart(options);

        var x1 = chart.xAxis[0].toPixels(0),
            x2 = chart.xAxis[0].toPixels(20),
            y1 = chart.yAxis[0].toPixels(0),
            y2 = chart.yAxis[0].toPixels(25);

        chart.renderer.rect(x1, y2, x2 - x1, y1 - y2)
            .attr({
            fill: 'blue'
        }).add();