g.raphael 막 대형 차트 및 값 업데이트/애니메이션 적용

Question

일부 막 대형 차트에서 작업 중이므로 차트 값을 업데이트해야합니다. 내가 이것을 한 유일한 방법은 모든 것을 다시 그리는 것입니다. 막대를 간단히 업데이트 할 수있는 방법이 없습니까? 그렇다면 내가 진정으로 바라고있는 것은 그러한 변화에 활력을 불어 넣는 것입니다. 어떤 제안?

http://jsfiddle.net/circlecube/MVwwq/

Answer 1

여기 당신이 원하는 무엇 (Fiddle 업데이트).

새로운 바 차트를 만들려면 올바른 길을 걷고 있어야합니다. 유일한 문제는 막대 차트를 "표시"하고 싶지는 않지만 애니메이션에 막대를 사용하려는 것입니다. 이것이 우리가 나중에 버리는 새로운 그래프를 생성하는 동안 (remove() 사용), Raphael 모범 사례 인 것 같습니다.

function b_animate(){ 
    //First, create a new bar chart 
    var c2 = bars.g.barchart(200, 0, 300, 400, [bdata], {stacked: false, colors:["#999","#333","#666"]}); 

    //Then for each bar in our chart (c), animate to our new chart's path (c2) 
    $.each(c.bars[0], function(k, v) { 
    v.animate({ path: c2.bars[0][k].attr("path") }, 200); 
    v.value[0] = bdata[k][0]; 
    }); 

    //Now remove the new chart 
    c2.remove(); 
} 

이 우리는 새 차트에 맞게 전설을 애니메이션하지 않은,하지만 라벨에 적용되는이 기술은 당신을 거기 가야로, 완료되지 않았습니다. 기본적으로 새 레이블을 표시하고 이전 레이블을 제거하기 위해 호버를 다시 매핑해야합니다.

바라건대, 이것은 당신이 원하는 것과 똑같이 작동해야합니다. 문제가 있으면 알려주세요. 즐겨!

Answer 2

나는이 라파엘 2.1.0 및 g.Raphael 0.51 및 JQuery와 1.9.1과 함께 작동하도록하기 위해 위의 코드를 적용했다 :이 도움이

function b_animate(){ 
var c2 = bars.barchart(10, 10, 500, 450, bdata, { colors:custom_colors}); 
$.each(c.bars, function(k, v) { 
    v.animate({ path: c2.bars[k][0].attr("path") }, 500); 
    v[0].value = bdata[k][0]; 
}); 
c2.remove();} 

희망을!