amchart在struts2中的应用

查看选中的软件的下载量，通过amchart报表工具显示出软件日下载量，月下载量以及年下载量，下面简单介绍，amchart在struts2中的应用。

amCharts提供JavaScript/HTML5图表。一套包括串行（列，栏，线，区，步线，平滑线，烛台，OHLC图），馅饼/甜甜圈，雷达/极性和XY /分散/气泡图。amCharts的图表提供了无与伦比的功能和性能，在一个高级的，符合标准的包里。

一、下载amchart

        点击进入下载页面

        选择你想使用的报表显示形状进行下载，较常用的主要是曲线图和饼图，这里以曲线图为例：Line & Area

 

二、配置struts2

        新建一个Web Project，比如：amchartDemo

        1. JAR包引用

        这里使用的是struts2的最新JAR包：struts-2.2.1.1：

        该版本的struts2需要用到的JAR包有7个，一个都不能少

        可在下面工程中获取：struts-2.2.1.1\apps\struts2-blank\WEB-INF\lib

        commons-fileupload-1.2.1.jar

        commons-io-1.3.2.jar

        freemarker-2.3.16.jar

        javassist-3.7.ga.jar

        ognl-3.0.jar

        struts2-core-2.2.1.1.jar

        xwork-core-2.2.1.1.jar

 

        2. 配置web.xml （WebRoot\WEB-INF\web.xml）

Java代码  

1. <filter>  
2.     <filter-name>struts2</filter-name>  
3.     <filter-class>  
4.         org.apache.struts2.dispatcher.FilterDispatcher  
5.     </filter-class>  
6. </filter>  
7. <filter-mapping>  
8.     <filter-name>struts2</filter-name>  
9.     <url-pattern>/*</url-pattern>  
10. </filter-mapping>  

 

        3. 配置struts.xml

            可从 struts-2.2.1.1\apps\struts2-blank\WEB-INF\src\java\ 获取struts.xml，复制到你自己的项目工程（amchartDemo）的src下 

 

Java代码  

1. <struts>  
2.     <package name="statistic" extends="struts-default">  
3.         <action name="report" class="com.web.action.ReportAction">  
4.             <result name="show-suc">/index.jsp</result>  
5.         </action>  
6.     </package>  
7. </struts>  

 

        4. 编写Action

            根据以上struts.xml的配置，创建ReportAction类，以及需要的Bean：

 

Java代码  

1. package com.web.action;  
2.   
3. import java.util.ArrayList;  
4. import java.util.List;  
5. import java.util.Map;  
6. import java.util.TreeMap;  
7.   
8. import com.model.beans.BaseBean;  
9. import com.opensymphony.xwork2.ActionContext;  
10. import com.opensymphony.xwork2.ActionSupport;  
11.   
12. public class ReportAction extends ActionSupport {  
13.   
14.     public String showDay() throws Exception {  
15.         List<BaseBean> daylist = new ArrayList<BaseBean>();  
16.         /*================数据模拟==================*/  
17.         daylist.add(createBean(1L,"软件A","#FF0000"));  
18.         daylist.add(createBean(2L,"软件B","#FFC0CB"));  
19.         daylist.add(createBean(3L,"软件C","#40E0D0"));  
20.         daylist.add(createBean(4L,"软件D","#9ACD32"));  
21.         daylist.add(createBean(5L,"软件E","#00FF7F"));  
22.         /*=========================================*/  
23.         ActionContext.getContext().getSession().put("chartDataList", daylist);  
24.         return "show-suc";  
25.     }  
26.   
27.     /** 
28.      * 创建模拟数据 
29.      * @author Christy Lan 
30.      * @version 1.0 
31.      * @param  
32.      * @return BaseBean 
33.      * @exception 
34.      */  
35.     private BaseBean createBean(Long id, String softName, String color){  
36.         BaseBean bean = new BaseBean();  
37.         bean.setSoftId(id);  
38.         bean.setSoftName(softName);  
39.         bean.setColor(color);  
40.         Map<Integer, Integer> dataMap = new TreeMap<Integer, Integer>();  
41.         //一天24小时  
42.         for(int i = 1; i <= 24; i++){  
43.             dataMap.put(i, getRandom());//模拟每小时的下载量  
44.         }  
45.         bean.setDataMap(dataMap);  
46.         return bean;  
47.           
48.     }  
49.       
50.     private Integer getRandom(){  
51.         return (int)(Math.random()*1000);  
52.     }  
53. }  

        该bean与数据库的表结构无关，而是对数据库中的数据进行了进一步的统计处理（使用oracle的统计函数），封装成这个BaseBean。主要就是对dataMap<时刻, 下载量>的封装

Java代码  

