javascript - Chartjs - onAnimationComplete 在动画实际完成之前触发

Question

我的问题是 onAnimationComplete 事件在图表实际完成绘制之前触发。

我正在使用 ASP.NET MVC。

这是我的代码:

HTML:

<canvas id="scanedTodayChart" width="100" height="100"></canvas>

JS:

var scanedTodayChartCtx = document.getElementById("scanedTodayChart").getContext("2d");
var scanedTodayChart = new Chart(scanedTodayChartCtx, {
    type: 'pie',

    data: {
        labels: [
            "Red",
            "White",
        ],
        datasets: [
        {
            data: [10, 100],
            backgroundColor: [
                "#DA1A32",
                "#F0FFFF"
            ],
            borderWidth: false,
            borderColor: false
        }]
    },
    options: {
        cutoutPercentage: 90,
    },
    borderColor: '#DA1A32',
    fullWidth: true,
    onAnimationComplete: new function () {
        alert('onAnimationComplete')
    }
});

Answer 1

我认为您没有定义动画。尝试 this example在 Chart.js documentation 找到.

var scanedTodayChart = new Chart(scanedTodayChartCtx, {
    type: 'pie',

    data: {
        labels: [
            "Red",
            "White",
        ],
        datasets: [
        {
            data: [10, 100],
            backgroundColor: [
                "#DA1A32",
                "#F0FFFF"
            ],
            borderWidth: false,
            borderColor: false
        }]
    },
    options: {
        cutoutPercentage: 90,
        animation: {
            duration: 2000,
            onProgress: function(animation) {
                $progress.attr({
                    value: animation.animationObject.currentStep / animation.animationObject.numSteps,
                });
            },
            onComplete: function(animation) {
                alert('onAnimationComplete')
            }
        }
    },
    borderColor: '#DA1A32',
    fullWidth: true,
});