2

ラファエル初心者です。これらに似たアニメーションを使用して、ドーナツ/ラジアル チャートを作成する方法を誰かに教えてもらえますか。

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

}
4

1 に答える 1

8

クレジット: raphael のWeb サイトには、アークを使用する例があります。同様のトピックを持つスタックオーバーフローに関する別の質問があります: raphael js で中央のアークを描画します。そこで受け入れられた回答には、コードの最も重要な部分の簡略化されたコメント付きバージョンがあり、さらにコードの動作を示す jsfiddle リンクがあります: http://jsfiddle.net/Bzdnm/2/

だから私がしたこと:リンクされた質問からコードを取得し、それを RaphaelJSの作成者によって作成された別の JavaScript ライブラリであるeveと組み合わせて、得たものは次のとおりです: 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 を使用して、イベントを *raphael.anim.frame.** にバインドします。

3.イベントが発生するたびに、中央のテキストを円弧の新しい値で更新します

ご不明な点がございましたら、お知らせください

于 2012-12-10T20:39:53.987 に答える