javascript - Chart.js onAnimationComplete 不起作用

Question

我想写圆环图的文本中心。我在下面写了这段代码

<script>

    $(document).ready(function () {
        var data = {
            labels: [
                ""

            ],
            datasets: [
                {
                    data: [165],
                    backgroundColor: [
                        "#FF6384"

                    ],
                    hoverBackgroundColor: [
                        "#FF6384"

                    ]
                }]
        };
        var ctx = $('#chart-area').get(0).getContext("2d");
        var myDoughnutChart = new Chart(ctx, {
            type: 'doughnut',
            data: data,
            animation: true,
            responsive: true,
            showTooltips: false,
            percentageInnerCutout: 70,
            segmentShowStroke: false,
            onAnimationComplete: function () {

                var canvasWidthvar = $('#chart-area').width();
                var canvasHeight = $('#chart-area').height();
                var constant = 114;
                var fontsize = (canvasHeight / constant).toFixed(2);
                //ctx.font="2.8em Verdana";
                ctx.font = fontsize + "em Verdana";
                ctx.textBaseline = "middle";
                var total = 0;
                $.each(data, function () {
                    total += parseInt(this.value, 10);
                });
                var tpercentage = ((data[0].value / total) * 100).toFixed(2) + "%";
                console.log(total);
                var textWidth = ctx.measureText(tpercentage).width;

                var txtPosx = Math.round((canvasWidthvar - textWidth) / 2);
                ctx.fillText(tpercentage, txtPosx, canvasHeight / 2);
            }
        });
    });

我想在动画完成并使用 onAnimationComplete 函数后执行此操作，但 onAnimationComplete 函数在这里不起作用。

Answer 1

遇到同样的问题。 在 options.animation 中改用 onComplete():

options:{
    animation:{
        onComplete : function(){
            /*Your code here*/
        }
    }
}