将矩形添加到高图

Question

我试图在绘图图表中的一组 y&x 坐标之间添加一个框（Html 或其他）。基本上是一个介于 x20 和 y25 之间的框，但无法找到计算框的正确宽度和高度的数字，也无法设置用于放置框的正确 x、y 坐标。尝试按照小提琴示例的建议渲染一个矩形和一个标签，但没有得到它。

http://jsfiddle.net/qnp5tg0h/

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();
        }); 

Answer 1

解决方法是使用chart.x/yAxis[0].toPixels(value). 这将从图表上的值转换为像素位置：http : //jsfiddle.net/qnp5tg0h/1/

        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();

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

注意： SVG 中的点 (0,0) 是视口的左上角。