FusionChart报表组件使用经验介绍

叁歲伎倆 2022-06-11 05:17 250阅读 0赞

FusionCharts作为报表组件，显示界面很漂亮，可以Flash动画展示效果。以下是网上对它的评价：

FusionCharts Free 的优点：                                                                                                                                                                                    
    1.免费：100%免费，而且生成的图形中不含任何广告链接。 
    
    2.免安装：在使用FusionCharts Free前所要做的只是拷贝几个SWF文件而已。
    
     3.简单：使用FusionCharts Free不需要了解任何Flash的知识，将想要显示的数据转成XML扔给它就OK了。 
    
    4.支持所有的平台和语言PHP, ASP, .NET, JSP, ColdFusion, JavaScript, Ruby on Rails...
    
     5.降低资源占用和带宽消耗：以往，要显示的图片都是在服务器端生成好后，再传给浏览器的。这对服务器的资源和网络带宽都是一个较大的消 耗。而FusionCharts Free只是将预构建的SWF文件和XML数据文件传给浏览器，剩下的图片渲染等工作就交给Adobe Flash Player了。与此同时，浏览器会将SWF文件缓存起来，以后就更是只需要传递XML即可。
    
    6.大量的类型：尽管比V3少，但FusionCharts Free还是提供了22种图片类型。
    
    7.下载地址：http://www.fusioncharts.com/free/Download.asp

我公司也使用FusionCharts作为报表组件，下面谈一下对它的封装、以及使用经验，如下讲解一下主要设计思路及其范例。

我们先来从页面开始讲起，用逆推的方式来了解其实现思路、方法。

**效果图**

下面是一个客户概况表的报表显示的效果图（漏斗样式），如下：

![1339126200_6057.JPG][]

下面再来看一下页面如何调用显示的。

**页面调用**

<table> 
 <tbody> 
 <tr> 
 <td> &lt;%String path = request.getContextPath();%&gt;...&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;script type="text/javascript" src="&lt;%=path%&gt;/script/eap/zui/zui-all.js?v=2012.5.1"&gt;&lt;/script&gt; &lt;script type='text/javascript' src="&lt;%=path %&gt;/script/fusioncharts/FusionCharts.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="&lt;%=path %&gt;/script/fusioncharts/swfobject.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; //客户概况表获取数据 function getOverviewChartXML() { &nbsp;&nbsp;&nbsp; /** 柱状图*/ &nbsp;&nbsp;&nbsp; var renderId = "customer_overview_chart"; &nbsp;&nbsp;&nbsp; jQuery.ajax({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dataType: 'json', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; url:&nbsp; '&lt;%=path %&gt;/reportCustomer/searchCustomerOverviewChart.do', //请求数据的url &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; success: function(response) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (response.flag == 1) {//有数据 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (response.success) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var chartData = response.chartCode; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var fusionCharts = new FusionCharts('&lt;%=path %&gt;/swf/FCF_Funnel.swf', '0', '710', '450'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; fusionCharts.setDataXML(chartData.data); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; fusionCharts.render(renderId); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } else {//无数据 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; noDataRender(renderId); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp; }); } //没有数据时的显示内容 noDataRender = function(divId) { &nbsp;&nbsp;&nbsp; jQuery("#" + divId).html("&lt;font size='5'&gt;无符合条件的数据！&lt;/font&gt;"); } //调用查询，生成客户概况表报表 jQuery(function() { &nbsp;getOverviewChartXML(); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div&gt;客户概况表&lt;/div&gt; &lt;div id='customer_overview_chart' style='text-align:center'&gt;&lt;/div&gt; &lt;/body&gt; </td> 
 </tr> 
 </tbody> 
</table>

分析说明：从上面代码，我们看到script引用了3个：zui-all.js是项目前端js组件库，fusioncharts/FusionCharts.js，swfobject.js这2个是fusioncharts的js组件库。

报表获取数据使用js函数getOverviewChartXML，用jquery调用后台控制层searchCustomerOverviewChart.do方法取得报表所需数据；

报表显示区域只用一个divid=customer\_overview\_chart的元素就可以了。

这里关键还是从后台取得报表所需数据，我们看看数据库表结构的设计吧。

**数据库表**

FusionCharts相关表有3个CHART\_DEFINE图表定义'、CHART\_XML\_SCHEMA图表XML格式'、CHART\_DATA\_SERIES图表数据系列信息'

