Добавить опцию анимации в круговую диаграмму raphaeljs

Question

Я хочу нарисовать анимированную круговую диаграмму с плагином raphaeljs; И я нашел функцию пирога наброска (Paper.piechart) в g.raphaeljs библиотеки, это Thier родственного демо

http://g.raphaeljs.com/piechart2.html

Но я не знаю, как оживить эту схему (при выполнении события) без reRendreing сюжет как этот демо:

http://raphaeljs.com/growing-pie.html рисовать другими словами, я хочу добавить опцию анимации второго демо к первому. Может ли кто-нибудь мне помочь?

Answer 1

это рабочая демонстрация круговой диаграммы Рафаэля, который растет на создание и имеет эффект ломтика отскока на наведению мыши:

<div id="pie"></div> 
<script> 
var paper = Raphael("pie", 400, 200); 
var pie = paper.piechart(
    100, // pie center x coordinate 
    100, // pie center y coordinate 
    90, // pie radius 
    [18.373, 18.686, 2.867, 23.991, 9.592, 0.213], // values 
    { 
    legend: ["Windows/Windows Live", "Server/Tools", "Online Services", "Business", "Entertainment/Devices", "Unallocated/Other"] 
    } 
); 

//animation - grow pie  
pie.each(function(){ 
    this.sector.scale(0, 0, this.cx, this.cy); 
    this.sector.animate({ transform: "s1 1 " + this.cx + " " + this.cy }, 1000, "bounce"); 
}); 

// Bounce pie slice 
pie.hover(function() { 
    this.sector.stop(); 
    this.sector.animate({ transform: "s1.1, 1.1 " + this.cx + " " + this.cy }, 500, "bounce"); 
    this.label[0].attr({ r: 7.5 }); 
    this.label[1].attr({ "font-weight": 800 }); 
}, 

function() { 
    this.sector.animate({ transform: "s1 1 " + this.cx + " " + this.cy }, 500, "bounce"); 
    this.label[0].animate({ r: 5 }, 500, "bounce"); 
    this.label[1].attr({ "font-weight": 400 }); 

}) 

</script>