chart.js動畫加載

Question

我希望在頁面向下滾動時加載餅圖（及其動畫），我該怎么做？

這是我的代碼：

<script>
var ctx = document.getElementById("myPieChart").getContext("2d");
var myPieChart = new Chart(ctx, {
    type: 'pie',
    data: {
        datasets: [{
            data: [10, 20, 70],
            backgroundColor: [
                'rgba(243, 89, 105, 1)',
                'rgba(174, 233, 244, 1)',
                'rgba(247, 239, 151, 1)'
            ],
            borderWidth: 2,
        }],
        labels: [
            'Test1',
            'Test2',
            'Test3'
        ]
    },
    options: {
        animation: {
            animateRotate: true,
            easing: 'linear'
        },
    }
});
</script>

非常感謝你！

Answer 1

嘗試這種方式：

var vis=0;
$( document ).scroll(function() {
    if(isScrolledIntoView(document.getElementById('your-element'))){
        if(vis==0){

        //your code            

        vis=1;
        }
    }
});

function isScrolledIntoView(el) {
    var rect = el.getBoundingClientRect();
    var elemTop = rect.top;
    var elemBottom = rect.bottom;

    var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
    return isVisible;
}