1. package com.model.beans;  
2.   
3. import java.util.Map;  
4.   
5. public class BaseBean {  
6.       
7.     private Long softId;//软件ID  
8.     private String softName;//软件名字  
9.     private String color;//该软件在amchart报表中显示的颜色  
10.     private Map<Integer, Integer> dataMap;//存放统计信息  
11.       
12.     public Long getSoftId() {  
13.         return softId;  
14.     }  
15.     public void setSoftId(Long softId) {  
16.         this.softId = softId;  
17.     }  
18.     public String getSoftName() {  
19.         return softName;  
20.     }  
21.     public void setSoftName(String softName) {  
22.         this.softName = softName;  
23.     }  
24.     public String getColor() {  
25.         return color;  
26.     }  
27.     public void setColor(String color) {  
28.         this.color = color;  
29.     }  
30.     public Map<Integer, Integer> getDataMap() {  
31.         return dataMap;  
32.     }  
33.     public void setDataMap(Map<Integer, Integer> dataMap) {  
34.         this.dataMap = dataMap;  
35.     }  
36. }  

  

 

三、使用amchart

       1. 在WebRoot下新建一个目录 WebRoot/statistic/line

 

       2. 解压amline_1.6.4.1.zip

           a) 将 amline_1.6.4.1\amline 目录下的swfobject.js复制到statistic目录下（注：swfobject.js放于哪无所谓，关键是页面上的引用）

           b) 将 amline_1.6.4.1\amline 目录下的amline.swf 复制到statistic/line目录下

           c) 将 amline_1.6.4.1\amline 目录下的amline_settings.xml 复制到statistic/line目录下，同时，把amline_settings.xml改名为day_settings.jsp

 

        3. 修改day_settings.jsp

           a) 在day_settings.jsp的最开始处增加如下代码：

 

Java代码  

1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
2. <%@ taglib prefix="s" uri="/struts-tags" %>  

           b) 将<digits_after_decimal>2</digits_after_decimal> 改为

                  <digits_after_decimal>0</digits_after_decimal> 

                  这里的数值表示小数点后的位数

 

           c) 将<graphs></graphs>标签里的内容删除，替换成：

 

Java代码  

1. <graphs>                                                      
2.   <s:iterator value="#session.chartDataList" status="st">  
3.   <graph gid="<s:property value="#st.index"/>">  
4.     <title><s:property value="softName"/></title>  
5.     <line_width>2</line_width>  
6.         <color><s:property value="color"/></color>  
7.         <color_hover><s:property value="color"/></color_hover>  
8.         <bullet>round_outlined</bullet>  
9.         <balloon_text_color>000000</balloon_text_color>     
10.         <balloon_text>  
11.         <![CDATA[{title} on {series}: 【{value}次】]]>  
12.         </balloon_text>  
13.         <selected>true</selected>  
14.   </graph>  
15.   </s:iterator>  
16. </graphs>   

        4. 在statistic/line目录下新建day_data.jsp

 

Java代码  

1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
2. <%@ taglib prefix="s" uri="/struts-tags" %>  
3. <?xml version="1.0" encoding="UTF-8"?>     
4. <chart>  
5.     <series>  
6.         <s:iterator value="#session.chartDataList" status="st">  
7.         <s:if test="#st.index==0">  
8.             <s:iterator value="dataMap">  
9.                 <value xid="<s:property value="key"/>"><s:property value="key"/>时</value>  
10.             </s:iterator>  
11.         </s:if>  
12.         </s:iterator>  
13.     </series>  
14.     <graphs>  
15.         <s:iterator value="#session.chartDataList" status="st">  
16.         <graph gid="<s:property value="#st.index"/>">  
17.             <s:iterator value="dataMap">  
18.                 <value xid="<s:property value="key"/>"><s:property value="value"/></value>  
19.             </s:iterator>  
20.         </graph>  
21.         </s:iterator>  
22.     </graphs>  
23. </chart>  

        5. 补充：破解amchart

             在statistic/line目录下新建amcharts_key.txt，内容为

 

             AMCHART-LNKS-1966-6679-1965-1082

        6. WebRoot/index.jsp

            1) 引入JS

Java代码  

1. <script type="text/javascript" src="<%=basePath %>/statistic/swfobject.js"></script>  

            2) amchart使用

Java代码  

1.  <body>  
2.    <div id="flashcontent">  
3.     <strong>You need to upgrade your Flash Player</strong>  
4. </div>  
5.   
6. <script type="text/javascript">  
7.     // <![CDATA[       
8.     var so = new SWFObject("statistic/line/amline.swf", "amline", "900", "600", "8", "#FFFFFF");  
9.     so.addVariable("path", "statistic/line/");  
10.     so.addVariable("settings_file", encodeURIComponent("statistic/line/day_settings.jsp?<%=Math.random()%>"));  
11.     so.addVariable("data_file", encodeURIComponent("statistic/line/day_data.jsp"));  
12.     so.write("flashcontent");  
13.     // ]]>  
14. </script>  
15.  </body>  

四、完成

       访问 http://localhost/amchartDemo/report!showDay.action  即可看到效果