Динамический размер круговой диаграммы gRaphael - PullRequest
Новая
       20

Динамический размер круговой диаграммы gRaphael

4 голосов
/ 23 марта 2012

Я хочу увеличить круговая диаграмма 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 Конечно, я могу удалить после щелчка на текущем графике и создать новый, но это не так, потому что янужно будет сохранить исходный размер после другого клика.

1 Ответ

1 голос
/ 11 апреля 2013

Вам просто нужно очистить и перерисовать свой пирог, как на этой скрипке . 

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

Конечно, данные и опции должны быть разложены и помещены в глобальный охват для удобства использования.

...