在滚动上加载Highchart动画

时间:2014-05-07 09:01:22

标签: javascript jquery highcharts

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

这是我工作的一小部分: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]
        }]
    });
});

感谢你们的帮助!

2 个答案:

答案 0 :(得分:2)

答案 1 :(得分:1)