我目前正在尝试在我的 JSP 页面上实现 Google Charts 的使用。我正在尝试将 sql 语句的结果返回到 arraylist，我想从中获取 arrayList 的信息并使用它来填充 google 图表。
<%@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>
用户查看的最终修复实现
最佳答案
是的，你的做法是错误的。您必须调用 Java 来获取数组的值，并找到一种方法将其写入网页，以便某些 javascript 可以读取它并传递到 Google Charts。
例如，HTML 可能需要如下所示:
<html>
<head>
<script type="text/javascript">
var theData = {
{"name1",1}, // <-- write this line with JSP below
{"name2",2}, // <-- write this line with JSP below
};
</script>
</head>
网页的其余部分依此类推。
因此，您必须生成一些 JSP 代码来执行此操作，如下所示。我假设您的 Java 正在正确执行 JDBC 操作。请注意，我们有 HTML，然后添加逻辑脚本，然后返回到 HTML，但使用 JSP 表达式在 HTML 部分中输出数据。 (当我说 HTML 时，它确实是一个用词不当，因为它输出 JavaScript，但让我放松了一些......)
<html>
<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, projectname, priority, cores, disk_space FROM project.booking GROUP BY department");
ResultSet rs = ps.executeQuery();
while(rs.next())
{
['Department', 'Cores'],
%>
[" <%= rs.getString(1) %>", "<%= rs.getString(4)) %>"],
<%
]; // End of JavaScript object holding the data
%>
};
</script>
</head>
这样做可以让你获得一个保存数据的 JavaScript 对象。无论您需要什么数据，您都需要安排该对象的内容。有关如何执行此操作的更多信息，请参见此处 https://developers.google.com/chart/interactive/docs/datatables_dataviews
阅读底部部分，其中有几个格式化为显示的 JavaScript 对象示例以及正确调用 Google 图表的 JavaScript 代码。
编辑
我在上面的代码中添加了标题，这样您就不必将它们连接到位。将它们放入 JavaScript 代码中以首先初始化数据对象。如果您查看此答案的历史记录，您可以看到我更改了哪一行。要使用它，请删除新代码中将标题连接到前面的部分。
关于javascript - 从 javascript 数据对象填充图表问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15819228/