0

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

这是发生了什么：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 之外，还有其他值吗？

4

2 回答 2

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/

于 2013-07-04T20:05:26.997 回答
1

您可以使用 plotX 和 plotY 坐标，保存在点对象（不是图形）中并添加 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/

于 2013-07-05T10:58:10.907 回答