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氣泡圖點的中心點

回答

相關問題