一、可供參考的文檔資料。
raphaeljs官網：http://raphaeljs.com/
w3c關於path的介紹：http://www.w3.org/TR/2003/REC-SVG11-20030114/paths.html
mdn關於path的介紹（英文版）：https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths
mdn關於path的介紹（中文版）：https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Paths
二、簡介
raphaeljs目前支持的瀏覽器： Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+, Internet Explorer 6.0+.
因爲支持ie6，所以應用可以更廣泛些。
超級喜歡的一個demo：http://raphaeljs.com/polar-clock.html
因爲它的部分功能是可以滿足目前項目中的需求的。
當然，還有很多好看和實用的demo。
基本圖形的畫法，很簡單，可以參考mdn（https://developer.mozilla.org/zh-CN/docs/Web/SVG）就可以掌握。
本文介紹使用path繪製環型圖。
粗略介紹下：
path中的M表示move to，L表示line to, A表示arc.
弧形命令A是另一個創建SVG曲線的命令。基本上，弧形可以視爲圓形或橢圓形的一部分。假設，已知橢圓形的長軸半徑和短軸半徑，另外已知兩個點（它們的距 離在圓的半徑範圍內），這時我們會發現，有兩個路徑可以連接這兩個點。每種情況都可以生成出四種弧形。所以，爲了保證創建的弧形唯一，A命令需要用到比較 多的參數：
A rx ry x-axis-rotation large-arc-flag sweep-flag x y
a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy
rx ry表示起點座標，x y表示終點座標。下圖可以更好理解。
三、動手
給個實例吧。如下是我在理解的過程中寫的代碼。大家可以從官網下載raphaeljs，然後運行如下的代碼。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <title>Carl Test</title> <script src="./js/raphael.js"></script> </head> <body> <div> <canvas id="myc" width="300" height="300"> </canvas> <div > <svg height="52" version="1.1" width="52" xmlns="http://www.w3.org/2000/svg" style="position:relative"> <desc>Created with Raphaël 2.1.2</desc> <path style="" fill="none" stroke="#f0f0f0" d="M26,4A22,22,0,1,1,25.99,4" stroke-width="6"/> <path style="" fill="none" stroke="#69d2ca" d="M26,4A22,22,0,0,1,37.78818948953793,44.57521436104433" stroke-width="6" /> </svg> </div> <div id="holder"> </div> <script> var c = document.getElementById('myc'); var ctx = c.getContext('2d'); var init= true; for(var alpha=0;alpha<1000;alpha++){ var R=100; var a = (90 - alpha) * Math.PI / 180, x = 120 + R * Math.cos(a), y = 120 - R * Math.sin(a); if(init){ ctx.moveTo(x,y) }else{ ctx.lineTo(x,y); } init=false; } ctx.stroke(); </script> <script> window.onload = function () { var r = Raphael("holder", 200, 200); r.customAttributes.arc = function (value, total, R) { var alpha = 360 / total * value, a = (90 - alpha) * Math.PI / 180, x = 100 + R * Math.cos(a), y = 100 - R * Math.sin(a), path; if (total == value) { path = [["M", 100, 100 - R], ["A", R, R, 0, 1, 1, 99.99, 100 - R]]; } else { path = [["M", 100, 100 - R], ["A", R, R, 0, +(alpha > 180), 1, x, y]]; } return {path: path}; }; (function(){ var value=40,total=100,R=40; var t = r.path().attr({stroke: "#f0f0f0", "stroke-width": 10}).attr({arc:[100,total,R]});//100% var sec = r.path().attr({stroke: "#69d2ca", "stroke-width": 10}).attr({arc: [0, total, R]});//0% sec.animate({arc: [value, total, R]}, 900, ">");//這個">"是表示動畫效果的參數，900ms的時間動態畫出40%的弧 })(); }; </script> </body> </html>
四、總結
效果圖：
爲什麼會有3個呢？
第一個圓是爲了理解圓的參數方程，即如下代碼所代表的含義。所以我用canvas畫了出來。因爲本人感覺使用canvas畫弧或者圓，比svg好理解。只要理解這個算法就好。
var a = (90 - alpha) * Math.PI / 180, x = 120 + R * Math.cos(a), y = 120 - R * Math.sin(a);
第二個圓，是直接使用svg畫出來的。
第三個圓，就是raphaeljs生成在id=holder的div標籤裏的svg生成的環形圖，亮點是動態顯示。
京東旗下的金融板塊，好多圖都是使用Raphaël做的。如下的籌集進度就是一個環形圖。
http://bill.jr.jd.com/buy/list.htm