G 라파엘 js가 파이 차트에 텍스트를 추가합니다.

Question

문제가 발생했습니다. 원형 차트를 작성했으며 각 구획 안에 텍스트를 배치하려고합니다.

var pie = paper.piechart(pwidth/2, pheight/2, radius/1.2, data, { 
     stroke: bgcolor, 
     strokewidth: 1, 
     startFromFixedAngle: 0, 
     colors: barcolors 
    }); 

그리고 추가 텍스트 :

var t = paper.text(pwidth/2 - 200, pheight/2 - 300, 'Reports').attr({ 'fill': '#000000', 
'font-size': '18', "font-weight": 800, 'opacity': 1.0 }); 

내가 축소 내 애니메이션을 일으키는 파이 차트 및 그것은로 마우스 이벤트를 발생시킵니다 텍스트 위로 커서 이동에 호버 이벤트를 추가 할 때 지금 문제가 다시 커서가 텍스트 밖으로 이동하면 MouseOver 이벤트가 발생하여 애니메이션이 다시 확장됩니다.

내 애니메이션이 올바르게 작동하도록 어떻게 피할 수 있습니까?

감사합니다.

Answer 1

해결책 : 1) 동일한 인수와 데이터를 가진 다른 원형 차트를 만듭니다 (예 : pieShadow). 2) 확인 각각의 모든 부문의 opactity : 0

pieShadow.series.items[0].attr({ 'opacity': 0 }); 

3) 이제 pieShadow에 호버 이벤트를 추가하고 사용자가 유혹하는 분야를 식별 :

for (var index_i = 0; index_i < pie.covers.items.length; index_i++) { 
       if (this.cover == pie.covers.items[index_i]) { 
        break; 
       } 
      } 

을 실제 파이가를 표시 할 마우스 오버 효과 :

pie.series.items[index_i].scale(1.1, 1.1, this.cx, this.cy);