Question

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

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

感谢你们的帮助！

Answer 1

我之前有过类似的请求，我发现这有帮助：

http://highcharts.uservoice.com/forums/55896-general/suggestions/4457022-start-the-animation-when-the-chart-scrolls-in-to-v

Answer 2

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

http://scrollrevealjs.org/

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

在滚动上加载Highchart动画

2 个答案: