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 Ofcourse我可以點擊當前圖表後刪除並創建新的，但它不是一個辦法，因爲我需要其他後點擊返回原來的大小。

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"  
     } 
    ); 
}); 

當然，數據和選項應該被分解並放到全局可用性範圍內。