javascript chart.js 关于动画结束回调
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/31084587/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
chart.js on animation end callback
提问by vitr
Does the library chart.jssupport any sort of callbacks on specific events? I'm mostly interested in 'on animation end'event, but would be nice to know any other events if they're supported.
If this is not an option, do you know any workarounds? I'm using jQueryand vue.jsand I just need to show some additional text on the page (completely outside of the chart itself) when chart.jsfinishes the animation of the chart.
库chart.js是否支持对特定事件的任何类型的回调?我最感兴趣的是“动画结束”事件,但很高兴知道任何其他受支持的事件。
如果这不是一个选项,您知道任何解决方法吗?我正在使用jQuery和vue.js,当chart.js完成图表的动画时,我只需要在页面上显示一些额外的文本(完全在图表本身之外)。
采纳答案by potatopeelings
There is an onAnimationComplete option you can specify to run stuff once the animation completes. See this sectionof the documentation.
有一个 onAnimationComplete 选项,您可以指定在动画完成后运行内容。请参阅文档的这一部分。
Example
例子
var ctx = document.getElementById("chart").getContext("2d");
var myLine1 = new Chart(ctx).Line(lineChartData1, {
onAnimationComplete: function() {
alert('animation complete')
}
});
Fiddle - http://jsfiddle.net/4vo72rLd/
回答by illusionist
For Chart.Js 2.6.0
对于 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')
}
}
},
See this codepen https://codepen.io/shivabhusal/pen/XaZQaW