javascript - Highcharts :将圆添加到散点图

我想在散点图上画一个圆，以突出显示超出可接受范围的值。

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

Highchart有可能吗？

编辑：
添加了样机：

最佳答案

两个想法

一

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

然后，您可以在load和redraw事件中调用它，一切都很棒：

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

这是一个小提琴example。

二

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

    {
        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。

关于javascript - Highcharts :将圆添加到散点图，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24194669/