利用 fusioncharts-suite-xt 完成数据的统计图显示

最新推荐文章于 2018-05-31 13:11:20 发布

幸福是什么感觉呢

最新推荐文章于 2018-05-31 13:11:20 发布

阅读量769

点赞数

分类专栏：学习领悟 javaEE java前端插件安装文章标签： Json fusioncharts javascript

本文链接：https://blog.csdn.net/zd305826520/article/details/51136694

版权

javaEE 同时被 3 个专栏收录

32 篇文章 0 订阅

订阅专栏

学习领悟

22 篇文章 0 订阅

订阅专栏

java前端

17 篇文章 0 订阅

订阅专栏

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对象。

幸福是什么感觉呢

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用 fusioncharts-suite-xt 完成数据的统计图显示

1、导入fusioncharts-suite-xt的js及其主题的js 2、以税务系统中的投诉为例，显示每个月的投诉数曲线图，jsp页面代码如下<% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName
复制链接

扫一扫

专栏目录