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不绘制图表/失败绘图图表

回答

相关问题