Jquery 如何在滚动后显示饼图的动画

我用简易饼图做了一个饼图。当我使用Wow.js滚动时显示。但我想在滚动时显示饼图增加到其定义百分比。它显示我是否在该部分。但我想在滚动后显示此动画。我如何才能做到这一点。请帮帮我

下面是我使用的简单饼图的代码

$('.chart').easyPieChart({
    'barColor':'#AD984E',
    'scaleColor':'#141414',
    'trackColor':'#EEEEEE',
    'size':'200',
    'lineWidth':'5',
    animate: 5000
});

对于魔兽世界js

 wow = new WOW(
    {
      boxClass:     'wow',      // default
      animateClass: 'animated', // default
      offset:       100,          // default
      mobile:       true,       // default
      live:         true        // default
    }
  )
  wow.init();

这是我工作的一个环节：

---

TIA

您可以尝试以下代码：

    $(window).scroll( function(){

    /* Check the location of each desired element */
    $('.chart').each( function(i){

        var bottom_of_object = $(this).offset().top + $(this).outerHeight();
        var bottom_of_window = $(window).scrollTop() + $(window).height();

        /* If the object is completely visible in the window, fade it in */
        if( bottom_of_window > bottom_of_object ){

        $('.chart').easyPieChart({
          size: 140,
          lineWidth: 6,
          lineCap: "square",
          barColor: "#22a7f0",
          trackColor: "#ffffff",
          scaleColor: !1,
          easing: 'easeOutBounce',
          animate: 5000,
          onStep: function(from, to, percent) {
          $(this.el).find('.percent').text(Math.round(percent));
          }
        });

        }

    }); 

});

---

在包含easyPieChart.js之后，只需将此代码放在主js文件中

$(document).ready(function(){
    $(document).scroll(function(){
    var postionTop = $(document).scrollTop();
    console.log(postionTop);
    if((postionTop >=600)){
        $('.chart').easyPieChart({
            animate: 2000,
       });
    };
  });
});

HTML代码

可以使用“数据”属性处理每个图表的动画速度

<div class="chart" data-speed="5000"></div>

---

好的，你应该让饼图显示为“无”，并在滚动位置显示它们。我来检查一下。如何处理。在jQuery中使用窗口滚动功能？？或者任何其他方式，如果您设置饼图动画而不是使用easyPieChart，则应使用highchartJs javascript库。highchartJs比easyPieChart有更多的动画功能。请在代码中提供一些说明，以便将来的用户更容易理解您的想法/代码-

$(window).scroll( function(){

    /* Check the location of each desired element */
    $('.chart').each( function(i){
var el = $(this),
speed = el.data('speed');

        var bottom_of_object = $(this).offset().top + $(this).outerHeight();
        var bottom_of_window = $(window).scrollTop() + $(window).height();

        /* If the object is completely visible in the window, fade it in */
        if( bottom_of_window > bottom_of_object ){

        $('.chart').easyPieChart({
          size: 140,
          lineWidth: 6,
          lineCap: "square",
          barColor: "#22a7f0",
          trackColor: "#ffffff",
          scaleColor: !1,
          easing: 'easeOutBounce',
          animate: speed ,
          onStep: function(from, to, percent) {
          $(this.el).find('.percent').text(Math.round(percent));
          }
        });

        }

    }); 

});