添加谷歌图表后我的页面无法加载

我想在ajax调用后在同一页面上显示数据表+谷歌图表。我从ajax调用中获取numberOfStudents和numberOfFamiliesUsingApp，并将其传递给Google图表。当我尝试下面的代码页时不显示。在开发者工具里面，我一直看到'缓冲区使用'，但是没有任何显示。添加谷歌图表后我的页面无法加载

<script src='assets/js/jquery.dataTables.min.js'></script> 
<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<script type="text/javascript"> 
    var classId = "<s:property value="classId"/>" ; 
    var schoolId = "<s:property value="schoolId"/>" ; 
    var tableData = []; 
    var numberOfStudents = 0; 
    var numberOfFamiliesUsingApp = 0; 

    $(document).ready(function() { 
     $.getJSON("json1/getJSONParentResult.json?schoolId="+schoolId+"&classId="+classId, function(data) { 
     tableData = data.data; 
     numberOfStudents = data.numberOfStudents; 
     numberOfFamiliesUsingApp = data.numberOfFamiliesUsingApp; 

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

     function drawChart() { 

      // Create the data table. 
     var data = new google.visualization.DataTable(); 
     data.addColumn('string', 'Total'); 
     data.addColumn('number', 'Usage'); 
     //replace the values with javascript variables which are set after ajax call 
     data.addRows([ 
      ['Total Students', numberOfStudents], 
      ['Total Usage', numberOfFamiliesUsingApp] 
     ]); 

     // Set chart options 
     var options = {'title':'School Rush Activities', 
        'width':500, 
        'height':400}; 

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

     $('#example').dataTable({ 
     "bPaginate": true, 
     "bProcessing": true, 
     "bServerSide": false, 
     "iDisplayLength": 100, 
     "aaSorting": [[1, 'asc']], 
     "aaData": tableData 
     }); 
    }); 
}); 
</script> 
<div id="chart_div"></div> 
<table id="example" class="display" cellspacing="0" width="100%"> 
    <thead> 
     <tr> 
      <th>Last Login</th> 
      <th>Student LastName</th> 
      <th>Student FirstName</th> 
      <th>Account Username</th> 
     </tr> 
    </thead> 
</table>

如果我评论谷歌图表代码，然后数据表显示正常。无法理解这里出了什么问题。请帮忙。

来源

2015-11-05 user2869612

你能为我们提供你的JSON吗？ –

{“data”：[[null，“Datey”，“Kabir”，“2220000000”]，[null，“Datey”，“Zara”，“2220000000”]，null，Rao，Aditya， “4444444444”]]，“numberOfStudents”：10，“numberOfFamiliesUsingApp”：8} – user2869612

你的脚本有一个语法错误，因为你没有正确地转义你的字符串。这些线是这种情况的原因：

var classId = "<s:property value="classId"/>"; 
var schoolId = "<s:property value="schoolId"/>";

您可以逃脱"用反斜杠，或使用'。像这样：

var classId = "<s:property value=\"classId\"/>"; 
var schoolId = '<s:property value="schoolId" />';

（注意代码的着色如何让一目了然这个令人难以置信的清晰。如果你没有准备好，使用good text editor将帮助你避免今后发生类似的问题。）

来源

2015-11-05 06:58:51 yuvi

仍是同样的问题。当我将谷歌图表放入单独的脚本标记时，它唯一的工作时间。但有时候我得到正确的结果有时候我没有得到结果。我必须刷新2-3次。 – user2869612

@ user2869612是否在开发控制台中看到任何错误？（Ctrl + Shift + J） – yuvi

控制台上没有错误，“缓冲区使用”除外。图表会出现（可能在2-3刷新后）如果我将谷歌表单移动到一个单独的标记中 – user2869612

添加谷歌图表后我的页面无法加载

回答

相关问题