动画图表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个不同的动画），但是如果您愿意，您可以编写自己的缓动功能以easeOutQuart2个块的形式执行。

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