jQuery 滚动到该部分时如何使 Chart.js 动画化？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18772547/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make the Chart.js animate when scrolled to that section?
提问by Suthan Bala
I am trying to use the pie chart from Chart.js (http://www.chartjs.org/docs/#pieChart-exampleUsage). Everything works smooth, but the animation happens as soon as the page loads, but since the user has to scroll down to see the chart, they won't see the animation. Is there anyway I can make the animation to start only when scrolled to that position? Also if possible, is it possible to animate everytime when that chart becomes into view?
我正在尝试使用 Chart.js ( http://www.chartjs.org/docs/#pieChart-exampleUsage) 中的饼图。一切正常，但动画在页面加载后立即发生，但由于用户必须向下滚动才能查看图表，因此他们将看不到动画。无论如何，我可以让动画仅在滚动到该位置时开始吗？另外，如果可能的话，是否可以在每次看到该图表时进行动画处理？
My code is as follows:
我的代码如下：
<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>
回答by Jason P
You can combine the check for whether something is viewable with a flag to keep track of whether the graph has been drawn since it appeared in the viewport (though doing this with the plugin bitiou posted would be simpler):
您可以将检查是否可以查看某些内容与一个标志相结合，以跟踪自图形出现在视口中以来是否已绘制该图形（尽管使用发布的插件 bitiou 执行此操作会更简单）：
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;
}
});
回答by user3577712
I don't know if you could do that, I had the same issue and resolved it without any plugin in this simple way, check out:
我不知道您是否可以这样做，我遇到了同样的问题并以这种简单的方式在没有任何插件的情况下解决了它，请查看：
$(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);
});
});
回答by Holger
I had the same problem with Chart.js and found a really great solution. There is a package on GitHub that is called ChartNew.jsby FVANCOP. He expanded it and added several functions.
我在 Chart.js 上遇到了同样的问题，并找到了一个非常好的解决方案。GitHub 上有一个被FVANCOP称为ChartNew.js的包。他扩展了它并添加了几个功能。
Look at the sample, the charts are drawn by scrolling down.
查看示例，图表是通过向下滚动绘制的。
Responsible is the statement
负责的是声明
dynamicDisplay : true
回答by sierra.charli3
Best to use deferred plugin
最好使用延迟插件
https://chartjs-plugin-deferred.netlify.com/
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
}
}
}
});
回答by bitoiu
This is what you want:
这就是你想要的：
Check if element is visible after scrolling
Next time please check if there's already an answer ;)
下次请检查是否已经有答案;)
Alternatively: jquery.appear
