거품 차트 포인트의 하이 차트 중심

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 및 PłOTY coordinades을 사용할 수 있습니다 (그래픽되지 않음) plotTop/plotLeft를 추가 (차트 주위 간격) 점 개체를 유지하고 있습니다. 중심이 달성되지 becuase

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/