4

あるイベントの後に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もちろん、現在のチャートをクリックして削除して新しいチャートを作成することはできますが、他のクリック後に元のサイズに戻す必要があるため、これは方法ではありません。

4

1 に答える 1

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

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

于 2013-04-11T12:02:03.637 に答える