도넛/방사형 차트 라파엘

Question

라파엘 초보자. 누구나 애니메이션과 함께 도넛/방사형 차트를 어떻게 만들 수 있는지 보여줄 수 있습니까?

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

임 것은 지금 작업입니다. 지금까지 Ive는 이것을 멀리 얻었다. 나는 진전을 이루면서 갱신 할 것이다. 내 슬럼 블 블록은 바깥 쪽 링의 색상 변화를 애니메이션으로 표현합니다.

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의 코드를했다 우리가 그것을 회전 180 개도 및 애니메이션을 시작

아크 1.after 작성 : 눈에서 http://jsfiddle.net/cristighenea/aP7MK/

:,, eve으로이 된 RaphaelJS의 creator과 내가 가지고 만든 또 다른 자바 스크립트 라이브러리를 결합 그것 :

,

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

2.using 이브 우리는 * raphael.anim.frame에 이벤트를 바인딩합니다. ** 이벤트가 우리가 아크의 새 값으로 중간에 텍스트를 업데이트 해고

3. 각 시간을

질문이 있으시면