Question

我正在尝试通过点击点击向气泡图添加一些额外信息，但对于我的生活，我找不到泡点的中心！

以下是发生的事情： http://jsfiddle.net/H07R0D/Mktvz/

这是点击事件

plotOptions: {
    bubble: {
        cursor: 'pointer',
        point: {
            events: {
                click: function() {
                    var renderer = this.series.chart.renderer;
                    var point = this.graphic;
                    var path = renderer.path(['M',point.cx,point.cy,'L',100,100])
                        .attr({
                            'stroke-width': 1,
                            stroke: 'red'
                         }).add();
                 }
            }
        }
    }
}

当点击一个气泡时，我试图从气泡的中心绘制一条路径到任意点（只是测试....）但是绘制的路径永远不会从气泡的中心开始。

我应该使用point.cx和point.cy以外的其他值吗？

Answer 1

以下是您的解决方案：

var plotBox = point.renderer.plotBox;
var path = renderer.path(['M',point.cx+plotBox.x,point.cy+plotBox.y,'L',100,100])

实际上，你的图形不是从你的svg的0,0开始，它有一个偏移量。您可以在每个对象的渲染器中找到它。您的图形包含在plotBox中。

我已更新您的jsFiddle：http://jsfiddle.net/FsDks/

Answer 2

您可以使用plotX和plotY coordinades，保存在点对象（非图形）中并添加plotTop / plotLeft（图表周围的间距）。

var renderer = this.series.chart.renderer,
                                chart = this.series.chart,
                                point = this,
                                path;


                            path = renderer.path(['M',point.plotX + chart.plotLeft,point.plotY + chart.plotTop,'L',100,100])
                                .attr({
                                    'stroke-width': 1,
                                    stroke: 'red'
                                }).add();                               
                            this.graphic.animate({                                  
                                opacity: 0.2                                    
                            });

http://jsfiddle.net/Mktvz/4/

Highcharts气泡图点的中心

2 个答案: