Chart.js动画：悬停时触发onComplete事件

Question

动画完成后，我将使用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文档，但没有找到仅在构建图表后才会触发的任何其他选项。因此，有人知道如何区分图表的悬停动画和“构建”动画吗？

Answer 1

将动画选项/对象替换为以下内容：

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对象）}