图表.js动画进度进度百分比

chart.js onAnimationProgress progress percentage

本文关键字：百分比 动画 js 图表      更新时间：2023-09-26

我想在动画发生时更改填充颜色。在某种程度上，它从一种颜色变成另一种颜色，就像蓝>绿色一样。

我一直在测试方法，到目前为止我已经能够改变颜色，但它的过渡并不顺利。

该方法目前涉及 2 个功能：

onAnimationProgress: function(){},
// Function - Will fire on animation completion.
onAnimationComplete: function(){}

但是在使用onAnimationProgress时，我看不到查看动画进度的方法，例如进度有多远。

有什么想法吗？

onAnimationProgress有 2 个参数easeDecimal和您可以使用的stepDecimal

var myLineChart = new Chart(ctx).Line(data, {
    onAnimationProgress: function (easeDecimal, stepDecimal) {
        // stepDecimal proceeds uniformly from 0 to 1
        // easeDecimal proceeds depending on the easing function from 0 to 1
        console.log(stepDecimal)
    }
});

例如，要更改fillColor - 在这里我只是调整透明度

var myLineChart = new Chart(ctx).Line(data, {
    animationSteps: 200,
    onAnimationProgress: function (easeDecimal, stepDecimal) {
        this.datasets[0].fillColor = "rgba(120,120,120," + stepDecimal + ")";
    }
});
相关文章：