Question

我想使用Google Chart Tools绘制股票图表。我自编的webservice返回带有股票报价的JSON对象。 JQuery使用$ .getJSON（）读取JSON数据。使用控制台日志，我能够检查数据是否以正确的方式读入。

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

我在图表中看到一条线！

当我查看$ .each函数调用时，循环导致执行

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

设置以下值，例如。（使用控制台日志检查）

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

当我尝试在$ .each函数中执行data.addRow时，为什么没有绘制图表？我看到一张图表，但没有一条线。在firefox浏览器中我没有收到fireburg的任何错误消息！在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>

Answer 1

您的问题在于执行顺序。 $.getJSON()发出Ajax请求。 Ajax是异步的，这意味着在此期间继续处理。会发生以下情况。

数据请求将发送至“StockReceiver.jsp”。
绘制一个空图表。
来自“StockReceiver.jsp”的回复来得太晚，无法在图表中使用。

解决方案是将chart.draw()命令移动到Ajax回调function(json) {...}。

Google Chart Tools不会绘制图表/失败的绘图图表

1 个答案: