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

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

本文关键字：动画 逐行 绘制 js      更新时间：2023-09-26

有没有办法扩展当前图表.js这样动画绘图就不会对整个图表进行动画处理，而是用动画逐行绘制图表（轻松）？

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

没

关系，我已经通过扩展chart.js并覆盖draw（）函数来实现它，以便我可以将线从一个点/点动画到另一个点/点，直到最后一个点/点。

相关文章：