ユーザーが特定の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] 
      }] 
     } 
    }); 
}