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作为报表组件,下面谈一下对它的封装、以及使用经验,如下讲解一下主要设计思路及其范例。
我们先来从页面开始讲起,用逆推的方式来了解其实现思路、方法。
效果图
下面是一个客户概况表的报表显示的效果图(漏斗样式),如下:
下面再来看一下页面如何调用显示的。
页面调用
<%String path = request.getContextPath();%>... <script type="text/javascript" src="<%=path%>/script/eap/zui/zui-all.js?v=2012.5.1"></script> <script type='text/javascript' src="<%=path %>/script/fusioncharts/FusionCharts.js"></script> <script type="text/javascript" src="<%=path %>/script/fusioncharts/swfobject.js"></script> <script type="text/javascript"> </script> <body> |
分析说明:从上面代码,我们看到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);