JAVA如何根据jsp页面时间(开始到结束时间)和checkbox选择不同的多少出现不同的曲线

最新推荐文章于 2021-05-22 21:53:25 发布

夏~

最新推荐文章于 2021-05-22 21:53:25 发布

阅读量1.1k

点赞数 1

分类专栏： fusioncharts 文章标签： fusioncharts

本文链接：https://blog.csdn.net/asfg5369/article/details/70860106

版权

fusioncharts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.先放图

2.时间插件使用的是My97DatePicker,非常好用,网上一搜就好多,不多介绍.

3.图表使用的是fusioncharts的多曲线,还有柱状图,饼状图什么的.

4.上代码

jsp页面:

<!-- 横向对比 -->
				<div role="tabpanel" class="tab_css" id="tabContent6" hidden="true">
					<div class="pull-right form-inline" >

							<!-- 自定义时间 -->
							<span id="dingyiTime" hidden="true" > <input id="sdate"
								class="Wdate" placeholder="开始时间"
								οnfοcus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',readOnly:false,maxDate:'#F{$dp.$D(\'edate\')}'})" />
								 ~~  <input id="edate" class="Wdate"
								placeholder="结束时间"
								οnfοcus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',readOnly:false,minDate:'#F{$dp.$D(\'sdate\')}',startDate:'#F{$dp.$D(\'sdate\',{d:+1})}'})" />
								 </span>
								  <!-- 显示要显示的select与按钮 -->
								<div id="list_select">
									<input type="checkbox" value="soc" >soc
									<input
										type="checkbox" value="soh" >soh
										<input type="checkbox"
										value="maxdianya" >最大电压
										<input type="checkbox" value="mindianya">
									         最小电压
									   <input type="checkbox" value="kechongdianliu">可充电流
									   <input
										type="checkbox" value="kefangdianliang" >可放电量 
										<input type="button"
										value="全选" class="btn" id="selectAll"> <input
										type="button" value="全不选" class="btn" id="unSelect"> <input
										type="button" value="反选" class="btn" id="reverse">
							<!--  -->

						<button type="button" class="btn btn-default " id="zidingyi"
							οnclick="onzidingyi()">自定义</button>
						<button type="button" class="btn btn-primary input-sm"
							title="默认查询电池堆" id="lookDuiBi" οnclick="ontime();">查看</button>
							</div>
					</div>
					<div id="HorizontalContrast" align="center" hidden="true"></div>
					<!-- 电池堆按时间从数据库查询 -->
					<div id="StackFromTime" align="center" hidden="true"></div>
				</div>
				<!-- 报告 -->
				<div role="tabpanel" class="tab_css" id="tabContent7" hidden="true"></div>
			</div>

这个是时间和checkbox的jsp页面;

js的反选什么的,网上很多的,献丑了:

<script type="text/javascript">
$(function() {
		//全选  
		$("#selectAll").click(function() {
			$("#list_select :checkbox").prop("checked", true);
		});
		//全不选
		$("#unSelect").click(function() {
			$("#list_select :checkbox").prop("checked", false);
		});
		//反选 
		$("#reverse").click(function() {
			$("#list_select :checkbox").each(function() {
				$(this).prop("checked", !$(this).prop("checked"));
			});
			allchk();
		});

		//设置全选复选框
		$("#list_select :checkbox").click(function() {
			allchk();
		});

		//获取选中选项的值
		/* $("#getValue").click(function() {
			var vals = "";
			$("#list_select :checkbox").each(function(i) {
			if($(this).prop("checked")==true){
			vals+=$(this).val()+",";
			}
			});
			alert(vals);
		}); */
	});
</script>

要显示在jsp中的表格位置,用一个div可以了:

<!-- 电池堆按时间从数据库查询 -->
					<div id="StackFromTime" align="center" hidden="true"></div>

默认不显示,点击查询控制js在显示:

重点来了:jqueryajax:

/*向后台提交数据 */
				function ontime() {
					//前后时间
					var sdate = document.getElementById("sdate");
					var edate = document.getElementById("edate");
					var StackFromTimeDom = document
							.getElementById("StackFromTime");

					//获取checkbox选中的值
					var vals = "";
					$("#list_select :checkbox").each(function(i) {
						if ($(this).prop("checked") == true) {
							vals += $(this).val() + ",";
						}
					});
					var url = "/FHMYSQL/tool/time";
					//ajax方法执行  ,传入后台
					function runajax() {
						$.ajax({
							type : "post",
							url : url,
							data : {
								qian : sdate.value,//前时间
								hou : edate.value,//后时间
								val : vals//checkbox(可以看成数组)
							},
							cache : false,
							dataType : "text",
							error : function() {//请求失败处理函数  
								alert('请求失败');
							},
							success : function(data) {
								var StackFromTimer = new FusionCharts(
										"../static/swf/MSLine.swf",
										"StackFromTimeToTime", "1000", "500");
								StackFromTimer.setDataXML(data);
								StackFromTimer.render("StackFromTime");
								StackFromTimeDom.style.display = "block";
							}
						})
					}
					runajax();

				};

