您的位置：首页 > 其它

FusionChart报表组件使用经验介绍

2012-06-08 11:26 495 查看

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

FusionChartsFree的优点：
1.免费：100%免费，而且生成的图形中不含任何广告链接。

2.免安装：在使用FusionChartsFree前所要做的只是拷贝几个SWF文件而已。

3.简单：使用FusionChartsFree不需要了解任何Flash的知识，将想要显示的数据转成XML扔给它就OK了。

4.支持所有的平台和语言PHP,ASP,.NET,JSP,ColdFusion,JavaScript,RubyonRails...

5.降低资源占用和带宽消耗：以往，要显示的图片都是在服务器端生成好后，再传给浏览器的。这对服务器的资源和网络带宽都是一个较大的消耗。而FusionChartsFree只是将预构建的SWF文件和XML数据文件传给浏览器，剩下的图片渲染等工作就交给AdobeFlashPlayer了。与此同时，浏览器会将SWF文件缓存起来，以后就更是只需要传递XML即可。

6.大量的类型：尽管比V3少，但FusionChartsFree还是提供了22种图片类型。

7.下载地址：http://www.fusioncharts.com/free/Download.asp

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

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

效果图

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

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

页面调用

<%Stringpath=request.getContextPath();%>...

<scripttype="text/javascript"src="<%=path%>/script/eap/zui/zui-all.js?v=2012.5.1"></script>

<scripttype='text/javascript'src="<%=path%>/script/fusioncharts/FusionCharts.js"></script>

<scripttype="text/javascript"src="<%=path%>/script/fusioncharts/swfobject.js"></script>

<scripttype="text/javascript">

//客户概况表获取数据

functiongetOverviewChartXML(){

/**柱状图*/

varrenderId="customer_overview_chart";

jQuery.ajax({

dataType:'json',

url:'<%=path%>/reportCustomer/searchCustomerOverviewChart.do',//请求数据的url

success:function(response){

if(response.flag==1){//有数据

if(response.success){

varchartData=response.chartCode;

varfusionCharts=newFusionCharts('<%=path%>/swf/FCF_Funnel.swf','0','710','450');

fusionCharts.setDataXML(chartData.data);

fusionCharts.render(renderId);

}

}else{//无数据

noDataRender(renderId);

}

}

});

}

//没有数据时的显示内容

noDataRender=function(divId){

jQuery("#"+divId).html("<fontsize='5'>无符合条件的数据！</font>");

}

//调用查询，生成客户概况表报表

jQuery(function(){

getOverviewChartXML();

});

</script>

</head>

<body>

<div>客户概况表</div>

<divid='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图表数据系列信息'

CREATETABLE`CHART_DEFINE`(
`ID`char(30)NOTNULLCOMMENT'唯一标识',
`VERSION`int(11)DEFAULTNULLCOMMENT'版本号',
`QUERY_SCHEMA_ID`char(30)DEFAULTNULLCOMMENT'数据源ID',
`XML_SCHEMA_ID`char(30)DEFAULTNULLCOMMENT'显示格式ID',
`CHART_CODE`varchar(100)DEFAULTNULLCOMMENT'图表编码',
`CHART_CAPTION`varchar(200)DEFAULTNULLCOMMENT'图表名称',
`CHART_TYPE`varchar(100)DEFAULTNULLCOMMENT'图表类型',
`DESCRIPTION`varchar(1000)DEFAULTNULLCOMMENT'描述',
`CREATE_BY`char(22)DEFAULTNULLCOMMENT'创建人',
`UPDATE_BY`char(22)DEFAULTNULLCOMMENT'更新人',
`CREATE_DATE`dateDEFAULTNULLCOMMENT'创建时间',
`UPDATE_DATE`dateDEFAULTNULLCOMMENT'更新时间',
PRIMARYKEY(`ID`)
)ENGINE=InnoDBDEFAULTCHARSET=utf8COMMENT='图表定义';

INSERTINTO`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);

CREATETABLE`CHART_XML_SCHEMA`(
`ID`char(30)NOTNULLCOMMENT'唯一标识',
`VERSION`int(11)DEFAULTNULLCOMMENT'版本号',
`CATEGORIES_TYPE`varchar(100)DEFAULTNULLCOMMENT'分类类型',
`CATEGORIES_ID`char(30)DEFAULTNULLCOMMENT'分类列ID',
`CATEGORIES_FORMAT`char(100)DEFAULTNULLCOMMENT'分类格式化串',
`CATEGORIES_CONFIG`varchar(1000)DEFAULTNULLCOMMENT'分类配置',
`DATA_SERIES_TYPE`varchar(100)DEFAULTNULLCOMMENT'数据系列类型',
`DATA_SERIES_ID`char(30)DEFAULTNULLCOMMENT'动态数据系列ID',
`DATA_SERIES_FORMAT`char(100)DEFAULTNULLCOMMENT'数据系列格式化串',
`CHART_ATTRS`varchar(1000)DEFAULTNULLCOMMENT'属性列表',
`CREATE_BY`char(22)DEFAULTNULLCOMMENT'创建人',
`UPDATE_BY`char(22)DEFAULTNULLCOMMENT'更新人',
`CREATE_DATE`dateDEFAULTNULLCOMMENT'创建时间',
`UPDATE_DATE`dateDEFAULTNULLCOMMENT'更新时间',
PRIMARYKEY(`ID`)
)ENGINE=InnoDBDEFAULTCHARSET=utf8COMMENT='图表XML格式';

INSERTINTO`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);

CREATETABLE`CHART_DATA_SERIES`(
`ID`char(30)NOTNULLCOMMENT'唯一标识',
`VERSION`int(11)DEFAULTNULLCOMMENT'版本号',
`XML_SCHEMA_ID`char(30)DEFAULTNULLCOMMENT'格式ID',
`RESULT_ID`char(30)DEFAULTNULLCOMMENT'结果项ID',
`RESULT_FORMAT`char(100)DEFAULTNULLCOMMENT'格式化串',
`SEQ`int(11)DEFAULTNULLCOMMENT'顺序',
`RENDER_AS`varchar(100)DEFAULTNULLCOMMENT'显示图形类型',
`PARENT_Y_AXIS`int(11)DEFAULTNULLCOMMENT'是否显示独立Y轴',
`CREATE_BY`char(22)DEFAULTNULLCOMMENT'创建人',
`UPDATE_BY`char(22)DEFAULTNULLCOMMENT'更新人',
`CREATE_DATE`dateDEFAULTNULLCOMMENT'创建时间',
`UPDATE_DATE`dateDEFAULTNULLCOMMENT'更新时间',
PRIMARYKEY(`ID`)
)ENGINE=InnoDBDEFAULTCHARSET=utf8COMMENT='图表数据系列信息';

INSERTINTO`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);

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航