javascript - 拉斐尔的 donut /径向图

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 website有一个使用弧的例子。在 stackoverflow 上还有一个类似主题的问题:drawing centered arcs in raphael js .那里接受的答案有代码最重要部分的简化和注释版本，另外还有一个显示实际代码的 jsfiddle 链接:http://jsfiddle.net/Bzdnm/2/

我做了什么:我从 linked question 中获取了代码, 将其与 eve 结合，由 creator 制作的另一个 javascript 库RaphaelJS，我得到的是: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.使用 eve 我们将一个事件绑定(bind)到 *raphael.anim.frame.**

3.每次触发事件时，我们都会用弧的新值更新中间的文本

如果你有任何问题，请告诉我