如何使用AJAX查询动态填充Google图表，获取DOM异常8

我有一个控制器，它以Google Charts预期的格式返回（很好）格式化的JSON。我可以通过导航到http://localhost:9000/manager/echoVariables查看输出，并且OP如下所示：[["foo",3],["foo",3]]如何使用AJAX查询动态填充Google图表，获取DOM异常8

我想要做一个AJAX调用，并且不能将此JSON传递给Google Charts。我可以确认收到的是JSON，我在Chrome的浏览器检查器的“网络”选项卡中进行了验证。

但是我在将这个JSON字符串传递给Google Charts的过程中收到DOM Exception 8。

这是创建图形视图：

#{extends 'main.html' /} #{set title:'Home' /} #{set 'moreScripts'} 
#{/set} 
<!--Load the AJAX API--> 
<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<script type="text/javascript"> 

     // Load the Visualization API and the piechart package. 
     google.load('visualization', '1.0', {'packages':['corechart']}); 

     // Set a callback to run when the Google Visualization API is loaded. 
     google.setOnLoadCallback(drawChart); 

     // Callback that creates and populates a data table, 
     // instantiates the pie chart, passes in the data and 
     // draws it. 
     function drawChart() { 

     // Create the data table. 
     var data = new google.visualization.DataTable(); 
     data.addColumn('string', 'Topping'); 
     data.addColumn('number', 'Slices'); 
     data.addRows([ 
      ['Mushrooms', 3], 
      ['Onions', 1], 
      ['Olives', 1], 
      ['Zucchini', 1], 
      ['Pepperoni', 2] 
     ]); 

     // Set chart options 
     var options = {'title':'How Much Pizza I Ate Last Night', 
         'width':400, 
         'height':300}; 

     // Instantiate and draw our chart, passing in some options. 
     var chart = new google.visualization.PieChart(document.getElementById('chart_div')); 
     chart.draw(data, options); 
     } 
    </script> 

<script type="text/javascript"> 
//$.get() 
$(document).ready(function() { 
    $("#result").html(); 
    $.get(
     '/manager/echoVariables', 
     {var1: "foo", var2: 5}, 
     function(responseText){ 
      $("#result").html(responseText); 
     }, 
     "json" 
    ); 
}); 


</script> 

<body> 
    <!--Div that will hold the pie chart--> 
    <div id="chart_div"></div> 
    <div id="result"></div> 
</body>

如何使饼图显示我的价值观，而不是在该段给出的那些？

谢谢。

来源

2013-02-27 theTuxRacer

您的代码有两个问题。首先，您在#result div上使用jQuery的html()函数，但是您传递的是JavaScript对象而不是像函数期望的那样的字符串。如果你只是想看看数据，你会改变，要像

$.get(
    '/manager/echoVariables', 
    {var1: "foo", var2: 5}, 
    function(responseText){ 
     $("#result").html(JSON.stringify(responseText)); 
    }, 
    "json" 
);

另一个问题，当然是，你没有真正的结果数据传递给谷歌图表API。要做到这一点，您需要使用从AJAX调用中取回的数据而不是示例中的数据调用chart.draw。

来源

2013-02-27 16:57:47

谢谢杰夫，我会试试看。 – theTuxRacer 2013-02-28 07:10:01

是的杰夫，我能够做到。 JS不是我的特长，我想知道你是否会帮我清理它？ – theTuxRacer 2013-02-28 08:01:16

如何使用AJAX查询动态填充Google图表，获取DOM异常8

回答

相关问题