与拉斐尔的甜甜圈/径向图表

Question

我是拉斐尔的初学者.任何人都可以告诉我如何用动画制作甜甜圈/径向图,类似于这些.

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

}

Answer 1

致谢: 在raphael网站上有一个使用弧线的例子.stackoverflow还有另一个问题,它有一个类似的主题:在raphael js中绘制居中的弧.接受的答案有一个简化和注释版本的代码最重要的部分,另外还有一个jsfiddle链接显示代码在行动:http://jsfiddle.net/Bzdnm/2/

所以我做了什么:我从链接的问题中获取代码,将它与eve,RaphaelJS 的创建者制作的另一个javascript库结合起来,我得到的是:http://jsfiddle.net/cristighenea/aP7MK/

乍看上去:

1.在创建弧之后,我们将其旋转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.事件被触发的每个时间我们用弧的新值更新中间的文本

如果您有任何问题,请告诉我