gRaphael餅圖動態大小

Question

我想在一些事件后放大gRaphael餅圖 ，點擊例如。 但是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

你只需清理和重繪你的餡餅就像這個小提琴一樣 。

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

當然，數據和選項應該分解並放在全球可用性范圍內。