甜甜圈/拉斐爾的徑向圖

我是初學者到拉斐爾。任何人都可以告訴我如何做一個甜甜圈/徑向圖，動畫，類似於這些。甜甜圈/拉斐爾的徑向圖

http://dribbble.com/shots/670348-Segment-Graphs

林在現在的工作。到目前爲止我已經得到了這個。我會隨着我的進步而更新。我現在的整體模塊正在改變外圈顏色的變化。

window.onload = function() { 

    // Creates canvas 320 × 200 at 10, 50 
    var paper = Raphael(10, 50, 320, 200); 

    // Creates circle at x = 50, y = 40, with radius 10 
    var circle1 = paper.circle(50, 40, 40); 

    var circle2 = paper.circle(50, 40, 20); 

    circle2.attr("fill", "#fff"); 
    circle2.attr("stroke", "#fff"); 

    circle1.attr("fill", "#336699"); 
    circle1.attr("stroke", "#fff"); 

}

來源

2012-12-10 madphp

現金： 在存在使用弧的示例。有一個類似的主題在計算器上的另一個問題：drawing centered arcs in raphael js。該接受的答案出現了代碼的最重要部分的簡化和註釋版本，再加上有顯示在行動代碼的jsfiddle鏈接：http://jsfiddle.net/Bzdnm/2/

因此，我所做：我把代碼從linked question與eve結合它，通過RaphaelJS的creator什麼我做的另一個JavaScript庫是這樣的：http://jsfiddle.net/cristighenea/aP7MK/

一覽：

1.after電弧產生，我們將其旋轉180度，並開始動畫它：

theArc.rotate(180, 100, 100).animate({ 
    arc: [100, 100, amount, 100, 40] 
}, 1900, function(){ 
    //animation finish callback goes here 
});

2.使用前夕，我們綁定的事件* raphael.anim.frame。**

3.各時間事件被觸發，我們與圓弧的新值更新在中間的文本

如果您有任何問題，請告知我

來源

2012-12-10 20:39:53

嗨。我對此有一個跟進問題。你能爲我回答嗎？ http://stackoverflow.com/questions/13882577/raphael-chart-placement-relative-to-containing-div – madphp

謝謝@Chris Ghenea，我在這裏看到了十幾個樣本，它使用了一些有些「雜亂」的代碼從不同的起始角度渲染弧線。你的解決方案是最乾淨的。非常感謝！ – codenamezero

謝謝你的小提琴！在開發我們的[甜甜圈圖表庫]（https://github.com/xtremelabs/xl-donut_chart-javascript）時幫助了很多。希望我能找到時間再磨光一下。 –

甜甜圈/拉斐爾的徑向圖

回答

相關問題