jquery - 异步加载 Google 图表？

Question

我有以下代码来加载 Google 图表:

function drawChart1() {
        var jsonData1 = $.ajax({
        url: "library/json_netsales.php",
        dataType:"json",
        async: false
    }).responseText;

    // Create our data table out of JSON data loaded from server.
    var data1 = new google.visualization.DataTable(jsonData1);
    var formatter = new google.visualization.NumberFormat(
        {negativeParens: true, pattern: '$###,###'});
    formatter.format(data1, 1);

    // Instantiate and draw our chart, passing in some options.
    var chart1 = new google.visualization.AreaChart(document.getElementById('chart_netsales'));
    chart1.draw(data1, {width: 300, height: '100%', hAxis: { textPosition: 'none', baselineColor: '#fff' }, vAxis: { textPosition: 'none', baselineColor: '#fff', gridlines: {count: 0}, minValue: 0}, chartArea:{width:"100%",height:"80%"}, legend: {position: 'none' }, backgroundColor: '#232323', colors: ['#fff']});
}

现在的问题是异步标志已关闭，这意味着我会出现页面锁定。我想异步加载它，但我尝试让它工作失败了。

我认为将 .responseText 之后的所有内容移至成功处理程序中并删除 async:false 行将使此工作正常进行，但我错了。

关于如何异步加载 Google 图表有什么想法吗？

Answer 1

这应该有效:

function drawChart1() {
    $.ajax({
        url: "library/json_netsales.php",
        dataType: "json",
        success: function (json) {
            // Create our data table out of JSON data loaded from server.
            var data1 = new google.visualization.DataTable(json);
            var formatter = new google.visualization.NumberFormat({
                negativeParens: true,
                pattern: '$###,###'
            });
            formatter.format(data1, 1);

            // Instantiate and draw our chart, passing in some options.
            var chart1 = new google.visualization.AreaChart(document.getElementById('chart_netsales'));
            chart1.draw(data1, {
                width: 300,
                height: '100%',
                hAxis: {
                    textPosition: 'none',
                    baselineColor: '#fff'
                },
                vAxis: {
                    textPosition: 'none',
                    baselineColor: '#fff',
                    gridlines: {count: 0},
                    minValue: 0
                },
                chartArea: {
                    width:"100%",
                    height:"80%"
                },
                legend: {position: 'none'},
                backgroundColor: '#232323',
                colors: ['#fff']
            });
        }
    });
}