Question

我试图在情节图表中的一组y＆amp; x坐标之间添加一个框（Html或其他）。基本上是x20和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();

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

注意： SVG中的点（0,0）位于视口的左上角。

将矩形添加到highchart

1 个答案: