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属性设置为null来禁用onComplete功能。这将使onComplete函数仅在第一次渲染图表后运行，并防止在图表被悬停时触发。

_{提示：执行不对象的方法使用箭头功能。（this将始终引用window对象）}

Answer 2

试试这个。好像你错过了函数关键字oncomplete：

this.chart = new Chart(this.$chart.getContext("2d"), {
        type: 'doughnut',
        data: data,
        options: {
            tooltips: {
                enabled: false
            },
            animation: {
                onComplete: function(e) {
                    console.log(e);
                    this.initExport();
                }
            }
        }
    });

Answer 3

我有相同的问题，但解决方法不同（输入选项：悬停：onHover）。示例：

var myChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: labels,
        ..... (other attributes)
    },
    options: {
        onClick: handleClick,
        animation: {
           onComplete: function () { 
                     .... (things the onComplete do) 
           }
        },
        hover: {
            onHover:function(event, chart) {
                if (chart.length > 0)
                    event.target.style.cursor = 'pointer';
                }   
            },
        }
    });

Chart.js动画：在悬停

3 个答案: