- 微信
- 微博
  
  分享文章到微博
- 复制链接
  
  复制链接到剪贴板

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

yd_273762914 发表于 2020/12/03 00:08:49 2020/12/03

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

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

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

Fusioncharts插件的分类：

3D/2D柱形图

2. 曲线图

3. 3D/2D饼形图和环形图

4. 区域图

堆栈图
联合图
蜡烛图

8. 漏斗图

9. 甘特图

先去官网下载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下载

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; %> <!--START Code Block for Chart <%=chartId%> --> <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> <!--END Code Block for Chart <%=chartId%> -->
<%! /** * 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; }
%>

  
 
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38
  39
  40
  41
  42
  43
  44
  45
  46
  47
  48
  49
  50
  51
  52
  53
  54
  55
  56
  57
  58
  59
  60
  61
  62
  63
  64
  65
  66
  67
  68
  69
  70
  71
  72
  73
  74
  75
  76
  77
  78
  79
  80
  81
  82
  83
  84
  85
  86
  87
  88
  89
  90
  91
  92
  93
  94
  95
  96
  97
  98
  99
  100
  101
  102
  103
  104
  105
  106
  107
  108
  109
  110
  111
  112
  113
  114
  115
  116
  117
  118
  119
  120
  121
  122
  123
  124
  125
  126
  127
  128
  129
  130
  131
  132
  133

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();
%> <!-- START Script Block for Chart <%=chartId%> --> <% 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> <!--END Script Block for Chart <%=chartId%> -->
<%! /** * 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; }
%>

  
 
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38
  39
  40
  41
  42
  43
  44
  45
  46
  47
  48
  49
  50
  51
  52
  53
  54
  55
  56
  57
  58
  59
  60
  61
  62
  63
  64
  65
  66
  67
  68
  69
  70
  71
  72
  73
  74
  75
  76
  77
  78
  79
  80
  81
  82
  83
  84
  85
  86
  87
  88
  89
  90
  91
  92
  93
  94
  95
  96
  97
  98
  99
  100
  101
  102
  103
  104
  105
  106
  107
  108
  109
  110
  111
  112
  113
  114
  115
  116
  117
  118
  119
  120
  121
  122
  123
  124
  125
  126
  127
  128
  129
  130
  131
  132
  133
  134
  135
  136
  137
  138
  139
  140
  141
  142
  143
  144
  145
  146
  147
  148

写个index.jsp:
Javascript：

<script type="text/javascript"> function selectType(){ var typeValue = $("#combobox").val(); window.location.href="fusioncharts/selectType?type="+typeValue; }
  </script>

  
 
  1
  2
  3
  4
  5
  6
  7
  8

<!--[if lte IE 9]>
<p class="browsehappy">你正在使用<strong>过时</strong>的浏览器，系统 暂不支持。 请 <a href="http://browsehappy.com/" target="_blank">升级浏览器</a>
  以获得更好的体验！</p>
<![endif]--> <!-- 页面顶部¨ --> <%@ include file="../admin/head.jsp"%>

<div class="am-cf admin-main"> <!-- 左侧菜单• -->
  <%@ include file="../admin/left.jsp"%> <!-- content start -->
  <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>&nbsp; <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> <!-- content end -->
	
</div>
<!-- basic scripts -->
	<script src="source/1.9.1/jquery.min.js"></script>
</div>

  
 
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38
  39
  40
  41
  42
  43
  44
  45
  46
  47
  48
  49
  50
  51
  52
  53
  54
  55
  56

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;
	}
	
}


  
 
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38
  39
  40
  41
  42
  43
  44
  45
  46
  47
  48
  49
  50
  51
  52
  53
  54
  55
  56
  57
  58
  59
  60
  61
  62
  63
  64
  65
  66
  67
  68
  69
  70
  71
  72
  73
  74
  75
  76
  77
  78
  79
  80
  81
  82
  83
  84
  85
  86
  87
  88
  89
  90
  91
  92
  93
  94
  95
  96
  97
  98
  99
  100
  101
  102
  103
  104
  105
  106
  107
  108
  109
  110
  111
  112
  113

文章来源: smilenicky.blog.csdn.net，作者：smileNicky，版权归原作者所有，如需转载，请联系作者。

原文链接：smilenicky.blog.csdn.net/article/details/53896797

点赞
收藏
关注作者

0/1000

抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认取消

加入云驻计划，成为创作者

华为云周边好礼
免费体验产品
特殊身份标识
线下官方门票
内部专家零距离
与10000+优质创作者共同成长

立即加入

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

Fusioncharts插件的分类：

全部回复

设置昵称

关于作者

目录

加入云驻计划，成为创作者

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

Fusioncharts插件的分类：

全部回复

设置昵称

关于作者

目录

加入云驻计划，成为创作者

推荐阅读

相关产品