分享

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

 LibraryPKU 2013-11-18

对应的Action类的源码:

  1. import com.dice.voip.web.oam.base.BaseAction;  
  2. import com.dice.voip.web.oam.dao.SysInfo;  
  3. import com.dice.voip.web.oam.manager.SysInfoManager;  
  4.   
  5. public class SysInfoAccountAction extends BaseAction {  
  6.       
  7.     /** 
  8.      *  
  9.      */  
  10.     private static final long serialVersionUID = -8080982970228144116L;  
  11.   
  12.     private List<String> times;  
  13.     private List<Integer> nums;  
  14.       
  15.     public String execute() throws Exception  
  16.     {  
  17.         setNums(new ArrayList<Integer>());  
  18.         setTimes(new ArrayList<String>());  
  19.           
  20.         SysInfoManager sysInfoManager = new SysInfoManager();  
  21.         List<SysInfo> sysinfos = sysInfoManager.getAccountNumByDay();  
  22.           
  23.         Iterator<SysInfo> it = sysinfos.iterator();  
  24.         while(it.hasNext()){              
  25.             SysInfo sysInfo = it.next();  
  26.             nums.add(sysInfo.getAccountNum());  
  27.             times.add( String.valueOf(sysInfo.getTime().getMonth()) + "-" + String.valueOf(sysInfo.getTime().getDay()));  
  28.         }  
  29.         return SUCCESS;   
  30.     }  
  31.   
  32.     public List<Integer> getNums() {  
  33.         return nums;  
  34.     }  
  35.   
  36.     public void setNums(List<Integer> nums) {  
  37.         this.nums = nums;  
  38.     }  
  39.   
  40.     public List<String> getTimes() {  
  41.         return times;  
  42.     }  
  43.   
  44.     public void setTimes(List<String> times) {  
  45.         this.times = times;  
  46.     }  
  47.  }  

对应的Javascript文件源码
[javascript] view plaincopy
  1. $(document).ready(function(){  
  2.   linechart("performance/accountinfos""datatest");  
  3. });  
  4.    
  5. /* 
  6.  * 曲线图 
  7.  * 参数:action:调用的action函数 
  8.  *       div:曲线图插入的页面 
  9.  *       title:曲线图的名称 
  10.  *       ytitle:曲线图y轴的名称 
  11.  *       dat: 传入数据 
  12.  */  
  13. function linechart(action,div ) {  
  14.      $.post(action, function(dat ){  
  15.          chart = new Highcharts.Chart({  
  16.             chart: {  
  17.                 renderTo: div,  
  18.                 defaultSeriesType: 'line',  
  19.                 width: 700,  
  20.                 height: 350,  
  21.                 margin:[50, 30, 70, 30]  
  22.             },  
  23.             legend: {  
  24.               layout: 'vertical',  
  25.               align: 'right',  
  26.               verticalAlign: 'top',  
  27.               x: -300,  
  28.               y: 300,  
  29.             },  
  30. credits : {  
  31.                 enabled:false  
  32.             },  
  33.             title: {  
  34.                 text: 'DICE系统用户数量曲线图 ',  
  35.                 style: {  
  36.                     margin: '10px 100px 0 0' // center it  
  37.                 }  
  38.             },  
  39.             xAxis: {  
  40.                 categories:dat.times ,  
  41.                 labels:{  
  42.                     step:3,  
  43.                     align:'right'  
  44.                 }  
  45.             },  
  46.             yAxis: {  
  47.                 title: {  
  48.                     text: ''  
  49.                 }  
  50.             },  
  51.             tooltip: {  
  52.                 formatter: function() {  
  53.                         return '<b>'this.series.name +'</b><br/>'+  
  54.                         this.x +': 'this.y ;  
  55.                 }  
  56.             },  
  57.             series: [{  
  58.                 name: "用户数量 ",  
  59.                 data: dat.nums   
  60.             }]     
  61.          });  
  62.      })  
  63. };  

对应的JSP文件源码:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <%@page import="com.opensymphony.xwork2.ActionContext"%>  
  3. <%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" import="java.util.*"%>  
  4. <%@ taglib prefix="s" uri="/struts-tags"%>  
  5.   
  6.   
  7. <html xmlns="http://www./1999/xhtml">  
  8. <head>  
  9.   <base href="<%= request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() %>/" />  
  10.   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
  11.   <title>性能管理--DICE系统</title>  
  12.   <s:include value="/_head.jsp" />   
  13.   <link type="text/css" href="css/tab/style.css" rel="stylesheet"  />   
  14.   <script src="js/jquery/jquery.js" type="text/javascript"></script>  
  15. <script src="js/Highcharts/js/highcharts.js" type="text/javascript"></script>  
  16. <script src="js/performance/systemaccount.js" type="text/javascript"></script>  
  17.  </head>  
  18. <body>  
  19. <div id="container">  
  20. <s:include value="/_banner.jsp?index=3" />  
  21.   
  22. <div id="inner">  
  23. <s:include value="/config/_left.jsp" />  
  24. <div class="right">   
  25. <div class="divline">  
  26. 性能管理  
  27. </div><!--divline-->  
  28. <div id="datatest">  
  29. </div>  
  30.    
  31.   
  32. </div><!--right-->  
  33.   
  34. </div><!--#inner-->  
  35.   
  36.   
  37. <s:include value="/_footer.jsp" />  
  38.   
  39. <script type="text/javascript">  
  40. $(document).ready(function(){  
  41.     selected('#item1');  
  42. });  
  43. </script>  
  44.   
  45. </div><!--#container-->  
  46. </body>  
  47. </html> 

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多