折线图+(饼图、柱状图）

最新推荐文章于 2024-04-01 18:31:27 发布

待良人

最新推荐文章于 2024-04-01 18:31:27 发布

阅读量913

点赞数

分类专栏：部分项目记录

本文链接：https://blog.csdn.net/qq_38114519/article/details/75235157

版权

该博客介绍了如何遍历数据格式并利用AJAX进行页面跳转传参，主要内容包括在前台JSP中展示数据以及柱状图和饼图的JS实现方法，特别适用于数据可视化在datagrid表格中的应用。

摘要由CSDN通过智能技术生成

遍历数据格式

$.each(ajDataNew, function(key, val) {
			    yset.push( val.thickmin);
			    name = val.station;
			    xset.push([val.inspectingdate +'/'+val.inspectingunit]) ;//为x轴数组赋值
			    growth += val.thickmin + ",";
			    data.push({
                x: xset,
                y: yset
              });
			});

通过ajax跳转页面传参

String idd=request.getParameter("date");
String ids=request.getParameter("station");

前台jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">	

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <script src="${ctx}/js/jquery-2.0.2.min.js" type="text/javascript"></script>
   <script src=" ${ctx}/js/highcharts.js"></script>
   <script src=" ${ctx}/js/Highcharts-3.0.2/modules/data.js"></script>
   <script>

</script>
	<script type="text/javascript">
	<%
	String idd=request.getParameter("date");
	String ids=request.getParameter("station");
	%>
	document.title='001';
	var chart;  
    var name=null;
	var ajDataNew=null;
	
$(function () {
		//统计图树
		
	   $.post('/pipe/tbYbPipethick/tbYbPipethickAction!photos?pipeno=<%=idd%>'+'&station=<%=ids%>', function (data) {
		ajDataNew = $.parseJSON(data);//data json格式
		console.log("newJsp data:"+ajDataNew);//[object Object]格式
		lo();
		});
    });
    
    function lo(){
    var x

最低0.47元/天解锁文章

待良人

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
折线图+(饼图、柱状图）

遍历数据格式$.each(ajDataNew, function(key, val) { yset.push( val.thickmin); name = val.station; xset.push([val.inspectingdate +'/'+val.inspectingunit]) ;//为x轴数组赋值 growth += va
复制链接

扫一扫

专栏目录