注意:

StackFromTimer.setDataXML(data);

不能为StackFromTimer.setDataURL(data);
StackFromTimer.render("StackFromTime");放在div的id中
StackFromTimeDom.style.display = "block";显示表格







重点来了;传到后台:

/**
	 * ajax的请求time的时间
	 */
	@RequestMapping(value = "/time")
	@ResponseBody
	public void doGetPrivilegeTree11(HttpServletResponse response,
			HttpServletRequest request) throws Exception {
		response.setContentType("text/html;charset=utf-8");
		// 获取前端页面穿过来的前后2个时间
		String qian = request.getParameter("qian");
		String hou = request.getParameter("hou");
		//获取用户传过来的select,根据select设置用户的显示数据
		/*soc,soh,dianya,dianliu,kechongdianliu,kefangdianliang,*/
		String val=request.getParameter("val");
		//去掉val最后一位的逗号
		val=val.substring(0, val.length()-1);
		String []dataval=val.split(",");
		 List<String> tempList = Arrays.asList(dataval);
		 
		// 将传过来的时间类型由String转Date
		SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
		Date dateQian = sdf.parse(qian);
		Date dateHou = sdf.parse(hou);
		// 向数据库查询数据
		List<TBankData> findAllByManyParater = mergeBankStackService
				.findAllByManyParater(dateQian, dateHou, 1);
		PrintWriter pw = response.getWriter();
		// 写入数据
		pw.print("<?xml version=\"1.0\" encoding=\"GB2312\"?>");
		pw.print("<chart caption='电池堆表' xAxisName='时间' yAxisName='值' showValues='0' rotateNames='1' labelStep='20' labelDisplay='Rotate' slantLabels='1'> ");
		// 填数据啦
		pw.print("<categories>");
		for (TBankData tBankData : findAllByManyParater) {
			pw.print("<category label='" + sdf.format(tBankData.getDatetime())
					+ "'/>");
		}
		pw.print("</categories>");
		//用户soc
		if (tempList.contains("soc")) {
			pw.print("<dataset seriesName='soc'>");
			for (TBankData tBankData : findAllByManyParater) {
				pw.print("<set value='" + tBankData.getBanksoc() + "'/>");
			}
			pw.print("</dataset>");
		}
		//用户soh
		if (tempList.contains("soh")) {
			pw.print("<dataset seriesName='soh'>");
			for (TBankData tBankData : findAllByManyParater) {
				pw.print("<set value='" + tBankData.getBanksoh() + "'/>");
			}
			pw.print("</dataset>");
		}
		
		//最大电压
		if (tempList.contains("maxdianya")) {
			pw.print("<dataset seriesName='最大总电压'>");
			for (TBankData tBankData : findAllByManyParater) {
				pw.print("<set value='" + tBankData.getSglmaxvol()+ "'/>");
			}
			pw.print("</dataset>");
		}
		
		//最小电压
		if (tempList.contains("mindianya")) {
			pw.print("<dataset seriesName='最小电压'>");
			for (TBankData tBankData : findAllByManyParater) {
				pw.print("<set value='" + tBankData.getSglminvol()+ "'/>");
			}
			pw.print("</dataset>");
		}
		//充电量累加值
		if (tempList.contains("kechongdianliu")) {
			pw.print("<dataset seriesName='充电量累加值'>");
			for (TBankData tBankData : findAllByManyParater) {
				pw.print("<set value='" + tBankData.getBankchargeeq() + "'/>");
			}
			pw.print("</dataset>");
		}
		//放点量累加值
		if (tempList.contains("kefangdianliang")) {
			pw.print("<dataset seriesName='放点量累加值'>");
			for (TBankData tBankData : findAllByManyParater) {
				pw.print("<set value='" + tBankData.getBankdischargeeq()+ "'/>");
			}
			pw.print("</dataset>");
		}
	
		pw.print("</chart>");
		pw.flush();
	}






注意,必须我这种:tempList.contains("kefangdianliang")包含的,
如果你用数组截取的会出现数组越界或者空指针异常,不能查询出数据,
搞了一天,nice
5.2合一,时间插件和funsioncharts下载地址:  http://download.csdn.net/detail/asfg5369/9827771
6.fusionchatrs新版破解完整版:   http://download.csdn.net/detail/asfg5369/9796064

夏~

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JAVA如何根据jsp页面时间(开始到结束时间)和checkbox选择不同的多少出现不同的曲线

1.先放图2.时间插件使用的是My97DatePicker,非常好用,网上一搜就好多,不多介绍.3.图表使用的是fusioncharts的多曲线,还有柱状图,饼状图什么的.4.上代码 jsp页面: <input id="sdate" class="Wdate" place
复制链接

扫一扫