javascript - 仅当用户在特定 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]
          }]
      }
  });
}