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

Nevermind。我通过扩展chart.js并覆盖draw（）函数来实现它，这样我就可以将线从一个点/点设置为另一个点，直到最后一个点/点。

动画图表js（直线），动画图表逐行绘制

2 个答案: