延迟加载Highcharts的图表

时间:2014-03-18 20:15:52

标签: javascript html highcharts webiopi

我想知道是否有办法推迟加载Highcharts'页面加载图表。目前我的图表在页面打开时加载,这导致我的代码崩溃,因为脚本没有足够的时间来获取图表的数据。

有谁知道怎么解决这个问题?

1 个答案:

答案 0 :(得分:0)

有几种方法可以做到这一点。一种是在收到数据时初始化图表(例如使用jQuery帖子,数据看起来像[5,6,8,11]):

$(function(){
    $.post('test_highchart.asp', {actn:'load-data'}, function(dat){
        $('#chart').highcharts({
            chart: {
                type: 'bar'
            },
            title: {
                text: 'Delayed Loading'
            },
            xAxis: {
                title: {
                    text: 'Values'
                }
            },
            series:[{
                name: 'value',
                data: dat
            }]
        });
    }, 'json');
});

或者您可以在加载时初始化图表,然后在获得数据时将数据泵入图表(数据看起来像[5,6,8,11]):

$(function(){
    window.chart = new Highcharts.Chart({
        chart: {
            renderTo: 'chart',
            type: 'bar'
        },
        title: {
            text: 'Delayed Loading'
        },
        xAxis: {
            title: {
                text: 'Values'
            }
        },
        series:[{
            name: 'values',
            id: 'series1',
            data: []
        }]
    });

    // load data:
    $.post('test_highchart.asp', {actn:'load-data'}, function(dat){
        $.each(dat, function (val) {
            // add points to chart:
            window.chart.get('series1').addPoint(val);
        });
    }, 'json');
});

查看http://www.highcharts.com/docs/working-with-data/live-data了解详情。

欢呼声