動畫圖表js（line），動畫圖表逐行繪製

Question

有沒有方法擴展當前的chart.js，以便動畫繪製不會動畫整個圖表，而是通過動畫繪製圖表緩解）？

Answer 1

Nevermind.I've通過延長chart.js之實現，而且覆蓋的draw（）函數，這樣我可以從一個點/點動畫線到另一個，直到最後一個點/點。

Answer 2

可以使用onAnimationComplete回調更改數據，並調用update()

  ... 
      data: [0, 0, 0, 0, 0, 0, 0] 
     } 
    ] 
}; 

var data2 = [28, 48, 40, 19, 86, 27, 90]; 

var done = false; 
var myLineChart = new Chart(ctx).Line(data, { 
    animationEasing: 'linear', 
    onAnimationComplete: function() { 
     if (!done) { 
      myLineChart.datasets[1].points.forEach(function (point, i) { 
       point.value = data2[i]; 
      }); 
      myLineChart.update(); 
      done = true; 
     } 
    } 
}); 

它與linear寬鬆（否則它看起來像2個不同的動畫）的作品更好，但是如果你願意，你可以寫你的自己的寬鬆功能在2塊中做easeOutQuart。

---

小提琴 - http://jsfiddle.net/rnyekq1y/