gRaphael饼图动态大小答案

【问题标题】：gRaphael pie chart dynamic sizegRaphael饼图动态大小
【发布时间】：2013-04-11 20:02:03
【问题描述】：

我想在某些事件后放大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 当然我可以在点击当前图表后删除并创建新的，但这不是一种方法，因为我需要在其他点击后恢复原始大小。

【问题讨论】：

标签： javascript jquery pie-chart graphael

【解决方案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"       
        }
    );
});

当然，为了可用性，数据和选项应该被分解并放在全局范围内。

【讨论】：