利用 fusioncharts-suite-xt 完成資料的統計圖顯示
阿新 • • 發佈:2019-02-04
1、匯入fusioncharts-suite-xt的js及其主題的js
<span style="white-space:pre"> </span><script type="text/javascript" src="${basePath}js/fusioncharts/fusioncharts.js"></script> <span style="white-space:pre"> </span><script type="text/javascript" src="${basePath}js/fusioncharts/fusioncharts.charts.js"></script> <span style="white-space:pre"> </span><script type="text/javascript" src="${basePath}js/fusioncharts/themes/fusioncharts.theme.fint.js"></script>
2、以稅務系統中的投訴為例,顯示每個月的投訴數曲線圖,jsp頁面程式碼如下
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; Calendar cal = Calendar.getInstance(); int curYear = cal.get(Calendar.YEAR); request.setAttribute("curYear", curYear); List yearList = new ArrayList(); for(int i = curYear;i>curYear-5;i--){ yearList.add(i); } request.setAttribute("yearList", yearList); %> <!DOCTYPE HTML> <html> <head> <%@include file="/common/header.jsp"%> <script type="text/javascript" src="${basePath}js/fusioncharts/fusioncharts.js"></script> <script type="text/javascript" src="${basePath}js/fusioncharts/fusioncharts.charts.js"></script> <script type="text/javascript" src="${basePath}js/fusioncharts/themes/fusioncharts.theme.fint.js"></script> <script type="text/javascript"> $(document).ready(doAnnualStatistic()); //根據年份顯示統計資料 function doAnnualStatistic(){ //1、獲取年份 var year = $("#year option:selected").val(); if(year == "" || year == undefined){ year = "${curYear}";//預設當前年份 } //2、根據年份統計 $.ajax({ url:"${basePath }nsfw/complain_getAnnualStatisticData.action", data:{"year":year}, type:"post", dataType:"json", success: function(data){ if(data != null && data != "" && data != undefined){ var revenueChart = new FusionCharts({ "type": "line", "renderAt": "chartContainer", "width": "600", "height": "400", "dataFormat": "json", "dataSource": { "chart": { "caption": year + "年度投訴數統計表", "xAxisName": "月 份", "yAxisName": "投 訴 數", "theme": "fint" }, "data":data.chartData } }); revenueChart.render(); }else{ alert("獲取統計投訴數失敗!"); } }, error:function(){alert("獲取統計投訴數失敗!");} }); } </script> <title>年度投訴統計圖</title> </head> <body> <br> <div style="text-align:center;width:100%;"><s:select id="year" list="#request.yearList" onchange="doAnnualStatistic()"></s:select></div> <br> <div id="chartContainer" style="text-align:center;width:100%;"></div> </body> </html>
3、action中主要程式碼
//根據年度獲取該年度下的統計數 public String getAnnualStatisticData(){ //1、獲取年份 HttpServletRequest request = ServletActionContext.getRequest(); int year = 0; if(request.getParameter("year") != null){ year = Integer.valueOf(request.getParameter("year")); }else{ year = Calendar.getInstance().get(Calendar.YEAR); } //2、獲取統計年度的每個月的投訴數 statisticMap = new HashMap<String,Object>(); statisticMap.put("msg", "success"); System.out.println(year); statisticMap.put("chartData", complainService.getAnnualStatisticDataByYear(year)); return "annualStatisticData"; }
4、service的主要程式碼
@Override
public List<Map> getAnnualStatisticDataByYear(int year) {
List<Map> resList = new ArrayList<Map>();
//1、獲取統計資料
List<Object[]> list = complainDao.getAnnualStatisticDataByYear(year);
if(list != null && list.size()>0){
Calendar cal = Calendar.getInstance();
//是否當前年份
boolean isCurYear = (cal.get(Calendar.YEAR) == year);
//當前月份
int curMonth = cal.get(Calendar.MONTH)+1;
//2、格式化統計結果
int temMonth = 0;
Map<String,Object> map = null;
for(Object[] obj : list){
temMonth = Integer.valueOf(obj[0] + "");
map = new HashMap<String,Object>();
map.put("label", temMonth+ " 月");
if(isCurYear){//當前年份
//當前年份;如果月份已過,則直接取投訴數並且值為null時則設為0;如果月份未過,則全部設為空
if(temMonth > curMonth){//未到月份,則投訴數為空
map.put("value", "");
}else{//月份已過
map.put("value", obj[1]==null?"0":obj[1]);
}
}else{//非當前年份,則直接取投訴數並且值為null時則設為0
map.put("value", obj[1]==null?"0":obj[1]);
}
resList.add(map);
}
}
return resList;
}
5、dao中的主要程式碼
@Override
public List<Object[]> getAnnualStatisticDataByYear(int year) {
StringBuffer sb = new StringBuffer();
sb.append("SELECT imonth , COUNT(comp_id)")
.append(" FROM tmonth LEFT JOIN complain ON imonth=MONTH(comp_time)")
.append(" AND YEAR(comp_time)=?")
.append(" GROUP BY imonth")
.append(" ORDER BY imonth");
SQLQuery sqlQuery = getSession().createSQLQuery(sb.toString());
sqlQuery.setParameter(0,year);
return sqlQuery.list();
}
6、因為用的struts框架對json的支援,所以配置檔案如下
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
"http://struts.apache.org/dtds/struts-2.3.dtd">
<struts>
<package name="complain-action" namespace="/nsfw" extends="base-default,json-default">
<action name="complain_*" class="cn.buaa.nsfw.complain.action.ComplainAction"
method="{1}">
<result name="{1}">/WEB-INF/jsp/nsfw/complain/{1}.jsp</result>
<result name="list" type="redirectAction">
<param name="actionName">complain_listUI</param>
<!-- 搜尋框搜尋值回顯 -->
<param name="complain.compTitle">${strTitle}</param>
<param name="complain.state">${strState}</param>
<param name="startTime">${startTime}</param>
<param name="endTime">${endTime}</param>
<param name="pageNo">${pageNo}</param>
<!-- 解決搜尋框框亂碼-->
<param name="encode">true</param>
</result>
<result type="json" name="annualStatisticData">
<param name="root">statisticMap</param>
</result>
</action>
</package>
</struts>
7、要注意,頁面接受的是json物件。