struts集成amchart

最近做了一个SSH项目，其中有一个统计模块，查看选中的软件的下载量，通过amchart报表工具显示出软件日下载量，月下载量以及年下载量，下面简单介绍，amchart在struts2中的应用。（关于amchart的介绍，这里不累述，网上很多文章都有说明）

 

一、下载amchart

        http://www.amcharts.com/download

        选择你想使用的报表显示形状进行下载，较常用的主要是曲线图和饼图，这里以曲线图为例：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）

    struts2
    class>
        org.apache.struts2.dispatcher.FilterDispatcher
    class>


    struts2
    /*

 

        3. 配置struts.xml

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

 

    <package name="statistic" extends="struts-default">
        "report" class="com.web.action.ReportAction">
            "show-suc">/index.jsp

    package>

 

        4. 编写Action

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

 

package com.web.action;

import java.util.ArrayList;
import java.util.List;
import java.util.Map;
import java.util.TreeMap;

import com.model.beans.BaseBean;
import com.opensymphony.xwork2.ActionContext;
import com.opensymphony.xwork2.ActionSupport;

public class ReportAction extends ActionSupport {

    public String showDay() throws Exception {
        List daylist = new ArrayList();
        /*================数据模拟==================*/
        daylist.add(createBean(1L,"软件A","#FF0000"));
        daylist.add(createBean(2L,"软件B","#FFC0CB"));
        daylist.add(createBean(3L,"软件C","#40E0D0"));
        daylist.add(createBean(4L,"软件D","#9ACD32"));
        daylist.add(createBean(5L,"软件E","#00FF7F"));
        /*=========================================*/
        ActionContext.getContext().getSession().put("chartDataList", daylist);
        return "show-suc";
    }

    /**
     * 创建模拟数据
     * @author Christy Lan
     * @version 1.0
     * @param
     * @return BaseBean
     * @exception
     */
    private BaseBean createBean(Long id, String softName, String color){
        BaseBean bean = new BaseBean();
        bean.setSoftId(id);
        bean.setSoftName(softName);
        bean.setColor(color);
        Map dataMap = new TreeMap();
        //一天24小时
        for(int i = 1; i <= 24; i++){
            dataMap.put(i, getRandom());//模拟每小时的下载量
        }
        bean.setDataMap(dataMap);
        return bean;

    }

    private Integer getRandom(){
        return (int)(Math.random()*1000);
    }
}

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

package com.model.beans;

import java.util.Map;

public class BaseBean {

    private Long softId;//软件ID
    private String softName;//软件名字
    private String color;//该软件在amchart报表中显示的颜色
    private Map dataMap;//存放统计信息

    public Long getSoftId() {
        return softId;
    }
    public void setSoftId(Long softId) {
        this.softId = softId;
    }
    public String getSoftName() {
        return softName;
    }
    public void setSoftName(String softName) {
        this.softName = softName;
    }
    public String getColor() {
        return color;
    }
    public void setColor(String color) {
        this.color = color;
    }
    public Map getDataMap() {
        return dataMap;
    }
    public void setDataMap(Map dataMap) {
        this.dataMap = dataMap;
    }
}

  

 

三、使用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的最开始处增加如下代码：

 

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

           b) 将2 改为

                  0 

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

 

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

 

  "#session.chartDataList" status="st">
  "#st.index"/>">
    <s:property value=<span class="string">"softName"</span><span>/>
    2
        "color"/>
        "color"/>
        round_outlined
        000000



        true

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

 

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


        "#session.chartDataList" status="st">
        if test="#st.index==0">
            "dataMap">
                "key"/>">"key"/>时

        if>



        "#session.chartDataList" status="st">
        "#st.index"/>">
            "dataMap">
                "key"/>">"value"/>

        5. 补充：破解amchart

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

 

             AMCHART-LNKS-1966-6679-1965-1082

        6. WebRoot/index.jsp

            1) 引入JS

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

            2) amchart使用

   "flashcontent">
    You need to upgrade your Flash Player

  

  

"text/javascript">  

    //   

    var so = new SWFObject("statistic/line/amline.swf", "amline", "900", "600", "8", "#FFFFFF");  

    so.addVariable("path", "statistic/line/");  

    so.addVariable("settings_file", encodeURIComponent("statistic/line/day_settings.jsp?<%=Math.random()%>"));  

    so.addVariable("data_file", encodeURIComponent("statistic/line/day_data.jsp"));  

    so.write("flashcontent");  

    // ]]>  

  

   

四、完成

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