我目前正在尝试在我的 JSP 页面上使用 Google Charts。我正在尝试将 sql 语句的结果返回到 arraylist,我想从中获取来自 arrayList 的信息并使用它来填充谷歌图表。
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.Connection"%>
<%@page import="java.sql.SQLException"%>
<%@page import="java.util.ArrayList"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%!public static String[] getLiveData() throws SQLException, ClassNotFoundException{
ArrayList<String> a = new ArrayList<String>();
Class.forName("com.mysql.jdbc.Driver");
Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/project","root", "nbuser");
PreparedStatement ps = con.prepareStatement("SELECT department, projectname, priority, cores, disk_space FROM project.booking GROUP BY department");
ResultSet rs = ps.executeQuery();
while(rs.next())
{
a.add(rs.getString(1));
a.add(rs.getString(4));
}
return (String[]) a.toArray(new String[a.size()]);
}%>
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([ISSUE TO RETURN HERE]);
var options = {
title: 'Company Performance'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
继续在正文中调用图形等
老实说,我觉得我走错了路,但我不确定如何在我的 jsp 页面上获取数组中的数据并将其返回以创建图表。
我对java不是很好,所以如果这种方法完全关闭,我很抱歉,任何帮助都将不胜感激。
编辑
<head>
<script type="text/javascript">
var theData = [ // Start of JavaScript data object
<%
Class.forName("com.mysql.jdbc.Driver");
Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/project", "root", "nbuser");
PreparedStatement ps = con.prepareStatement("SELECT department,SUM(cores) FROM project.booking GROUP BY department;");
ResultSet rs = ps.executeQuery();
while (rs.next()) {
%>
[" <%= rs.getString(1)%>",<%= rs.getInt(2)%>],
<%
};
// End of JavaScript object holding the data
%>
];
</script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([['Department', 'Cores']].concat(theData), false);
var options = {
title: 'Initial graph test'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
<a href="/ProjectAndBackend/System?action=livecharts">Live Charts</a>
</body>
</html>
用户查看的最终固定实现