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>
我正在从 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>