查看選中的軟件的下載量,經過amchart報表工具顯示出軟件日下載量,月下載量以及年下載量,下面簡單介紹,amchart在struts2中的應用。javascript
amCharts提供JavaScript/HTML5圖表。一套包括串行(列,欄,線,區,步線,平滑線,燭臺,OHLC圖),餡餅/甜甜圈,雷達/極性和XY /分散/氣泡圖。amCharts的圖表提供了無與倫比的功能和性能,在一個高級的,符合標準的包裏。
html
1、下載amchartjava
點擊進入下載頁面git
選擇你想使用的報表顯示形狀進行下載,較經常使用的主要是曲線圖和餅圖,這裏以曲線圖爲例:Line & Areaweb
2、配置struts2數據庫
新建一個Web Project,好比:amchartDemoapache
1. JAR包引用session
這裏使用的是struts2的最新JAR包:struts-2.2.1.1:oracle
該版本的struts2須要用到的JAR包有7個,一個都不能少app
可在下面工程中獲取: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)
- <filter>
- <filter-name>struts2</filter-name>
- <filter-class>
- org.apache.struts2.dispatcher.FilterDispatcher
- </filter-class>
- </filter>
- <filter-mapping>
- <filter-name>struts2</filter-name>
- <url-pattern>/*</url-pattern>
- </filter-mapping>
3. 配置struts.xml
可從 struts-2.2.1.1\apps\struts2-blank\WEB-INF\src\java\ 獲取struts.xml,複製到你本身的項目工程(amchartDemo)的src下
- <struts>
- <package name="statistic" extends="struts-default">
- <action name="report" class="com.web.action.ReportAction">
- <result name="show-suc">/index.jsp</result>
- </action>
- </package>
- </struts>
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<BaseBean> daylist = new ArrayList<BaseBean>();
- /*================數據模擬==================*/
- 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<Integer, Integer> dataMap = new TreeMap<Integer, Integer>();
- //一天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<Integer, Integer> 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<Integer, Integer> getDataMap() {
- return dataMap;
- }
- public void setDataMap(Map<Integer, Integer> dataMap) {
- this.dataMap = dataMap;
- }
- }
3、使用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) 將<digits_after_decimal>2</digits_after_decimal> 改成
<digits_after_decimal>0</digits_after_decimal>
這裏的數值表示小數點後的位數
c) 將<graphs></graphs>標籤裏的內容刪除,替換成:
- <graphs>
- <s:iterator value="#session.chartDataList" status="st">
- <graph gid="<s:property value="#st.index"/>">
- <title><s:property value="softName"/></title>
- <line_width>2</line_width>
- <color><s:property value="color"/></color>
- <color_hover><s:property value="color"/></color_hover>
- <bullet>round_outlined</bullet>
- <balloon_text_color>000000</balloon_text_color>
- <balloon_text>
- <![CDATA[{title} on {series}: 【{value}次】]]>
- </balloon_text>
- <selected>true</selected>
- </graph>
- </s:iterator>
- </graphs>
4. 在statistic/line目錄下新建day_data.jsp
- <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
- <%@ taglib prefix="s" uri="/struts-tags" %>
- <?xml version="1.0" encoding="UTF-8"?>
- <chart>
- <series>
- <s:iterator value="#session.chartDataList" status="st">
- <s:if test="#st.index==0">
- <s:iterator value="dataMap">
- <value xid="<s:property value="key"/>"><s:property value="key"/>時</value>
- </s:iterator>
- </s:if>
- </s:iterator>
- </series>
- <graphs>
- <s:iterator value="#session.chartDataList" status="st">
- <graph gid="<s:property value="#st.index"/>">
- <s:iterator value="dataMap">
- <value xid="<s:property value="key"/>"><s:property value="value"/></value>
- </s:iterator>
- </graph>
- </s:iterator>
- </graphs>
- </chart>
5. 補充:破解amchart
在statistic/line目錄下新建amcharts_key.txt,內容爲
AMCHART-LNKS-1966-6679-1965-1082
6. WebRoot/index.jsp
1) 引入JS
- <script type="text/javascript" src="<%=basePath %>/statistic/swfobject.js"></script>
2) amchart使用
- <body>
- <div id="flashcontent">
- <strong>You need to upgrade your Flash Player</strong>
- </div>
-
- <script type="text/javascript">
- // <![CDATA[
- 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");
- // ]]>
- </script>
- </body>
4、完成
訪問
http://localhost/amchartDemo/report!showDay.action 便可看到效果