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

先知大卫

动画完成后,我将使用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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章