Google Chart Tools不繪製圖表/失敗繪圖圖表

我想使用Google Chart Tools繪製股票圖表。我自寫的webservice會返回帶有股票報價的JSON對象。 JSON數據由JQuery使用$ .getJSON（）讀取。使用控制檯日誌，我能夠檢查數據是否以正確的方式讀入。Google Chart Tools不繪製圖表/失敗繪圖圖表

JSON數據是這樣的：

{ "share": [ 
{ "date": "2012-01-30", "open": 72.38, "close": 73.13 }, 
{ "date": "2012-01-23", "open": 77.71, "close": 72.80 }, 
{ "date": "2012-01-16", "open": 75.25, "close": 78.05 } 
]}

對於繪畫我使用下面的代碼片段：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<script type="text/javascript"> 
    google.load("visualization", "1", {packages:["corechart"]}); 
    google.setOnLoadCallback(drawChart); 

    function drawChart() { 
    var options = { 
     width: 720, 
     height: 480, 
     title: 'Chart' 
    }; 

    var data = new google.visualization.DataTable(); 
    data.addColumn('number', 'Day'); 
    data.addColumn('number', 'Sales'); 

    $.getJSON("StockReceiver.jsp", 
     function(json) { 
      $.each(json.share, function(i, item){ 
       console.log ([i, item.open]); 
       data.addRow([i, item.open]); 
       if (i == 3) { 
        return false; 
       } 
      }); 
     }); 

    var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 
    chart.draw(data, options); 
    } 
</script> 
<div id="chart_div"></div>

我的問題是，圖表不繪製！起初我試圖用大約3.000的值繪製圖像。由於這不起作用，我試圖用兩個數字值畫一條線。（要指出的，如果我做錯了什麼）

當我寫

data.addRow([1, 20]); 
data.addRow([2, 40]);

我看到一個線圖中！

當我看入$。每個函數調用的循環導致

data.addRow([i, item.open]);

以下值的執行設置如。

data.addRow([0, 72.38]); 
data.addRow([1, 77.71]); 
data.addRow([2, 75.25]);

爲什麼圖表沒有繪製（使用控制檯日誌檢查），當我嘗試在$。每個函數中執行data.addRow？我看到一張圖表，但沒有一行。在firefox瀏覽器中，我根本沒有收到任何錯誤消息！在Internet Explorer中它也不起作用。有任何想法嗎？

提出的解決方案是：

<script 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<script type="text/javascript"> 
google.load("visualization", "1", { 
    packages : [ "corechart" ] 
}); 
google.setOnLoadCallback(drawChart); 

function drawChart() { 
    var options = { 
     width : 720, 
     height : 480, 
     title : 'Chart' 
    }; 

    $.getJSON("StockReceiver.jsp", function(json) { 
     var data = new google.visualization.DataTable(); 
     data.addColumn('date', 'Date'); 
     data.addColumn('number', 'Sales'); 

     $.each(json, function(i, item) { 
      data.addRow([ new Date(item.date), item.open ]); 
     }); 

     var chart = new google.visualization.LineChart(document 
       .getElementById('chart_div')); 
     chart.draw(data, options); 
    }); 
} 
</script>

來源

2012-02-04 Martin

難道是「類型」的問題？是72.38等數字或字符串？ – 2012-02-04 13:53:55

由於@Grilse建議使用ajax調用時出現問題。該圖表是一個空的圖表，並且StockReceiver試圖加載庫存數據。當數據完全加載時，我不得不觸發chart.draw函數。我忘了這個。 – Martin 2012-02-04 15:45:00

你的問題是執行順序。 $.getJSON()發出Ajax請求。 Ajax是異步的，意味着處理在此期間繼續。接下來會發生什麼？

對數據的請求發送到「StockReceiver.jsp」。
繪製空白圖表。
來自「StockReceiver.jsp」的響應時間太晚，無法在圖表中使用。

解決方案是將chart.draw()命令移動到Ajax回調function(json) {...}中。

來源

2012-02-04 14:47:19 Grilse

謝謝！它似乎工作。這是一個誤解在正確的方式使用jquery與異步請求。現在，它的工作原理和我的股票圖表繪製:-) – Martin 2012-02-04 14:58:00

你是一個傳奇，這完美的作品 – dspacejs 2015-07-08 10:31:45

Google Chart Tools不繪製圖表/失敗繪圖圖表

回答

相關問題