Javascript 当滚动到该部分时，如何使Chart.js动画化？

我正在尝试使用chart.js（）中的饼图。一切都很顺利，但动画会在页面加载后立即出现，但由于用户必须向下滚动才能看到图表，因此他们不会看到动画。我是否可以使动画仅在滚动到该位置时启动？如果可能的话，是否可以在每次图表进入视图时设置动画

我的代码如下：

<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>

变量数据=[
{
数值：30，
颜色：“F38630”
},
{
价值：50，
颜色：“E0E4CC”
},
{
数值：100，
颜色：“69D2E7”
}
];
var myPie=新图表（document.getElementById（“canvas”）.getContext（“2d”））.Pie（pieData）；

这就是您想要的：

下次请检查是否已经有答案；）

---

或者：

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

var inView=false；
函数IsCrolledinToView（elem）
{
var docViewTop=$（window.scrollTop（）；
var docViewBottom=docViewTop+$（window）.height（）；
var elemTop=$（elem）.offset（）.top；
var elemBottom=elemTop+$（elem）.height（）；
返回（（elemTop=docViewTop））；
}
$（窗口）。滚动（函数（）{
if（isScrolledIntoView（“#canvas”））{
if（inView）{return；}
inView=true；
新图表（document.getElementById（“canvas”）.getContext（“2d”））.Pie（数据）；
}否则{
inView=false；
}
});

我不知道你是否能做到这一点，我也遇到了同样的问题，并以这种简单的方式在没有任何插件的情况下解决了它，请查看：

$(window).bind("scroll", function(){            
    $('.chartClass').each(function(i){ 
        var dougData = [
            {value: 100, color:"#6abd79"},
            {value: 20, color:"#e6e6e6"}
        ];
        var graphic = new Chart(document.getElementById("html-charts").getContext("2d")).Doughnut(dougData, options);
        $(window).unbind(i);
    });
});

---

我在Chart.js上也遇到了同样的问题，并找到了一个非常好的解决方案。 GitHub上有一个由FVANCOP调用的包。 他扩展了它并添加了几个功能

查看示例，图表是通过向下滚动绘制的

声明的责任是什么

dynamicDisplay : true

---

最好使用延迟插件

新图表（ctx{
//…数据。。。
选项：{
//…其他选择。。。
插件：{
延期：{
xOffset:150，//延迟到画布宽度的150px在视口内
yOffset:“50%”，//延迟到画布高度的50%在视口内
延迟：500//在视口内考虑画布后延迟500毫秒
}
}
}
});

它将第一次工作，假设用户向下滚动再向上滚动，动画将不会出现。您是否在滚动事件中调用此功能？另外，你有没有尝试过jquery插件，更容易使用。谢谢。它的工作原理与JSFIDLE示例中的charmIn类似，每次我滚动到元素，它都会变得越来越大。当你链接到脚本cdn.jsdeliver.net/npm/chartjs-plugin时，你不需要添加任何选项-deferred@1“>默认情况下，它将在滚动所有图表时设置动画。

dynamicDisplay : true

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