Javascript 悬停时触发图表动画-easyPieChart

我有6张图表

$('.chart-1').hover(function(e) {
    $('.chart-1').easyPieChart({
        lineCap: 'square',
        lineWidth: '4',
        barColor: '#E81F4D',
        size: '40',
        easing: 'easeOutBounce',
        onStep: function(from, to, percent) {
            $(this.el).find('.percent').text(Math.round(percent));
        }
    });
    $('.chart-1').data('easyPieChart').enableAnimation();
});


$('.chart-2').hover(function(e) {
    $('.chart-2').easyPieChart({

        lineCap: 'square',
        lineWidth: '4',
        barColor: '#971FE8',
        size: '40',
        easing: 'easeOutBounce',
        onStep: function(from, to, percent) {
            $(this.el).find('.percent').text(Math.round(percent));
        }
    });

});

$('.chart-3').hover(function(e) {
    $('.chart-3').easyPieChart({

        lineCap: 'square',
        lineWidth: '4',
        barColor: '#1F8CE8',
        size: '40',
        easing: 'easeOutBounce',
        onStep: function(from, to, percent) {
            $(this.el).find('.percent').text(Math.round(percent));
        }
    });

});


$('.chart-4').hover(function(e) {
    $('.chart-4').easyPieChart({

        lineCap: 'square',
        lineWidth: '4',
        barColor: '#1AB356',
        size: '40',
        easing: 'easeOutBounce',
        onStep: function(from, to, percent) {
            $(this.el).find('.percent').text(Math.round(percent));
        }
    });

});


$('.chart-5').hover(function(e) {
    $('.chart-5').easyPieChart({

        lineCap: 'square',
        lineWidth: '4',
        barColor: '#EDE20E',
        size: '40',
        easing: 'easeOutBounce',
        onStep: function(from, to, percent) {
            $(this.el).find('.percent').text(Math.round(percent));
        }
    });
});


$('.chart-6').hover(function(e) {
    $('.chart-6').easyPieChart({

        lineCap: 'square',
        lineWidth: '4',
        barColor: '#FC7402',
        size: '40',
        easing: 'easeOutBounce',
        onStep: function(from, to, percent) {
            $(this.el).find('.percent').text(Math.round(percent));
        }
    });
});

我想在用户悬停在上面时触发动画，我已经尝试了上面的代码，但仍然没有找到一些方法

---

有人能帮忙吗？

这可能很傻，但你需要的只是动画，对吗

首先，您必须使用animate参数声明图表，因此它具有延迟。 其次，您必须创建悬停事件。然后看起来像这样

（我只举一个例子）

73%

$（'.chart'）.easyPieChart({
动画：1000
});
$（'.chart'）.mouseenter（（）=>{
$（'.chart'）。数据（'easyPieChart'）。更新（0）；
$（'.chart'）.data（'easyPieChart'）.update（parseInt（$（'.chart'）[0].dataset.percent））；
})

---

这是示例：

不知道它在哪里失败？如果您使用console.log（$（this.el））；你看到了什么？实际的问题是这个

onStep:function（from，to，percent）{

我必须删除它，它可以工作。我在哪里为我的图表指定选项？你能更新你的答案以包括它吗？在以

$（'.chart'开头的行）.easyPieChart

，这是选项所属的位置。您可以阅读文档以了解更多选项。实际问题是步骤：函数（从，到，百分比）{我必须删除该选项，它才能工作。