gRaphael 餅圖:添加動畫 (gRaphael Pie Chart : Add animation)


問題描述

gRaphael 餅圖:添加動畫 (gRaphael Pie Chart : Add animation)

I want to display the pie chart with an animation that will make it grow from a "small point" to full size pie chart , something like this growing pie or this Highcharts Demo Gallery - Pie , but I want to apply it to a pie made with gRaphael , 

Here's my jsfiddle example... raphael pie chart with legend

Thanks ahead,


參考解法

方法 1:

In order to achieve that kind of animation you have to access the sectors and... animate them :)

You can do this using your_pie.each()

pie.each(function(){
  //scale each sector to 0
  this.sector.scale(0, 0, this.cx, this.cy);
  //animate from 0 to default size
  this.sector.animate({ transform: 's1 1 ' + this.cx + ' ' + this.cy }, 1000, "bounce");
});

The fiddle is here: http://jsfiddle.net/85VtZ/6/

Have fun ;) 

(by DanielChris Ghenea)

參考文件

  1. gRaphael Pie Chart : Add animation (CC BY-SA 3.0/4.0)

#raphael #graphael






相關問題

如何沿路徑為 Raphael 對象設置動畫? (How to animate a Raphael object along a path?)

Raphaël.js:如何縮放圓形的填充圖像以適合圓形? (Raphaël.js: How to scale a circle's fill image to fit the circle?)

如何通過“raphael-svg-import”加載和顯示 SVG 數據? (How to load and display SVG data by "raphael-svg-import"?)

gRaphael 餅圖:添加動畫 (gRaphael Pie Chart : Add animation)

如何在服務器端 Java 中使用 JavaScript 圖表庫,如 D3.js 或 Raphaël (How to use a JavaScript chart library like D3.js or Raphaël in server-side Java)

raphael newbie:彈窗背景在跳躍 (raphael newbie: popup background is jumping)

如何製作流暢的圓弧動畫? (How to create smooth circular arcing animation?)

拉斐爾對角變換對象和無限setIntervals (Raphael transform object diagonally and infinite setIntervals)

Raphael JS 服務器端 (Raphael JS server-side)

Raphael.js:在我的情況下如何拖動路徑的一側? (Raphael.js : How to drag one side of the path in my case?)

如何用 raphael js 繪製曲線? (How to draw curves with raphael js?)

如何用拉斐爾垂直縮放? (How to vertically scale with Raphael?)







留言討論