异步加载Google图表？

Question

我有下面的代码加载谷歌图：

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文件移动到成功处理程序中，并删除异步：false行会使这个工作，但我错了。

任何想法如何让谷歌图表异步加载？

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