Highcharts：添加圆圈以散点图

Question

我想在散点图上绘制一个圆圈，以突出显示可接受范围之外的值。

我尝试使用chart.renderer.circle但是它使用了SVG元素的x和y像素。我仍然希望能够放大或缩小，因此绝对x和y值不起作用。

Highchart可以实现吗？

修改： 添加了样机：

Answer 1

两个想法......

<强> ONE

使用chart.renderer.circle并将点值转换为像素。

假设你想画一个圆圈：

var circleX = 161.2;  // x coordinate
var circleY = 51.6; // y coordinate
var circleR = 1.0;  // radius size in terms of x axis distance

将圆绘制为：

function addCircle(chart){
    if (this.circle){
        // on a redraw, remove old circle
        $(this.circle.element).remove();
    }

    // translate my coordinates to pixel values
    var pixelX = chart.xAxis[0].toPixels(circleX);
    var pixelY = chart.yAxis[0].toPixels(circleY);
    var pixelR = chart.xAxis[0].toPixels(circleR) - chart.xAxis[0].toPixels(0);        

    // add my circle
    this.circle = chart.renderer.circle(pixelX, pixelY, pixelR).attr({
        fill: 'transparent',
        stroke: 'black',
        'stroke-width': 1
        });
    this.circle.add();        
}

然后在加载和重绘事件中调用它，一切都很棒：

        events: {
            load: function(){
               addCircle(this); 
            },
            redraw: function(){
               addCircle(this);
            }
        }

这是一个小提琴example。

<强> TWO

将圆圈添加为另一个系列，使标记成为一个巨大的透明圆圈：

    {
        data: [[circleX, circleY]],
        linkedTo: 'other', // link it to other series to avoid legend entry
        marker: {
            radius: 40,
            lineColor: 'red',
            fillColor: 'transparent',
            lineWidth: 1,
            symbol: 'circle'
        }
    }

此处为此fiddle。