異步加載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'] 
      }); 
     } 
    }); 
}