仅当用户在特定DIV上滚动时才显示chart.js动画

Question

仅当用户滚动页面并到达图表的div时，才想显示我的图表。

现在图表会将页面加载到一起，当我到达图表时，它会被收费。

我用Chart.js制作这个图表。

这是网站的链接：我有图表下的“技能”的声音 http://www.matteoschiatti.it/

。

这是我的技能部分：

<section id="skills" class="skills-section"> 

    <div id="counter"> 
     <canvas id="polarChart" height="100%"></canvas> 
    </div> 

</section> 

JS：

 $(function() { 
    var oTop = $('#counter').offset().top - window.innerHeight; 
    var oBottom = $('#contact').offset().top - window.innerHeight; 
    var chartHidden = true; 
    $(window).scroll(function(){ 
     var pTop = $('body').scrollTop(); 
     if ((pTop > oTop) && (chartHidden)) { 
      chartHidden = false; 
      start_count(); 
     } else if (pTop < oTop) { 
      chartHidden = true; 
     } 

     if ((pTop > oBottom)) { 
      chartHidden = true; 
     } 
    }); 
}); 

function start_count(){ 
    var ctx = document.getElementById("polarChart").getContext('2d'); 
    var myChart = new Chart(ctx, { 
     type: 'polarArea', 
     data: { 
      labels: ["Php", "Css", "Html", "Wordpress", "Magento", "Photoshop", "Web Analisis", "Seo"], 
      datasets: [{ 
       backgroundColor: [ 
        "#0066ff", 
        "#cc3333", 
        "#ffba02", 
        "#009966", 
        "#ff6600", 
        "#db01de", 
        "#00cc33", 
        "#00ccff" 
       ], 
       data: [65, 85, 90, 95, 75, 75, 85, 85] 
      }] 
     } 
    }); 
} 

Answer 1

一旦图表变得可见后制定，
你不想保持与每一个卷轴绘画

使用一个标志来知道它何时第一次被绘制，请参阅chartHidden ...

$(function() { 
    var oTop = $('#counter').offset().top - window.innerHeight; 
    var chartHidden = true; 
    $(window).scroll(function(){ 
     var pTop = $('body').scrollTop(); 
     if ((pTop > oTop) && (chartHidden)) { 
      chartHidden = false; 
      start_count(); 
     } 
    }); 
}); 

function start_count(){ 
    var ctx = document.getElementById("polarChart").getContext('2d'); 
    var myChart = new Chart(ctx, { 
     type: 'polarArea', 
     data: { 
      labels: ["Php", "Css", "Html", "Wordpress", "Magento", "Photoshop", "Web Analisis", "Seo"], 
      datasets: [{ 
       backgroundColor: [ 
        "#0066ff", 
        "#cc3333", 
        "#ffba02", 
        "#009966", 
        "#ff6600", 
        "#db01de", 
        "#00cc33", 
        "#00ccff" 
       ], 
       data: [65, 85, 90, 95, 75, 75, 85, 85] 
      }] 
     } 
    }); 
}