從Json獲取的Google圖表

Question

我在嘗試使用Google圖表API創建圖表。我的數據如圖所示存儲爲json文件。

{ 
     "1":[{"a":0,"d":0}], 
     "2":[{"a":0,"d":0}], 
     "3":[{"a":6,"d":62.92}], 
     "4":[{"a":1.57,"d":75.32}], 
     "5":[{"a":1.67,"d":66.45}], 
     "6":[{"a":1.25,"d":76}], 
     "7":[{"a":1.36,"d":75.08}], 
     "8":[{"a":1.59,"d":69.27}], 
... 
    } 

我正在抓取json文件，將對象推到一個javascript數組中。它沒有問題。我添加了這些行來理解發生了什麼。但是谷歌API不接受我的價值觀，並只顯示

dots.push([5, 50]); 
dots.push([7,60]); 

這裏是我的代碼

function drawDots() 
{ 
    var data = new google.visualization.DataTable(); 
    data.addColumn('number', 'a'); 
    data.addColumn('number', 'd'); 

    dots = new Array; 
    dots.push([5, 50]); 
    dots.push([7,60]); 

    $.getJSON("/graph/graph.json", function(json) 
    { 
     $.each(json, function(id, num) 
     { 
      $.each(num, function(i, e) 
      {   
       dots.push([e.a, e.d]); 
      }); 
     }); 

    }); 

    data.addRows(dots); 

    var options = { 
     title: '', 
     hAxis: {title: 'Data 1', minValue: 0, maxValue: 100}, 
     vAxis: {title: 'Data 2', minValue: 0, maxValue: 100}, 
     legend: 'none' 
    }; 

    var chart = new google.visualization.ScatterChart(document.getElementById('chart_div')); 

    chart.draw(data, options); 
} 

值的數據類型是數字，我也試過的eval（）來。在控制檯中，數值似乎在數組中。不明白什麼是錯的。

這裏是一個屏幕截圖點和數據的控制檯日誌。

Answer 1

問題在於異步getJSON調用。 getJSON調用發生，但仍在檢索graph.json的內容時，其餘代碼將執行。這意味着getJSON回調會在繪製圖表後運行。

解決方案：移動圖表繪製代碼到的getJSON回調：

function drawDots() 
{ 
    var data = new google.visualization.DataTable(); 
    data.addColumn('number', 'a'); 
    data.addColumn('number', 'd'); 

    dots = new Array; 
    dots.push([5, 50]); 
    dots.push([7,60]); 

    $.getJSON("/graph/graph.json", function(json) 
    { 
     $.each(json, function(id, num) 
     { 
      $.each(num, function(i, e) 
      {   
       dots.push([e.a, e.d]); 
      }); 
     }); 

     data.addRows(dots); 

     var options = { 
      title: '', 
      hAxis: {title: 'Data 1', minValue: 0, maxValue: 100}, 
      vAxis: {title: 'Data 2', minValue: 0, maxValue: 100}, 
      legend: 'none' 
     }; 

     var chart = new google.visualization.ScatterChart(document.getElementById('chart_div')); 

     chart.draw(data, options); 
    }); 
}