2012-05-22 149 views
0

我试图从一个MySQL数据库使用.jsp接收数据,将该数据放入一个数组,然后将该数组发送到JavaScript并使用该数组填充图形通过d3.js。我已经做了一些关于如何做.jsp部分的研究,但对我来说并没有什么意义。我发现很少,如果有的话,也从Java到JavaScript。这是我目前有:使用MYSQL和JSP填充Javascript数组

<%@ page language="java" import="java.sql.*"%> 

<html> 
    <head> 
     <title>D3 Test</title> 
     <script type="text/javascript" src="d3/d3.v2.js"></script> 
      <style type="text/css"> 
     </style> 
    </head> 
    <body> 

    <% 

    Connection con=null; 
    ResultSet rst=null; 
    Statement stmt=null; 

    try{ 
     String url="jdbc:mysql://localhost:3306/usermaster? user=root&password=7rubA5Ra"; 

     int i=1; 
     con=DriverManager.getConnection(url); 
stmt=con.createStatement(); 
rst=stmt.executeQuery("select * from test "); 

%> 
    <script type="text/javascript"> 

     var dataset = [ 7, 12, 15, 21, 23, 27, 24, 20, 17, 15, 
      12, 14, 17, 22, 20, 19, 18, 20, 25, 27 ]; 
     var w = 500; 
     var h = 100; 
     var barPadding = 1; 
     var svg = d3.select("body") 
        .append("svg") 
        .attr("width", w) 
        .attr("height", h); 
     svg.selectAll("rect") 
      .data(dataset) 
      .enter() 
      .append("rect") 
      .attr("id", "rect1") 
      .attr("x", function(d, i) { 
        return i * (w/dataset.length); 
       }) 
      .attr("y", function(d) { 
       return h - d*4; 
      }) 
      .attr("width", w/ dataset.length - barPadding) 
      .attr("height", function(d) { 
       return d * 4; 
      }) 
      .attr("fill", function(d) { 
       return "rgb(0, 0, " + (d * 10) + ")"; 
      }); 

     /*svg.selectAll("rect") 
      .data(dataset2) 
      .enter() 
      .append("rect") 
      .attr("id", "rect2") 
      .attr("x", function(d, i) { 
        return i * (w/dataset2.length); 
      }) 
      .attr("y", function(d) { 
       return h - d*4; 
      }) 
      .attr("width", w/ dataset2.length - barPadding) 
      .attr("height", function(d) { 
       return d * 4; 
      }) 
      .attr("fill", function(d) { 
       return "rgb(0, 100, " + (d * 10) + ")"; 
      });*/ 

     svg.selectAll("text") 
      .data(dataset) 
      .enter() 
      .append("text") 
      .text(function(d) { 
       return d; 
      }) 
      .attr("x", function(d, i) { 
       return i * (w/dataset.length) + 5; 
      }) 
      .attr("y", function(d) { 
       return h - (d * 4) + 15; 
      }) 
      .attr("font-family", "sans-serif") 
      .attr("font-size", "11px") 
      .attr("fill", "white"); 
    </script> 
</body> 

我真的需要有人给我指出了正确的方向。我希望将来自数据库的信息放入变量数据集中。

感谢, EmptyBox

+1

您是否在多个地方使用此密码? :) – Andreas

+0

@Andreas这是一个随机生成的密码,我用于开发/东西我不需要保持自己 – user1410980

回答

1

添加身边,你想将它嵌入到JavaScript中的JSP标记。

var dataset = [ 
    <% while (rst!=null && rst.next()) { %> 
     <%=rst.getInt("<column name>")%>, 
    <% } %> 
    ]; 
+0

有什么我需要导入使用这些语句?对于这两种语句,我都没有定义ResultSet类型的方法。 – user1410980

+1

对不起,我只是使用ResultSet代码的伪代码。正确的功能是:while(rst!= null && rst.next())和rst.getInt(“<你的列名>”) – bluedevil2k

+0

哦,哈哈!谢谢。我真的很为此苦苦挣扎。我现在应该可以得到它的工作。再次感谢! – user1410980

0

你的情况最好是JSON库。

第一:JSP页面通过的ResultSet从数据库中检索的所有数据。
第二个:将这些保存在JsonArray中,并将该数组发送到另一个页面。

最后:收到JsonArray在JavaScript功能,并使用元素来填充
在页面的任何地方。