Fusioncharts系列之基于Fusioncharts的报表统计

短命女 2021-09-11 05:38 258阅读 0赞

本博客介绍fusioncharts插件的使用  
先了解fusioncharts插件，fusioncharts是一款基于XML和flash的报表组件，支持Java、PHP、AngularJS等等开发语言，所以，开发出来，加入swf文件，就可以出现动态效果的报表统计，具有2D和3D效果的图表，下面是官网和详细分类

官网：http://www.fusioncharts.com/

## Fusioncharts插件的分类： ##

1.  3D/2D柱形图

![这里写图片描述][format_png]  
2. 曲线图

![这里写图片描述][format_png 1]  
3. 3D/2D饼形图和环形图  
![这里写图片描述][format_png 2]  
4. 区域图  
![这里写图片描述][format_png 3]

1.  堆栈图  
    ![这里写图片描述][format_png 4]
2.  联合图  
    ![这里写图片描述][format_png 5]
3.  蜡烛图

![这里写图片描述][format_png 6]  
8. 漏斗图  
![这里写图片描述][format_png 7]  
9. 甘特图  
![这里写图片描述][format_png 8]

先去官网下载Fusioncharts免费版本需要的swf和Javascript以及jar等等资料，http://www.fusioncharts.com/goodies/fusioncharts-free/  
或者去http://download.csdn.net/detail/u014427391/9722565  
http://download.csdn.net/detail/u014427391/9722584下载  
![这里写图片描述][format_png 9]

fusionChartsHtmlReader.jsp:

