0

我已经将值存储在数据库的 3 列中，然后使用 list(collections) 我可以使用 jsp 在我的表上显示它。现在我已经编写了代码以在同一个 jsp 页面上生成堆积条形图，但我无法将其显示为堆积条形图。这是我的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>Jan-08</>
<th>Jan-09</>
<th>Jan-10</>
<th>Jan-11</>
<th>Jan-12</>
<th>Jan-13</>
<th>Jan-14</>
<th>Jan-15</>
<th>Jan-16</>
<th>Jan-17</>
<th>Jan-18</>
<th>Jan-19</>
<th>Jan-20</>
<th>Jan-21</>
<th>Jan-22</>
<th>Jan-23</>
<th>Jan-24</>
<th>Jan-25</>
<th>Jan-26</>
<th>Jan-27</>
<th>Jan-28</>
<th>Jan-29</>
<th>Jan-30</>
<th>Jan-31</>
</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>

<tr>
<td rowspan="3">AUS</td>
<c:forEach items="${abc1}" var="item1">
<td>${item1.count}</td>
</c:forEach>
</tr>

<tr>
<c:forEach items="${abc1}" var="item1">
<td>${item1.dataamount}</td>
</c:forEach>
</tr>

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

<tr>
<td rowspan="3">ADE</td>
<c:forEach items="${abc2}" var="item2">
<td>${item2.count}</td>
</c:forEach>
</tr>
<tr>
<c:forEach items="${abc2}" var="item2">
<td>${item2.dataamount}</td>
</c:forEach>
</tr>

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

<tr>
<td rowspan="3">Ebay</td>
<c:forEach items="${abc3}" var="item3">
<td>${item3.count}</td>
</c:forEach>
</tr>


<tr>
<c:forEach items="${abc3}" var="item3">
<td>${item3.dataamount}</td>
</c:forEach>
</tr>

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

<tr>
<td rowspan="3">Play</td>
<c:forEach items="${abc4}" var="item4">
<td>${item4.count}</td>
</c:forEach>
</tr>

<tr>
<c:forEach items="${abc4}" var="item4">
<td>${item4.dataamount}</td>
</c:forEach>
</tr>

<tr>
<c:forEach items="${abc4}" var="item4">
<td>${item4.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

0 回答 0