如何将列表值传递给jqplot以获取堆积的条形图 [英] How to pass list values to the jqplot to get the stacked bar chart
本文介绍了如何将列表值传递给jqplot以获取堆积的条形图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试绘制堆积的条形图，但条形柱图未显示.不知道为什么吗? 让我解释一下我在做什么.我已经将值存储在数据库的3列中，然后使用list(collections)我可以使用jsp在我的表上显示它.现在，我已经在同一jsp页面上编写了生成堆叠条形图的代码，但是我无法将其显示为堆叠条形图. 这是我的jsp
I am trying draw a stacked bar chart but bar itsels is not shown. Dont know why?. let me explain what I am doing. I have stored values in 3 columns of the database then using list(collections) i am able to display it on my table using jsp. Now i have written the code to generate stacked bar chart on the same jsp page but i am not able to display it as stacked bar chart. Here is my 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,
这篇关于如何将列表值传递给jqplot以获取堆积的条形图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
