动画完成后,我将使用onComplete回调加载图表的图像导出。我的问题是,每次将鼠标悬停在图表上时,都会执行onComplete回调,这会极大地减慢页面速度。
这是我的图表代码:
this.chart = new Chart(this.$chart.getContext("2d"), {
type: 'doughnut',
data: data,
options: {
tooltips: {
enabled: false
},
animation: {
onComplete: (e) => {
console.log(e);
this.initExport();
}
}
}
});
我检查了Chart.js文档,但没有找到仅在构建图表后才会触发的任何其他选项。那么,有谁知道如何区分图表的悬停动画和“构建”动画?
用以下内容替换动画选项/对象:
animation: {
onComplete(e) => {
this.options.animation.onComplete = null; //disable after first render
console.log(e);
this.initExport();
}
}
基本上,您需要通过将chart.options.animation.onComplete
属性设置为来禁用onComplete函数null
。这将使onComplete函数仅在首次呈现图表之后运行,并防止在将图表悬停在图表上时触发它。
提示:千万不能使用箭头为目标函数的方法。(this
将始终引用该window
对象)
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句