如何将列表值传递给jqplot以获得堆叠条形图
How to pass list values to the jqplot to get the stacked bar chart
我正在尝试绘制堆叠条形图，但条形图本身没有显示。不知道为什么?让我解释一下我在做什么。我在数据库的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,
相关文章：
- 用chart.js绘制条形图
- d3.js用按钮更新条形图工具提示
- 添加新数据时D3.JS条形图列偏移量
- Chart.js条形图:网格颜色和隐藏标签
- 在条形图中呈现数据AngularJS，如何制作一个好的多条形图
- 如何创建一个可以调用的函数，以使用JQplot显示多个条形图
- jqplot replot不适用于条形图
- 如何在jsp中单击按钮时将代码添加到jqPlot条形图另存为图像
- 如何使用 javascript 突出显示 jqplot 条形图
- JQplot-只有两个事实的堆叠水平条形图
- Jqplot图形中最后一个条形图的情况
- JQPlot渲染垂直堆叠条形图和水平图例时出现问题
- 如何在JQPlot条形图中绘制十进制值
- 如何将列表值传递给jqplot以获得堆叠条形图
- 当xaxis为文本时，如何显示jqplot堆叠条形图?
- JQPLOT条形图范围
- jqPlot水平条形图点标签挑战
- jqplot条形图未显示数据
- jqPlot条形图在Chrome和Mozilla中不显示
- Jqplot不显示条形图
