Fusioncharts系列之基于Fusioncharts的报表统计
【摘要】 本博客介绍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 + "®isterWithJS=" + 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; }
%>
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; }
%>
写个index.jsp:
Javascript：
<script type="text/javascript"> function selectType(){ var typeValue = $("#combobox").val(); window.location.href="fusioncharts/selectType?type="+typeValue; }
</script>
<!--[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> <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>
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;
}
}
文章来源: smilenicky.blog.csdn.net，作者：smileNicky，版权归原作者所有，如需转载，请联系作者。
原文链接：smilenicky.blog.csdn.net/article/details/53896797
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
作者其他文章
评论（0）