0

我在我的 java 类中使用了列表,我成功地从数据库中检索值并将其显示在表中,现在我想在堆积条形图中显示这些列表值,所以我使用了 Json。一旦我运行 java 类,它将在 F 驱动器中创建 file.json,所以现在我如何使用该文件并在 jsp 中显示这些列表值。

这是我的java类。

package com.rashmi.action;

import java.sql.*;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Calendar;
import java.util.List;
import java.io.FileWriter;
import java.io.IOException;
import com.google.gson.Gson;

public class FebruaryAction {

List abc = new ArrayList();


public List getAbc() {
return abc;
}
public void setAbc(List abc) {
this.abc = abc;
}


public String execute() throws Exception {

Connection con = GetCon.getCon();
Statement statement = con.createStatement();
ResultSet resultset = statement.executeQuery("SELECT MarketPlace,OrderDate, ROUND(SUM(Total),2),  COUNT(*) , ROUND(ROUND(SUM(Total),2)/ COUNT(*),2) FROM vend_printed WHERE OrderDate >= '2013-02-01' AND OrderDate <= '2013-02-28' AND MarketPlace= 'AUK' GROUP BY OrderDate,MarketPlace");

while (resultset.next()) {
String marketplace = resultset.getString(1);
String orderdate = resultset.getString(2);
Double datamount = resultset.getDouble(3);
Integer count = resultset.getInt(4);
Double result = resultset.getDouble(5);

ReportClass a = new ReportClass();
a.setMarketplace(marketplace);
a.setOrderdate(orderdate);
a.setDataamount(datamount);
a.setCount(count);
a.setResult(result);
abc.add(a);
String json = new Gson().toJson(abc);
try {

FileWriter writer = new FileWriter("F:\\file.json");
writer.write(json);

writer.close();

} catch (IOException e) {
e.printStackTrace();
}


}

我的jsp页面

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@page import="java.sql.*,javax.*" %>
<%@taglib prefix="s" uri="/struts-tags" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page import="com.rajesh.action.*" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>January</title>
</head>
<body>
<h1>Report for January</h1>

<body>
<table border="1" >
<tr>
<th>Market</th>
<th>Jan-01</th>
<th>Jan-02</th>
<th>Jan-03</th>
<th>Jan-04</th>
<th>Jan-05</th>
<th>Jan-06</th>
<th>Jan-07</th>
<th>Jan-08</th>
<th>Jan-09</th>
<th>Jan-10</th>
<th>Jan-11</th>
<th>Jan-12</th>
<th>Jan-13</th>
<th>Jan-14</th>
<th>Jan-15</th>
<th>Jan-16</th>
<th>Jan-17</th>
<th>Jan-18</th>
<th>Jan-19</th>
<th>Jan-20</th>
<th>Jan-21</th>
<th>Jan-22</th>
<th>Jan-23</th>
<th>Jan-24</th>
<th>Jan-25</th>
<th>Jan-26</th>
<th>Jan-27</th>
<th>Jan-28</th>
<th>Jan-29</th>
<th>Jan-30</th>
<th>Jan-31</th>
</tr>

<tr>
<td rowspan="3">AUK</>
<c:forEach items="${abc}" var="item">
<td>${item.count}</td>
</c:forEach>
</tr>
<tr>
<c:forEach items="${abc}" var="item">
<td>${item.dataamount}</td>
</c:forEach>
</tr>

<tr>
<c:forEach items="${abc}" var="item">
<td>${item.result}</td>
</c:forEach>
</tr>


</table>

<script type="text/javascript" src="plugins/jquery.js"></script>
<script type="text/javascript" src="plugins/jquery.min.js"></script>
<script type="text/javascript" src="plugins/jquery.jqplot.js"></script>
<script type="text/javascript" src="plugins/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="plugins/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="plugins/jqplot.barRenderer.js"></script>
<script type="text/javascript" src="plugins/jqplot.categoryAxisRenderer.min.js">  </script>
<script type="text/javascript" src="plugins/jqplot.pointLabels.min.js"></script>
<script type="text/javascript" src="plugins/jqplot.canvasAxisTickRenderer.js"></script>
<script type="text/javascript" src="plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
<script type="text/javascript" src="plugins/jqplot.canvasOverlay.min.js"></script>
<script type="text/javascript" src="plugins/jqplot.categoryAxisRenderer.js"></script>
<script type="text/javascript" src="plugins/jqplot.pointLabels.js"></script>
<script type="text/javascript" src="plugins/jqplot.highlighter.min.js"></script>
<script type="text/javascript" src="plugins/jqplot.cursor.min.js"></script>
<script type="text/javascript" src="plugins/jqplot.dateAxisRenderer.min.js"></script>
<script type="text/javascript" src="plugins/excanvas.js"></script>
<script type="text/javascript" src="plugins/excanvas.min.js"></script>
<link href="plugins/jquery.jqplot.css"  rel="stylesheet" />
<link href="plugins/jquery.jqplot.min.css"  rel="stylesheet" />
<body>

<span id="info3">Nothing yet.</span>
<div id="chart3" style="height:900px;width:1300px; "></div>
<script type="text/javascript">
$(document).ready(function(){
var s1 = [];
var s2 = [];
var s3 = [];

<c:forEach var="temp" items="${abc}">
s1.push('${item.result}');
</c:forEach>

<c:forEach var="temp" items="${abc}">
s2.push('${item.count}');
</c:forEach>

<c:forEach var="temp" items="${abc}">
s3.push('${item.dataamount}');
</c:forEach>




var axisDates = ["Jan 1", "Jan 2", "Jan 3","Jan 4","Jan 5","Jan 6","Jan 7","Jan  8","Jan 9","Jan 10","Jan 11","Jan 12","Jan 13","Jan 14","Jan 15","Jan 16","Jan 17","Jan  18","Jan 19","Jan 20","Jan 21","Jan 22","Jan 23","Jan 24","Jan 25","Jan 26","Jan  27","Jan28","Jan 29","Jan 30","Jan 31"]


plot3 = $.jqplot('chart3', [s1, s2, s3], {

stackSeries: true,
varyBarColor: true,


captureRightClick: true,

animate : !$.jqplot.use_excanvas,
seriesDefaults : {
renderer:$.jqplot.BarRenderer,
rendererOptions: {
barPadding : 20, 


barMargin : 25, 

barDirection : 'vertical',
barWidth : 30,

shadowOffset : 4,
highlightMouseOver: true   
}, 
pointLabels: {show: true}
},
axes: {xaxis: {
renderer: $.jqplot.CategoryAxisRenderer, ticks: axisDates

},
yaxis: {min:0, max: 2300

}
},

legend: {
show: true,
location: 'e',
placement: 'outside'
}     
});
  // Bind a listener to the "jqplotDataClick" event.  Here, simply change
  // the text of the info3 element to show what series and ponit were
  // clicked along with the data for that point.
$('#chart3').bind('jqplotDataClick',
function (ev, seriesIndex, pointIndex, data) {
$('#info3').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
}
);
});
</script>
</body>
</html>
4

1 回答 1

0

在您的 jsp 中进行 ajax 调用,并在 javascript 中获取 json 响应后,使用 jit 将您的数据呈现为条形图

于 2013-06-19T10:38:18.583 回答