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

2022-01-17 00:00:00 charts jquery javascript html html5-canvas

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

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?

我的代码如下:

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

推荐答案

您可以将检查某物是否可见与一个标志结合起来，以跟踪图形是否在出现在视口中后被绘制(尽管这样做使用插件 bitiou 发布会更简单):

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

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

相关文章