FusionChart报表组件使用经验介绍

最新推荐文章于 2023-05-16 10:04:14 发布

云焰

最新推荐文章于 2023-05-16 10:04:14 发布

阅读量1.7k

点赞数

分类专栏：功能组件文章标签：报表 null schema date xml function

本文链接：https://blog.csdn.net/yan_dk/article/details/7644613

版权

功能组件专栏收录该内容

63 篇文章 1 订阅

订阅专栏

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>
</head>

<body>
<div>客户概况表</div>
<div id='customer_overview_chart' style='text-align:center'></div>
</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);