我正在尝试使用 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>
最佳答案
您可以将检查某些内容是否可见与标志相结合,以跟踪自图形出现在视口(viewport)中以来是否已绘制图形(尽管使用 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;
}
});
关于javascript - 滚动到该部分时如何使 Chart.js 动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18772547/