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

我目前正试图在我的JSP页面上实现Google Charts的使用。我试图将sql语句的结果返回给ArrayList，我想从arrayList中获取信息并使用它填充谷歌图表。从javascript数据对象对象填充图表问题

<%@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>

最终实现固定用户观看

来源

2013-04-04 Curious_Bop

是的，你要去了解它的错误的方式。您必须调用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对象示例，其中包含JavaScript代码以正确调用Google图表。

编辑

我在标题中加入上面的代码，这样你就不必Concat的他们在的地方。将它们放入JavaScript代码中，首先初始化数据对象。如果你看这个答案的历史，你可以看到我改变了什么路线。要使用它，请将您的新代码中的零件删除，并将标题放在正面。

来源

2013-04-04 19:04:51

Thankyou对于非常快速的响应，稍微丢失了我放置所有内容的位置，我使用上面的jsp代码从数据库中提取数据，然后命名每个字符串，然后当我将数据添加到google图表arrayToDataTable（[name1，name 2]）还是我完全关闭 – 2013-04-04 19:41:59

添加了一些笔记。你需要适应你正在制作的任何一种图表。 – 2013-04-04 19:49:55

感谢您的李，我认为我已经改变了你的建议，但我仍然有一个小的问题，填充谷歌图表，编辑原来的问题与当前实施 – 2013-04-05 09:41:42

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

回答

相关问题