Highcharts气泡图点的中心点

我试图在点击点上添加一些额外的信息到气泡图表，但对于我的生活我无法找到泡泡点的中心！Highcharts气泡图点的中心点

这里发生的事情： http://jsfiddle.net/H07R0D/Mktvz/

和这里的点click事件

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以外，还有其他值吗？

来源

2013-07-04 TomCDona

这里是您的解决方案：

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-04 20:05:26

看起来不对，监守中心没有实现。 –

我的小提琴不好，因为我没有粘贴好链接。谢谢你的评论。 –

啊，不知道有超出cx/cy的偏移量。非常感谢！ – TomCDona

您可以使用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/

来源

2013-07-05 10:58:10

谢谢，那很完美。只是在时间框架内给皮埃尔解决方案。再次，非常感谢 – TomCDona

Highcharts气泡图点的中心点

回答

相关问题