添加谷歌圖表後我的頁面無法加載

我想在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

添加谷歌圖表後我的頁面無法加載

回答

相關問題