javascript – Chart.js onAnimationComplete不起作用

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript – Chart.js onAnimationComplete不起作用，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1260字，纯文字阅读大概需要2分钟。

内容图文

我想写甜甜圈图表的文本中心.我在下面写了这段代码

<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函数在这里不起作用.

解决方法:

面临同样的问题.
改为使用options.animation中的onComplete()：

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

内容总结

以上是互联网集市为您收集整理的javascript – Chart.js onAnimationComplete不起作用全部内容，希望文章能够帮你解决javascript – Chart.js onAnimationComplete不起作用所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端