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

【问题标题】：Populating chart from javascript data object object issue从 javascript 数据对象对象问题填充图表
【发布时间】：2013-03-27 00:01:11
【问题描述】：

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

在body中继续调用graph等

老实说，我觉得我做错了，但我不确定如何在我的 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>

供用户查看的最终固定实现

【问题讨论】：

标签： javascript jsp arraylist google-visualization

【解决方案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，然后我们为逻辑添加脚本，然后返回到 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 标题的部分到前面。

【讨论】：

感谢您的快速响应，在我将所有内容放在哪里时有点迷失，我使用上面的jsp代码从数据库中提取数据然后命名每个字符串，然后当我添加数据时到谷歌图表 arrayToDataTable([name1, name 2]) 还是我又完全关闭了
对此添加了一些注释。你需要让它适应你正在制作的任何类型的图表。
感谢 Lee，我想我已将其更改为您建议的方式，但我在填充 google 图表时仍然遇到了一个小问题，用当前实施编辑了原始问题