<%
    /* Version 2.0: 
     * Added DOMId to FlashVars
     * Version 1.1:
     * Works with all jdk versions >=1.4.
     * Creates the object tag required to embed a chart.
     * Generates the object tag to embed the swf directly into the html page.<br>
     * Note: Only one of the parameters strURL or strXML has to be not null for this<br>
     * method to work. If both the parameters are provided then strURL is used for further processing.<br>
     *  
     * @param chartSWF -
     *                SWF File Name (and Path) of the chart which you intend
     *                to plot
     * @param strURL -
     *                If you intend to use dataURL method for this chart,
     *                pass the URL as this parameter. Else, set it to "" (in
     *                case of dataStr method)
     * @param strXML -
     *                If you intend to use dataStr method for this chart,
     *                pass the XML data as this parameter. Else, set it to ""
     *                (in case of dataURL method)
     * @param chartId -
     *                Id for the chart, using which it will be recognized in
     *                the HTML page. Each chart on the page needs to have a
     *                unique Id.
     * @param chartWidth -
     *                Intended width for the chart (in pixels)
     * @param chartHeight -
     *                Intended height for the chart (in pixels)
     * @param debugMode -
     *                Whether to start the chart in debug mode (Not used in Free version)
     * @param wMode - Window mode
     * @param color - Background color
     * @param scaleMode - "noScale", "exactFit"
     * @param lang - Application Message Language - 2 letter code
     */
    
    %>
    <%
    	String chartSWF= request.getParameter("chartSWF"); 
    	String strURL= request.getParameter("strURL");
    	String strXML= request.getParameter("strXML");
    	String chartId= request.getParameter("chartId");
    	String chartWidthStr= request.getParameter("chartWidth");
    	String chartHeightStr= request.getParameter("chartHeight");
    	String debugModeStr= request.getParameter("debugMode"); // not used in Free version
    	String registerWithJSStr= request.getParameter("registerWithJS"); 
    	
    	String wMode = request.getParameter("wMode"); 
    	String color = request.getParameter("color"); 
    	String scaleMode = request.getParameter("scaleMode"); 
    	String lang = request.getParameter("lang"); 
    
    	
    	int chartWidth= 0;
    	int chartHeight=0;
    	Boolean debugMode=new Boolean("false");
    	Boolean registerWithJS=new Boolean("false");
    	int debugModeInt =0;
    	int regWithJSInt =0;
    
    	if(null!=chartWidthStr && !chartWidthStr.equals("")){
    		chartWidth = Integer.parseInt(chartWidthStr);
    	}
    	if(null!=chartHeightStr && !chartHeightStr.equals("")){
    		chartHeight = Integer.parseInt(chartHeightStr);
    	}
    	if(null!=debugModeStr && !debugModeStr.equals("")){
    		debugMode = new Boolean(debugModeStr);
    		debugModeInt= boolToNum(debugMode);
    	}
    	if(null!=registerWithJSStr && !registerWithJSStr.equals("")){
    		registerWithJS = new Boolean(registerWithJSStr);
    		regWithJSInt=boolToNum(registerWithJS);
    	}
    
    
    	if(wMode==null) 
    		wMode="";
    	if(scaleMode==null) 
    		scaleMode="";
    	if(color==null)
    		color="";
    	if(lang==null)
    		lang="";
    
    	String strFlashVars="";
    	strFlashVars = "chartWidth=" + chartWidth + "&chartHeight="
        + chartHeight + "&DOMId=" + chartId + "&debugMode=" + debugModeInt + "&registerWithJS=" + regWithJSInt;
        
    	if (strXML==null || strXML.equals("")) {
    	    // DataURL Mode
    	    strFlashVars +="&dataURL=" + strURL + "";
    	} else {
    	    // dataStr Mode
    	    strFlashVars += "&dataXML=" + strXML + "";
    	}
    	strFlashVars+= "&scaleMode=" + scaleMode+ "&lang=" + lang;
    	
    	
    %> 
    			
    			<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" 
    			width="<%= chartWidth%>" height="<%= chartHeight%>" id="<%= chartId%>">
    			<param name="allowScriptAccess" value="always" />
    			<param name="movie" value="<%=chartSWF%>"/>
    			<param name="FlashVars" value="<%=strFlashVars%>" />
    			<param name="quality" value="high" />
    			<param name="wmode" value="<%=wMode%>" />
    			<param name="bgcolor" value="<%=color%>" />
    			<embed src="<%=chartSWF%>" FlashVars="<%=strFlashVars%>" 
    			quality="high" width="<%=chartWidth%>" 
    			height="<%=chartHeight%>" name="<%=chartId%>"
    			allowScriptAccess="always" type="application/x-shockwave-flash" 
                            pluginspage="http://www.macromedia.com/go/getflashplayer" 
                            wmode="transparent" bgcolor="<%=color%>" />
    			</object>
    			
    <%!
        /**
         * Converts a Boolean value to int value<br>
         * 
         * @param bool Boolean value which needs to be converted to int value 
         * @return int value correspoding to the boolean : 1 for true and 0 for false
         */
       public int boolToNum(Boolean bool) {
    	int num = 0;
    	if (bool.booleanValue()) {
    	    num = 1;
    	}
    	return num;
        }
    %>

fusionChartsReader.jsp:

