Load Highchart animation on scroll

2020-02-13 07:06发布

I have developed several highcharts and I would like to start the animation when the user scrolls down and the graph container is visible.

Here is a fiddle of my work: http://jsfiddle.net/LWmn5/

JS:

$(function () {
    $('#container1').highcharts({
        chart: {
            type: 'pie',
            options3d: {
                enabled: false,
                alpha: 0
            }
        },

        colors: ['#081969', '#0e2569', '#1e3b81', '#284893', '#30509b'],
        title: {
            text: ''
        },tooltip: {
            enabled: false
        },
        plotOptions: {
            pie: {
                innerSize: 140,
                depth: 45
            }
        },
        series: [{
            name: 'Delivered amount',
            data: [
                ['43.6%', 43.6],
                ['22.5%', 22.5],
                ['17.9%', 17.9],
                ['5.1%', 5.1],
                ['10.8%', 10.8]
            ]
        }]
    });
});

$(function () { 
    $('#container3').highcharts({

                                legend: {
            enabled: false
        },
        chart: {
            type: 'column',
            margin: 25,
            options3d: {
                enabled: true,
                alpha: 20,
                beta: 25,
                depth: 70
            }
        },
        title: {
            text: ''
        },

        plotOptions: {
            column: {
                depth: 45,
                 colorByPoint: true
            }
        },
            colors: [
                '#081969',
                'grey',
                '#30509b'
            ],
        xAxis: {
            categories: ['21.56Mbps Melita', '19.47Mbps EU Average', '7.93Mbps GO'],
            labels: {
                enabled: true
            },
            gridLineWidth: 0,
                minorGridLineWidth: 0,
        },
        yAxis: {
            title: {
                text: null
            },
            opposite: true,
            labels: {
                enabled: false
            },
            gridLineWidth: 0,
                minorGridLineWidth: 0,
        },
        series: [{
            name: '',
            data: [4, 3, 2]
        }]
    });
});

Appreciate your great help guys!