我正在尝试绘制堆积条形图，但条形图未显示。不知道为什么？ 让我解释一下我在做什么。我已将值存储在数据库的 3 列中，然后使用列表(集合)我可以使用 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>
<c:forEach var="temp" items="${abc}">
s1.push('${item.count}');
</c:forEach>
<c:forEach var="temp" items="${abc}">
s2.push('${item.dataamount}');
</c:forEach>
<c:forEach var="temp" items="${abc}">
s3.push('${item.result}');
</c:forEach>
<script type="text/javascript">
$(document).ready(function(){
var s1 = [];
var s2 = [];
var s3 = [];
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>
最佳答案
$(document).ready(function(){
var s1 = [3.42, 3.68, 3.64, 3.76, 3.75, 3.54,4.14,3.95, 3.84, 4.04, 4.29, 4.19,4.09,3.77, 4.82, 4.49, 4.42, 4.85,3.98, 3.97,4.19, 4.12, 4.09, 4.16, 4.38, 4.33, 4.43, 4.03, 4.25, 3.86, 4.16];
var s3 = [1200.48, 1604.94, 1431.20, 1335.72, 1266.45, 1308.25, 1698.32, 1464.18, 1461.53, 1502.08, 1369.72,1316.11, 1260.54, 1535.39, 1925.02, 1890.05, 1658.61, 1560.57,1574.59, 1682.91, 2025.93, 2019, 1645.09, 1801.57, 1812.67, 1818.51, 2130.70, 1803.06, 1926.22, 1630.69, 1570.69];
var s2 = [351, 436, 393, 355,338,370,410,371, 381, 372, 319,314,308,407,399, 421, 375, 322,396,424,483,490, 402, 433, 414,420,481,447,453,422,378];
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,
关于java - 如何将列表值传递给jqplot以获取堆积条形图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17102316/