chart.js 关于动画结束回调

Question

库 chart.js 是否支持对特定事件的任何类型的回调？我最感兴趣的是 'on animation end' 事件，但很高兴知道是否支持任何其他事件。
如果这不是一个选项，您知道任何解决方法吗？我正在使用 jQuery 和 vue.js 我只需要在页面上显示一些额外的文字（完全在外面图表本身）当 chart.js 完成图表的动画时。

Answer 1

有一个 onAnimationComplete 选项，您可以在动画完成后指定运行内容。请参阅文档的 this section。

例子

var ctx = document.getElementById("chart").getContext("2d");
var myLine1 = new Chart(ctx).Line(lineChartData1, {
    onAnimationComplete: function() {
        alert('animation complete')
    }
});

Fiddle - http://jsfiddle.net/4vo72rLd/

Answer 2

For Chart.Js 2.6.0

options: {
    cutoutPercentage: 90,
    animation: {
        duration: 2000,
        onProgress: function(animation) {
            $progress.attr({
                value: animation.animationObject.currentStep / animation.animationObject.numSteps,
            });
        },
        onComplete: function(animation) {
            alert('onAnimationComplete')
        }
    }
},

查看此代码笔https://codepen.io/shivabhusal/pen/XaZQaW

chart.js 关于动画结束回调

chart.js on animation end callback

html

javascript

animation

vue.js

chart.js