<%@page import="com.fusioncharts.helper.FCParameters" %>
    <%
    	/*
    	 * Version 2.0: 
    	 * Added JS v3.2 constructor call with object style parameters.
    	 * Added strJSON, dataFormat, renderer and renderAt as parameters.
    	 * Version: 1.1:
    	 * Added support for all the parameters like wMode etc.
    	 * Works with all jdk versions >=1.4.
    	 * Creates the JavaScript + HTML code required to embed a chart.<br>
    	 * Uses the javascript FusionCharts class to create the chart by supplying <br>
    	 * the required parameters to it.<br>
    	 * Note: Only one of the parameters dataURL or dataStr has to be non-empty for this<br>
    	 * method to work. If both the parameters are provided then dataURL is used for further processing.<br>
    	 * 
    	 * @param chartSWF -
    	 *                SWF File Name (and Path) of the chart which you intend
    	 *                to plot
    	 * @param strURL -
    	 *                If you intend to use dataURL method for this chart,
    	 *                pass the URL as this parameter. Else, set it to "" (in
    	 *                case of dataStr method)
    	 * @param strXML -
    	 *                If you intend to use dataStr method for this chart,
    	 *                pass the XML data as this parameter. Else, set it to ""
    	 *                (in case of dataURL method)
    	 * @param strJSON -
    	 *                If you intend to use dataStr method for this chart,
    	 *                pass the JSON data as this parameter. Else, set it to ""
    	 *                (in case of dataURL/xml method)
    	 * @param chartId -
    	 *                Id for the chart, using which it will be recognized in
    	 *                the HTML page. Each chart on the page needs to have a
    	 *                unique Id.
    	 * @param chartWidth -
    	 *                Intended width for the chart (in pixels)
    	 * @param chartHeight -
    	 *                Intended height for the chart (in pixels)
      	 * @param debugMode -
       	 *                Whether to start the chart in debug mode 
         * @param registerWithJS -
         *                Whether to ask chart to register itself with
         *                JavaScript
         * @param wMode -
         * @param color -
         * @param scaleMode -
         * @param lang -
         * @param detectFlashVersion -
         * @param autoInstallRedirect -
    	 */
    %>
    <%
    	String chartSWF = request.getParameter("chartSWF");
    	String strURL = request.getParameter("strURL");
    	String strXML = request.getParameter("strXML");
    	String strJSON = request.getParameter("strJSON");
    	String chartId = request.getParameter("chartId");
    	String chartWidthStr = request.getParameter("chartWidth");
    	String chartHeightStr = request.getParameter("chartHeight");
    	String debugModeStr= request.getParameter("debugMode"); 
    	String registerWithJSStr= request.getParameter("registerWithJS"); 
    	
    	String wMode = request.getParameter("wMode"); 
    	String color = request.getParameter("color"); 
    	String scaleMode = request.getParameter("scaleMode"); 
    	String lang = request.getParameter("lang"); 
    	String detectFlashVersion = request.getParameter("detectFlashVersion"); 
    	String autoInstallRedirect= request.getParameter("autoInstallRedirect");
    	
    	String dataFormat= request.getParameter("dataFormat"); 
    	String renderer= request.getParameter("renderer"); 
    	String renderAt= request.getParameter("renderAt"); 
    
    	int chartWidth = 600;
    	int chartHeight = 300;
    	Boolean debugMode=new Boolean("false");
    	Boolean registerWithJS=new Boolean("false");
    	int debugModeInt = 0;
    	int regWithJSInt = 0;
    	
    
    	if (null != chartWidthStr && !chartWidthStr.equals("")) {
    		chartWidth = Integer.parseInt(chartWidthStr);
    	}
    	if (null != chartHeightStr && !chartHeightStr.equals("")) {
    		chartHeight = Integer.parseInt(chartHeightStr);
    	}
    	if(null!=debugModeStr && !debugModeStr.equals("")){
    		debugMode = new Boolean(debugModeStr);
    		debugModeInt=boolToNum(debugMode);
    	}
    	if(null!=registerWithJSStr && !registerWithJSStr.equals("")){
    		registerWithJS = new Boolean(registerWithJSStr);
    		regWithJSInt=boolToNum(registerWithJS);
    	}
    	if(renderer==null) 
    		renderer="flash"; // default value
    	if(renderAt==null) 
    		renderAt=chartId+"Div";
    	
    	
    	String dataSource = "";
    	// Check whether we've to provide data using dataStr method or dataURL
    	// method
          
    	if (strURL!=null && !strURL.equals("")) {
    		dataSource = strURL;
    		dataFormat =( dataFormat==null ? "xmlurl" : dataFormat);
    	} else if(strXML!=null && !strXML.equals("")){
    		dataSource = strXML;
    		dataFormat =( dataFormat==null ? "xml" : dataFormat);
    	}else if(strJSON!=null && !strJSON.equals("")){
    		dataSource = strJSON;
    		dataFormat =( dataFormat==null ? "json" : dataFormat);
    	}
    	
    	FCParameters fcParams = new FCParameters(chartSWF, chartId,
    			""+chartWidth, ""+chartHeight, "" + debugModeInt, "" + regWithJSInt,
    			wMode, color, scaleMode, lang, detectFlashVersion,
    			autoInstallRedirect, dataSource, dataFormat, renderer,
    			renderAt);
    	String paramsInJSON = fcParams.toJSON();
    %>
    			
    			<% if(renderAt.equals(chartId+"Div")) { 
    			// output this chartIdDiv div only if chart is being rendered in it
    			%>
    			<div id='<%=chartId %>Div' align='center'>Chart.</div>
    			<% } %>
    			<script type='text/javascript'>
    				var chart_<%=chartId%> = new FusionCharts(<%=paramsInJSON%>).render();
    			</script>
    			
    <%!
        /**
         * Converts a Boolean value to int value<br>
         * 
         * @param bool Boolean value which needs to be converted to int value 
         * @return int value correspoding to the boolean : 1 for true and 0 for false
         */
       public int boolToNum(Boolean bool) {
    	int num = 0;
    	if (bool.booleanValue()) {
    	    num = 1;
    	}
    	return num;
        }
    %>

