Question

我目前正在尝试在我的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>

查看用户的最终固定实施

Answer 1

是的，你是以错误的方式去做的。您必须调用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，然后我们为逻辑添加scriplets，然后回退到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代码中以初始化数据对象。如果您查看此答案的历史记录，您可以看到我更改了哪一行。要使用它，请删除新代码中标有concat标题的部分。

从javascript数据对象对象问题填充图表

1 个答案: