Google Charts Table未显示(Servlet和JSP)

时间:2015-04-14 13:38:07

标签: jsp servlets google-visualization

我正在从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数据,但无法打印/显示表格......

firebug中的输出(net - &gt; 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"
 },

请寻求帮助。

1 个答案:

答案 0 :(得分:1)

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