滚动加载Highchart动画 [英] Load Highchart animation on scroll

问题描述

我已经开发了几个高图，我想在用户向下滚动并且图形容器可见时开始动画。

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

这是我工作的一小部分： http://jsfiddle.net/LWmn5/

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

JS：

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

感谢您的帮助！

推荐答案

您需要使用以下插件之一：

You need to use one of these plugin:

http://scrollrevealjs.org/

http://mynameismatthieu.com/WOW/docs.html

这篇关于滚动加载Highchart动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！