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

最新推荐文章于 2017-07-16 09:47:36 发布

格罗姆高

最新推荐文章于 2017-07-16 09:47:36 发布

阅读量1k

点赞数

分类专栏： jsp 文章标签： jsp 前台

jsp 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个使用Highcharts库绘制DICE系统用户数量曲线图的方法。通过Ajax调用后台获取数据并展示在前端界面上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


$(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.youkuaiyun.com/classicbear