Animation chart js (line), animate chart drawing line by line

问题

Is there a way to extend the current chart.js so that the animation drawing doesn't animate the whole chart, but drawing the chart line by line with animation (ease) ?

回答1:

You can use the onAnimationComplete callback to change the data and call 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;
        }
    }
});

It works better with linear easing (otherwise it seems like 2 distinct animations), but if you wanted to, you could write your own easing function to do easeOutQuart in 2 blocks.

---

Fiddle - http://jsfiddle.net/rnyekq1y/

回答2:

Nevermind.I've implement it by extending chart.js and override draw() function so that I can animate the line from one dot/point to another until the last dot / point.

来源：https://stackoverflow.com/questions/36001609/animation-chart-js-line-animate-chart-drawing-line-by-line