您的位置:首页 > 编程语言 > Java开发

js文件从Struts2 Action中获取数据全过程

2014-02-10 10:08 267 查看
$(document).ready(function(){
linechart("performance/accountinfos", "datatest");
});

/*
* 曲线图
* 参数:action:调用的action函数
* 		 div:曲线图插入的页面
* 	 	 title:曲线图的名称
* 		 ytitle:曲线图y轴的名称
*       dat: 传入数据
*/
function linechart(action,div ) {
$.post(action, function(dat ){
chart = new Highcharts.Chart({
chart: {
renderTo: div,
defaultSeriesType: 'line',
width: 700,
height: 350,
margin:[50, 30, 70, 30]
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -300,
y: 300,
},
credits : {
enabled:false
},
title: {
text: 'DICE系统用户数量曲线图 ',
style: {
margin: '10px 100px 0 0' // center it
}
},
xAxis: {
categories:dat.times ,
labels:{
step:3,
align:'right'
}
},
yAxis: {
title: {
text: ''
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y ;
}
},
series: [{
name: "用户数量 ",
data: dat.nums
}]
});
})
};
 

对应的Javascript文件源码

$(document).ready(function(){
linechart("performance/accountinfos", "datatest");
});

/*
* 曲线图
* 参数:action:调用的action函数
* div:曲线图插入的页面
* title:曲线图的名称
* ytitle:曲线图y轴的名称
* dat: 传入数据
*/
function linechart(action,div ) {
$.post(action, function(dat ){
chart = new Highcharts.Chart({
chart: {
renderTo: div,
defaultSeriesType: 'line',
width: 700,
height: 350,
margin:[50, 30, 70, 30]
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -300,
y: 300,
},
credits : {
enabled:false
},
title: {
text: 'DICE系统用户数量曲线图 ',
style: {
margin: '10px 100px 0 0' // center it
}
},
xAxis: {
categories:dat.times ,
labels:{
step:3,
align:'right'
}
},
yAxis: {
title: {
text: ''
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y ;
}
},
series: [{
name: "用户数量 ",
data: dat.nums
}]
});
})
};
对应的JSP文件源码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@page import="com.opensymphony.xwork2.ActionContext"%>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" import="java.util.*"%>
<%@ taglib prefix="s" uri="/struts-tags"%>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="<%= request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() %>/" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>性能管理--DICE系统</title>
<s:include value="/_head.jsp" />
<link type="text/css" href="css/tab/style.css" rel="stylesheet"  />
<script src="js/jquery/jquery.js" type="text/javascript"></script>
<script src="js/Highcharts/js/highcharts.js" type="text/javascript"></script>
<script src="js/performance/systemaccount.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<s:include value="/_banner.jsp?index=3" />

<div id="inner">
<s:include value="/config/_left.jsp" />
<div class="right">
<div class="divline">
性能管理
</div><!--divline-->
<div id="datatest">
</div>

</div><!--right-->

</div><!--#inner-->

<s:include value="/_footer.jsp" />

<script type="text/javascript">
$(document).ready(function(){
selected('#item1');
});
</script>

</div><!--#container-->
</body>
</html>


转自:http://blog.csdn.net/classicbear
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  jsp 前台