添加谷歌图表后我的页面没有加载

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" />';

（请注意代码的着色如何使这一点一目了然。如果您还没有，使用good text editor 将帮助您避免将来出现类似问题）