Highcharts 라이브러리의 애니메이션 원본

Question

하이 차트를 단계별로 작성하려고합니다. 나는 작동 시키지만, 움직이는 방식에 만족하지 않습니다. 애니메이션 원점은이 경우 y 축이지만 바를 x 축에서 위로 올려야합니다. 로드시 데이터를 볼 때 x 축에서 상승합니다. 그러나 빈 차트부터 시작하고 싶습니다.

http://jsfiddle.net/ueC9g/1/

이

내가 highcharts를 초기화하는 방법입니다

new Highcharts.Chart ({ 
    chart: { 
     type: 'column', 
     renderTo: 'columnChart' 
    }, 
    title: { 
     text: 'Great chart' 
    }, 
    xAxis: { 
     categories: ['<5', '5-9', '10-14','15-19','20-24','25-29','30-39','40-49','50-59','60-69','>69'], 
     min: 0, 
     max: 10, 
     title: { 
      text: 'Age' 
     }, 
     showEmpty: true 
    }, 
    yAxis: { 
     title: { 
      text: 'Some numbers' 
     }, 
     min: 0, 
     max: 20, 
     showEmpty: true, 
     alternateGridColor: '#eee' 
    }, 
    series: [{ 
     name: 'male', 
     data: [1, 1, 5, 8, 10, 15, 19, 14, 10, 8, 4] 
    }, { 
     name: 'female', 
     data: [2, 1, 3, 4, 5, 6, 8, 4, 4, 3, 2] 
    }], 
    plotOptions: { 
     column: { 
      events: { 

      } 
     } 
    }, 
    credits: { 
     enabled: false 
    } 
}); 

Answer 1

이 highcharts는 축에 변화를 애니메이션 시리즈 그 자체 대신에. 어쨌든이 동작을 변경할 수 없습니다. 이 문제를 해결하는 대신 일련의 표시/숨기기 왜 클릭에 새로 추가하지 :

축이 시작에 그릴 수 있도록 내가 너무 내 설정에서 초기 빈 시리즈를 설정했던

var i = 0; 

$('#addBar').click(function(){ 
    try { 
     if (i == 0) { 
      columnChart.addSeries({name:'male',data:[1, 1, 5, 8, 10, 15, 19, 14, 10, 8, 4]}); 
     } 
     else if (i == 1) { 
      columnChart.addSeries({name:'female',data:[2, 1, 3, 4, 5, 6, 8, 4, 4, 3, 2]}); 
     } 
     i++;     
    } catch(e){ 
     console.dir(e); 
    } 
}); 

:

series: [{visible: false, showInLegend: false}], 

업데이트 된 바이올린 here을 참조하십시오.

Answer 2

이 예와 familair하십시오 :/숨기기 시리즈를 보여주는 경우 http://jsfiddle.net/VcJ4K/5/

$.each(chart.series[0].data, function(i, point) { 

     window.setInterval(function() { 
      point.update(point.y2); 
     }, 500); 

    });