写个index.jsp:  
Javascript：

<%@ include file="../admin/head.jsp"%>
    
    <div class="am-cf admin-main">
      
      
      <%@ include file="../admin/left.jsp"%>
    		
      
      <div class="admin-content">
    
        <div class="am-cf am-padding">
          <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg"><a href="main/index">首页</a></strong> / <small>图表统计</small></div>
        </div>
        	
    	<div class="am-g">
          <div class="am-u-sm-12">
    		<div style="float:left;">
    			<label>图表类型:</label>
    			<select id="combobox">
    				<option value="Column2D">柱形图2D</option>
    				<option value="Column3D">柱形图3D</option>
    				<option value="Pie2D">扇形图2D</option>
    				<option value="Pie3D">扇形图3D</option>
    			</select> 
          		<a href="javascript:selectType();" class="easyui-linkbutton" data-options="iconCls:'icon-search'" style="width:80px">Search</a>
    			<table border="0" width="50%">
    				<tr>
    					<td><jsp:include page="fusionChartsHTMLRenderer.jsp" flush="true">
    						<jsp:param name="chartSWF" value="${typeValue }" />
    						<jsp:param name="strURL" value="" />
    						<jsp:param name="strXML" value="${strXML }" />
    						<jsp:param name="chartId" value="myNext" />
    						<jsp:param name="chartWidth" value="500" />
    						<jsp:param name="chartHeight" value="300" />
    						<jsp:param name="debugMode" value="false" />
    						</jsp:include>
    					</td>
    				</tr>
    			</table>
    		 </div>
    	  </div>
    	</div>
    	
      </div>	
      
    	
    </div>
    
    	<script src="source/1.9.1/jquery.min.js"></script>
    </div>

SpringMVC框架写个Controller类：

