フュージョンcharts-suite-xtでデータを作成した統計図を表示します.

7723 ワード

JavaScript Json FussionCharts

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対象です.

JavaScriptアニメーション基礎知識