滚动到该部分时如何使 Chart.js 动画？

Question

我正在尝试使用 Chart.js ( http://www.chartjs.org/docs/#pieChart-exampleUsage ) 中的饼图。一切顺利，但动画会在页面加载后立即发生，但由于用户必须向下滚动才能看到图表，因此他们看不到动画。无论如何我可以让动画只在滚动到那个位置时才开始吗？另外，如果可能的话，是否可以在每次看到该图表时都设置动画？

我的代码如下：

 <canvas id="canvas" height="450" width="450"></canvas>
    <script>
        var pieData = [
                {
                    value: 30,
                    color:"#F38630"
                },
                {
                    value : 50,
                    color : "#E0E4CC"
                },
                {
                    value : 100,
                    color : "#69D2E7"
                }

            ];

    var myPie = new Chart(document.getElementById("canvas").getContext("2d")).Pie(pieData);

    </script>

原文由 Suthan Bala 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以将检查是否可以查看某些内容与标志结合起来，以跟踪自图形出现在视口中以来是否已绘制图形（尽管使用 bitiou 发布的插件执行此操作会更简单）：

http://jsfiddle.net/TSmDV/

 var inView = false;

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemTop <= docViewBottom) && (elemBottom >= docViewTop));
}

$(window).scroll(function() {
    if (isScrolledIntoView('#canvas')) {
        if (inView) { return; }
        inView = true;
        new Chart(document.getElementById("canvas").getContext("2d")).Pie(data);
    } else {
        inView = false;
    }
});

原文由 Jason P 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

最好使用延迟插件

https://chartjs-plugin-deferred.netlify.com/

 <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-deferred@1"></script>

new Chart(ctx, {
  // ... data ...
  options: {
    // ... other options ...
    plugins: {
      deferred: {
        xOffset: 150,   // defer until 150px of the canvas width are inside the viewport
        yOffset: '50%', // defer until 50% of the canvas height are inside the viewport
        delay: 500      // delay of 500 ms after the canvas is considered inside the viewport
      }
    }
  }
});

原文由 sierra.charli3 发布，翻译遵循 CC BY-SA 4.0 许可协议