動畫圖表js（線），動畫圖表繪制線

Question

有沒有辦法擴展當前的chart.js，以便動畫繪制不會對整個圖表進行動畫處理，而是通過動畫（輕松）逐行繪制圖表？

Answer 1

您可以使用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/

Answer 2

沒關系。我已經通過擴展 chart.js 和覆蓋 draw() 函數來實現它，以便我可以將線從一個點/點動畫到另一個點/點，直到最后一個點/點。