Google 图表 Table 未显示(Servlet 和 JSP)

Google Charts Table not being displayed (Servlet & JSP)

我正在从 MYSQL 数据库提取数据到 beanList 并使用来自 servlet 的请求转发数据。

String test = json.toJson(tableList);
request.setAttribute("tableList",test);
request.getRequestDispatcher("NewFile.jsp").forward(request, response);

& 在我的 JSP 我有以下代码

    <%-- <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>--%>
    <%@page import="com.data.object.MainData"%>
    <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
      pageEncoding="ISO-8859-1"%>
     <html>
     <head>
     <script type="text/javascript" src="https://www.google.com/jsapi">  </script>
<script type="text/javascript">
  google.load("visualization", "1", {packages:["table"]});
google.setOnLoadCallback(drawChart);


  function drawChart() {
    //var jsonData = ${tableList};
     var    data = new google.visualization.DataTable(${tableList});

   var table = new google.visualization.Table(document.getElementById('table_div'));

      table.draw(data, {showRowNumber: true});

  }


</script>

  </head>
  <body>
   <div id="table_div"></div>
   </body>
  </html>

我已经测试并获得了正确的 json 数据,但无法获得 table printed/displayed ...

firebug 中的输出(net -> all)显示

HeadersResponseHTMLCacheCookies

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("visualization", "1", {packages:["table"]});
  google.setOnLoadCallback(drawChart);

function drawChart() {
 //         var jsonData = [
{
     "FormCtrlValId": 107,
     "FormCtrlValLabel": "abcc.",
 "FormCtrlValCode": "90",
 "FormCtrlValCityId": 18,
"FormCtrlValofCtrlId": 1226,
"FormCtrlId": 1226,
"FormCtrlLabel": "Location Code",
"FormCtrlType": "EditText",
"FormCtrlIsFixed": false,
"FormCtrlHasCodes": true,
"FormId": 335,
"CtrlOrderNum": 1,
"RecordDetailId": 1233,
"RecordDetailLongitude": 23,
"RecordDetailLatitude": 2234,
"RecordingTimeStamp": "Jan 15, 2015 4:05:22 AM",
"SubmissionTimeStamp": "Jan 15, 2015 4:05:35 AM",
"ServerTimeStamp": "Jan 15, 2015 9:05:36 AM",
"RecordDetailOfFormId": 2,
"RecordDetailOfCityId": 1,
"RecordDetailByUserId": 1,
"FormDetailId": 2,
"FormDetailName": "some form 123",
"FormLastUpdatedOn": "Jan 23, 2015 1:48:20 PM",
"FormDetailLastUpdatedByUserId": 4,
"FormDetailCreatedByUserId": 4,
"FormSubCat": 4,
"FormArchived": false,
"RecordId": 0,
"ControlId": 26,
"ControlValue": "90",
"RegionCityId": 8,
"RegionCityName": "some city",
"RegionId": 2,
"Location": "some location ",
"Status": "some status"
 },

需要一些帮助。

您的 drawChart 函数中似乎缺少很多必需的代码。看看下面。我删除了很多显示的数据以使示例变小,但我想您会明白的。

<!DOCTYPE html>
<html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type='text/javascript' src="https://www.google.com/jsapi"></script>
    <script type='text/javascript'>

        google.load("visualization", "1", {packages:["table"]});
        google.setOnLoadCallback(drawChart);

        function drawChart() {
            var data = new google.visualization.DataTable();
            data.addColumn('number', 'Value 1');
            data.addColumn('string', 'Value 2');
            data.addColumn('string', 'Value 3');

            //Your data, trimmed for this example.
            data.addRows([
                [107,'abcc.','90']    
             ]);

            var table = new google.visualization.Table(document.getElementById('table_div'));
            table.draw(data, {showRowNumber: true});    
        }
    </script>
    </head>
    <body>
        <div id="table_div"></div>
    </body>
</html>