gRaphael 원형 차트 동적 크기

Question

나는, 일부 이벤트 후 gRaphael pie chart을 확대 예를 들어 클릭합니다. 그러나 gRaphael 원형 차트는 정적 너비 및 높이로 창로드 이후에 생성됩니다. 실시간으로 동적으로 다시 그릴 수 있습니까?

내 코드 :

var myRadius; 

myRadius = 200; 

var myChart = Raphael("myChartDiv"), 
    myChartPie = myChart.piechart(
     myRadius, // cx 
     myRadius, // cy 
     myRadius, //Radius 
     [70, 30], //Data  
     {   
     colors: ["#eb5e57", "#ebad50"],   
     stroke: "#f1eeea"  
     } 
    ); 

$('#myButton').click(function(){ 
    myRadius = 500; 
    myChart.clear(); //Clear current canvas 
    // Do something to insert myChart with new myRadius 
}); 

UPD 는 당연히 내가 클릭 현재 차트 후에 제거하고 새로운 만들지 만, 내가 기타를 클릭 한 후 원래의 크기를 다시 할 필요가 있기 때문에, 방법이 아니다 있습니다.

Answer 1

당신은 &가 this fiddle에로 파이를 다시 그리기 취소해야합니다.

var myRadius; 

myRadius = 200; 

var myChart = Raphael("myChartDiv"), 
    myChartPie = myChart.piechart(
     myRadius, // cx 
     myRadius, // cy 
     myRadius, //Radius 
     [70, 30], //Data  
     {   
      colors: ["#eb5e57", "#ebad50"],   
      stroke: "#f1eeea"  
     } 
    ); 

$('#myButton').click(function(){ 
    if(myRadius == 200) 
     myRadius = 500; 
    else 
     myRadius = 200; 
    myChart.clear(); 
    myChartPie = myChart.piechart(
     myRadius, // cx 
     myRadius, // cy 
     myRadius, //Radius 
     [70, 30], //Data  
     {   
      colors: ["#eb5e57", "#ebad50"],   
      stroke: "#f1eeea"  
     } 
    ); 
}); 

물론 데이터와 옵션을 분해하여 유용성을 위해 전역 범위에 넣어야합니다.