滚动到该部分时如何使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>

Answer 1

您可以组合检查是否可以使用标记查看某些内容,以便跟踪图形是否已经在视口中显示(尽管使用插入的插件执行此操作会更简单):

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