amcharts和java整合

時間  2019-12-14
標籤 amcharts java 整合 欄目 Java 简体版
原文   原文鏈接

經過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）

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. }  

  

 

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的最開始處增長以下代碼：

 

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>  
4、完成
       訪問 http://localhost/amchartDemo/report!showDay.action  便可看到效果
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程