package com.appms.controller.fusioncharts;
    
    import java.util.List;
    import java.util.Random;
    
    import javax.annotation.Resource;
    
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.servlet.ModelAndView;
    
    import com.appms.base.BaseController;
    import com.appms.entity.PageData;
    import com.appms.service.app.GroupClassifyService;
    import com.appms.service.app.GroupPostService;
    
    @Controller
    @RequestMapping("/fusioncharts")
    public class FusionChartsController extends BaseController{
    
    	@Resource(name="groupClassifyService")
    	GroupClassifyService groupClassifyService;
    	@Resource(name="groupPostService")
    	GroupPostService groupPostService;
    	
    	/**
    	 * 统计报表首页
    	 * @return
    	 * @throws Exception
    	 */
    	@RequestMapping("/index")
    	public ModelAndView goIndex() throws Exception{
    		ModelAndView mv = this.getModelAndView();
    		List<PageData> classifyList = groupClassifyService.getAllClassify();
    		mv.setViewName("fusioncharts/fusioncharts_index");
    		String strXML = "";
    		strXML += "<graph caption='对比表' xAxisName='圈子' yAxisName='话题数量' decimalPrecision='0' formatNumberScale='0'>";
    		for(int i=0;i<classifyList.size();i++){
    		strXML += "<set name='"+classifyList.get(i).getString("classifyName")+
    				"' value='"+groupPostService.countPost(classifyList.get(i).get("classifyID").toString())+
    				"' color='"+randomColor()+"'/>";
    		}
    		strXML += "</graph>";
    		String typeValue = "source/FusionCharts/Column2D.swf";
    		mv.addObject("strXML",strXML);
    		mv.addObject("typeValue",typeValue);
    		return mv;
    	}
    	/**
    	 * 选择图表类型
    	 * @return
    	 * @throws Exception
    	 */
    	@RequestMapping(value="/selectType")
    	public ModelAndView selectType()throws Exception{
    		ModelAndView model = this.getModelAndView();
    		List<PageData> classifyList = groupClassifyService.getAllClassify();
    		PageData pd = new PageData();
    		pd = this.getPageData();
    		String type = pd.getString("type");
    		String typeValue = "source/FusionCharts/Column2D.swf";
    		if(type.equals("Column2D")){
    			typeValue = "source/FusionCharts/Column2D.swf";
    		}else if(type.equals("Column3D")){
    			typeValue = "source/FusionCharts/Column3D.swf";
    		}else if(type.equals("Pie2D")){
    			typeValue = "source/FusionCharts/Pie2D.swf";
    		}else if(type.equals("Pie3D")){
    			typeValue = "source/FusionCharts/Pie3D.swf";
    		}
    		String strXML = "";
    		strXML += "<graph caption='圈子统计' xAxisName='圈子' yAxisName='话题数量' decimalPrecision='0' formatNumberScale='0'>";
    		for(int i=0;i<classifyList.size();i++){
    		strXML += "<set name='"+classifyList.get(i).getString("classifyName")+
    				"' value='"+groupPostService.countPost(classifyList.get(i).get("classifyID").toString())+
    				"' color='"+randomColor()+"'/>";
    		}
    		strXML += "</graph>";
    		model.addObject("strXML", strXML);
    		model.addObject("typeValue",typeValue);
    		model.setViewName("fusioncharts/fusioncharts_index");
    		return model;
    	}
    	
    	public String randomColor(){
    		//红色
            String red; 
            //绿色
            String green;
            //蓝色
            String blue;
            //生成随机对象
            Random random = new Random();  
            //生成红色颜色代码
            red = Integer.toHexString(random.nextInt(256)).toUpperCase();
            //生成绿色颜色代码
            green = Integer.toHexString(random.nextInt(256)).toUpperCase(); 
            //生成蓝色颜色代码
            blue = Integer.toHexString(random.nextInt(256)).toUpperCase();  
                
            //判断红色代码的位数
            red = red.length()==1 ? "0" + red : red ;  
            //判断绿色代码的位数
            green = green.length()==1 ? "0" + green : green ; 
            //判断蓝色代码的位数
            blue = blue.length()==1 ? "0" + blue : blue ;
            //生成十六进制颜色值
            String color = "#"+red+green+blue;
            return color;
    	}
    	
    }

![这里写图片描述][format_png 10]

![这里写图片描述][format_png 11]

[format_png]: /images/20210813/fc6e7bf77eda46a686f3b3fed74471bc.png
[format_png 1]: /images/20210813/b5a8982b589a44dd84ae4e841009d287.png
[format_png 2]: /images/20210813/d3e971b8360c472795825694cdbaabe2.png
[format_png 3]: /images/20210813/a93b25ffe9aa4770b2209ac4d07dcbca.png
[format_png 4]: /images/20210813/4b8f9ab0cdf5494e914471da2c1c17f4.png
[format_png 5]: /images/20210813/e59fd966070a4d22831e4b801ac13e0a.png
[format_png 6]: /images/20210813/3c73ae3b4fe147d2a3c98a37f5806e65.png
[format_png 7]: /images/20210813/35edaf934c074853a4eeb1b439ba9dc6.png
[format_png 8]: /images/20210813/ba648d97bc3b4029a4893142736db458.png
[format_png 9]: /images/20210813/cdf5831ff27d4053ada1fa5f24dab298.png
[format_png 10]: /images/20210813/82ff165420cb4c1588af0b84bfe14b4d.png
[format_png 11]: /images/20210813/9f7e4eda592f46929b50e70bd857ef24.png