javascript - 延迟加载 Highcharts 图表

Question

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

有谁知道如何解决这个问题？

Answer 1

有几种方法可以做到这一点。一种是在收到数据时初始化图表（例如使用 jQuery post，数据看起来像 [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了解详情。

干杯