个人中心
gpt4 book ai didi

java - 如何将列表值传递给jqplot以获取堆积条形图

转载 作者：行者123 更新时间：2023-12-01 14:27:19 26 4
gpt4 key购买 nike

我正在尝试绘制堆积条形图，但条形图未显示。不知道为什么？让我解释一下我在做什么。我已将值存储在数据库的 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/

26 4 0
文章推荐： java - $nearSphere 查询给出结果 java 但如何计算每个结果的距离？
文章推荐： Javassist 编译导致损坏的类文件
文章推荐： java - 两个类来扩展一项 Activity ？
文章推荐： java - 为什么我的 liberty 配置会导致未知对象名称错误？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com