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" οnchange="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對象。