gラファエルパイチャートダイナミックサイズ

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

もちろん、データとオプションを分解し、使いやすさのためにグローバルスコープに入れる必要があります。