只在用户滚动到特定DIV时显示chart.js动画

Question

只在用户滚动到特定DIV时显示chart.js动画

3

我希望当用户滚动页面到图表所在的div时才显示我的图表。现在，图表会和页面一起加载，当我到达图表时，它已经被加载了。我使用Chart.js制作此图表。这是网站链接： http://www.matteoschiatti.it/。我在“skills”选项卡下方有图表。以下是我的技能部分：

<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]
          }]
      }
  });
}

- Crashy

请参考此答案，了解当用户滚动页面并到达图表所在的div时的情况... - WhiteHat

这个解决方案可以让我了解一个元素是否在页面的可见部分。但是，我不知道如何只在用户滚动时显示图表。你能帮我理解吗？我应该在<body>标签底部添加JS代码吗？还是稍后再添加？ - Crashy

我不确定我是否理解了。你是在监听'scroll'事件吗？当滚动事件被触发时，使用提供的答案确定何时可见，然后绘制图表... - WhiteHat

我使用上面的JS函数（问题已更新）在DOM中找到图表的div，但现在当我到达该div时，如何启动图表的js动画？ - Crashy

抱歉，我忘记了，我添加了代码。 - Crashy

我将图表的代码添加到“start_count（）”函数中，但它运行不佳，并且该函数每次滚动一点时都会加载图表的代码，因此无法使用。 - Crashy

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- WhiteHat · Accepted Answer

一旦图表绘制完成并变得可见，您不希望在每次滚动时都重新绘制。使用标志来知道何时第一次绘制，参见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]
          }]
      }
  });
}