CREATE TABLE `CHART_DEFINE` (
      `ID` char(30) NOT NULL COMMENT '唯一标识',
      `VERSION` int(11) DEFAULT NULL COMMENT '版本号',
      `QUERY_SCHEMA_ID` char(30) DEFAULT NULL COMMENT '数据源ID',
      `XML_SCHEMA_ID` char(30) DEFAULT NULL COMMENT '显示格式ID',
      `CHART_CODE` varchar(100) DEFAULT NULL COMMENT '图表编码',
      `CHART_CAPTION` varchar(200) DEFAULT NULL COMMENT '图表名称',
      `CHART_TYPE` varchar(100) DEFAULT NULL COMMENT '图表类型',
      `DESCRIPTION` varchar(1000) DEFAULT NULL COMMENT '描述',
      `CREATE_BY` char(22) DEFAULT NULL COMMENT '创建人',
      `UPDATE_BY` char(22) DEFAULT NULL COMMENT '更新人',
      `CREATE_DATE` date DEFAULT NULL COMMENT '创建时间',
      `UPDATE_DATE` date DEFAULT NULL COMMENT '更新时间',
      PRIMARY KEY (`ID`)
    ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='图表定义';

INSERT INTO `CHART_DEFINE` (`ID`, `VERSION`, `QUERY_SCHEMA_ID`, `XML_SCHEMA_ID`, `CHART_CODE`, `CHART_CAPTION`, `CHART_TYPE`, `DESCRIPTION`, `CREATE_BY`, `UPDATE_BY`, `CREATE_DATE`, `UPDATE_DATE`)
     VALUES ('CUSTOMER_OVERVIEW_CHART', 0, NULL, 'CUSTOMER_OVERVIEW_SCHEMA', 'CUSTOMER_OVERVIEW_CHART', '客户概况表', 'Funnel', NULL, 'guoqiang', NULL, NULL, NULL);

CREATE TABLE `CHART_XML_SCHEMA` (
      `ID` char(30) NOT NULL COMMENT '唯一标识',
      `VERSION` int(11) DEFAULT NULL COMMENT '版本号',
      `CATEGORIES_TYPE` varchar(100) DEFAULT NULL COMMENT '分类类型',
      `CATEGORIES_ID` char(30) DEFAULT NULL COMMENT '分类列ID',
      `CATEGORIES_FORMAT` char(100) DEFAULT NULL COMMENT '分类格式化串',
      `CATEGORIES_CONFIG` varchar(1000) DEFAULT NULL COMMENT '分类配置',
      `DATA_SERIES_TYPE` varchar(100) DEFAULT NULL COMMENT '数据系列类型',
      `DATA_SERIES_ID` char(30) DEFAULT NULL COMMENT '动态数据系列ID',
      `DATA_SERIES_FORMAT` char(100) DEFAULT NULL COMMENT '数据系列格式化串',
      `CHART_ATTRS` varchar(1000) DEFAULT NULL COMMENT '属性列表',
      `CREATE_BY` char(22) DEFAULT NULL COMMENT '创建人',
      `UPDATE_BY` char(22) DEFAULT NULL COMMENT '更新人',
      `CREATE_DATE` date DEFAULT NULL COMMENT '创建时间',
      `UPDATE_DATE` date DEFAULT NULL COMMENT '更新时间',
      PRIMARY KEY (`ID`)
    ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='图表XML格式';

INSERT INTO `CHART_XML_SCHEMA` (`ID`, `VERSION`, `CATEGORIES_TYPE`, `CATEGORIES_ID`, `CATEGORIES_FORMAT`, `CATEGORIES_CONFIG`, `DATA_SERIES_TYPE`, `DATA_SERIES_ID`, `DATA_SERIES_FORMAT`, `CHART_ATTRS`, `CREATE_BY`, `UPDATE_BY`, `CREATE_DATE`, `UPDATE_DATE`) 
    VALUES ('CUSTOMER_OVERVIEW_SCHEMA', 0, 'data_series_final', 'REPORT_CUSTOMER_TYPE', NULL, NULL, NULL, NULL, NULL, '{formatNumberScale:\'0\'\r\n,decimalPrecision:\'0\',bgAlpha:\'0\'\r\n,bgColor:\'FFFFFF\'\r\n,rotateNames:\'0\',\r\ncanvasBgColor:\'ffffff\',\r\ncanvasBaseColor:\'dbdbdb\',\r\ncanvasBaseDepth:\'5\'\r\n,canvasBgDepth:\'5\',\r\nshowCanvasBg:\'0\',\r\nshowCanvasBase:\'1\',\r\nbaseFont:\'Arial\',\r\nbaseFontSize:\'12\'\r\n,hoverCapBorderColor:\'dece8f\',\r\nhoverCapBgColor:\'fffed4\',\r\nhoverCapSepChar:\',\',\r\nbaseFontColor:\'333333\',yAxisMinValue:\'0\',yAxisMaxValue:\'10\'}', 'guoqiang', NULL, NULL, NULL);

CREATE TABLE `CHART_DATA_SERIES` (
      `ID` char(30) NOT NULL COMMENT '唯一标识',
      `VERSION` int(11) DEFAULT NULL COMMENT '版本号',
      `XML_SCHEMA_ID` char(30) DEFAULT NULL COMMENT '格式ID',
      `RESULT_ID` char(30) DEFAULT NULL COMMENT '结果项ID',
      `RESULT_FORMAT` char(100) DEFAULT NULL COMMENT '格式化串',
      `SEQ` int(11) DEFAULT NULL COMMENT '顺序',
      `RENDER_AS` varchar(100) DEFAULT NULL COMMENT '显示图形类型',
      `PARENT_Y_AXIS` int(11) DEFAULT NULL COMMENT '是否显示独立Y轴',
      `CREATE_BY` char(22) DEFAULT NULL COMMENT '创建人',
      `UPDATE_BY` char(22) DEFAULT NULL COMMENT '更新人',
      `CREATE_DATE` date DEFAULT NULL COMMENT '创建时间',
      `UPDATE_DATE` date DEFAULT NULL COMMENT '更新时间',
      PRIMARY KEY (`ID`)
    ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='图表数据系列信息';

INSERT INTO `CHART_DATA_SERIES` (`ID`, `VERSION`, `XML_SCHEMA_ID`, `RESULT_ID`, `RESULT_FORMAT`, `SEQ`, `RENDER_AS`, `PARENT_Y_AXIS`, `CREATE_BY`, `UPDATE_BY`, `CREATE_DATE`, `UPDATE_DATE`) 
    VALUES ('CUSTOMER_OVERVIEW_SERIES', 0, 'CUSTOMER_OVERVIEW_SCHEMA', 'REPORT_CUSTOMER_TOTAL', NULL, 1, NULL, NULL, 'guoqiang', NULL, NULL, NULL);

[1339126200_6057.JPG]: https://img-my.csdn.net/uploads/201206/08/1339126200_6057.JPG