添加谷歌图表后，我的页面不会加载

Question

我想在ajax调用后在同一页面上显示数据表+谷歌图表。我从ajax调用中获得了numberOfStudents和numberOfFamiliesUsingApp，我正在将其传递给谷歌图表。当我尝试下面的代码页时，它不会出现。在开发人员工具中，我一直看到"缓冲区使用情况"，但什么都没有显示。

<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>

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

Answer 1

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

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

您可以用反斜杠转义"，也可以使用'。像这样：

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

（请注意，代码的彩色化使这一点一目了然。如果你还没有，使用一个好的文本编辑器将帮助你避免未来出现类似的问题）