用FusionCharts构建高效且优雅的图表框架.docx
- 文档编号:6421746
- 上传时间:2023-01-06
- 格式:DOCX
- 页数:11
- 大小:641.78KB
用FusionCharts构建高效且优雅的图表框架.docx
《用FusionCharts构建高效且优雅的图表框架.docx》由会员分享,可在线阅读,更多相关《用FusionCharts构建高效且优雅的图表框架.docx(11页珍藏版)》请在冰豆网上搜索。
用FusionCharts构建高效且优雅的图表框架
用FusionCharts构建高效且优雅的图表框架
分销产品开发团队——冉瑛
Fusioncharts是一个基于Flash的图表组件,可以用来提供数据驱动的动态图标,fusioncharts可用于任何网页脚本语言如,HTML格式,JSP技术等等。
提供交互式和强大的动态图标,fusioncharts充分利用流体美丽的Flash为模板,使用XML、JSON作为其数据接口,创造紧凑,互动和真正的动态图表。
设想所有的图形组成不需要任何的安装,你可以在你的能想到的语言环境中进行工作,并能在多数的浏览器中运行,建立漂亮的、栩栩如生的效果。
假设你的数据在有限的时间、空间、WEB内不停的发生改变。
FusionCharts刚好帮助你实现所有想像出来的事物。
FusionCharts的特点:
(a):
不需要任何Active-X或扩展控件
不需要安装任何扩展Active-X控件或组件来渲染效果。
对于服务器不需要安装组件,FusionCharts能够运行的非常流畅。
你只需上载核心的SWF文件到服务器中并将为其配置XML数据文件。
(b):
栩栩如生的效果可以增加站点美学效果:
通过Active-X控件或组件制作的图形是静态GIF或JPEG文件。
但是,通过FusionCharts就能制作出光滑、栩栩如生的动态图像效果,同时也很方便的为XML数据文件自定义附加属性。
(c):
减少服务器负载:
FusionCharts能很大程度地减轻服务器的负荷,相当在客户端处理工作。
客户端仅仅需要Macromediaflash6播放器,现在来讲非常普通的了,常与游览器的新版本一起推出。
由于该控件文件非常小,因此也非常适合窄频带传输。
(d):
兼容多种脚本语言:
FusionCharts兼容多种脚本语言:
如ASP,ASP.NET,JSP,PHP,Perl,CGI,CF等,如同在客户端进行处理时,无论是哪一种脚本语言通过数据访问组件都没太大关系。
该控件能够自定义从文本文件中获取的数据也可以在静态服务器中工作。
(文本文件或XML文件包含的数据能够被经常更新)
(e):
改变客户端动态数据库
你可以用客户端中很少的几句脚本来控制FusionCharts,也能够在客户端中建立全新的图形而不需要重新加载页面和图形。
(f):
可在图形中追加其它特征:
FusionCharts提供了自制的很多选项:
比如透明度、色彩主题、热点选区、盘旋标题等。
其最大的好处在于你能够利用XML数据文件进行自定义。
FusionCharts初探
下载FusionChart3.2(最新版),将Chart下的swf文件全部拷到web项目下,拷FusionCharts.js及其它辅助js文件到js文件夹,建一个jsp目录,用于保存页面。
一个最基本的环境就搭好了。
下面开始第一个图形报表,使用静态的XML作为数据源,尽量简单,只为直观的看到效果。
在jsp下建data.xml,数据如下:
Jsp下新建index.jsp(当然静态数据用html也可以),引入相应的js文件,
一个最简单的使用是用js代码来加载这个图形报表,代码如下:
我们对上面的代码进行以下解释。
我们定义了一个DIV,它还有个id。
图形将出现这个DIV里,到时这里的字将被图形替代。
接着,我们用四个参数建立了一个FusionCharts对象,
varmyChart=newFusionCharts("${path}/fcf/Pie3D.swf","myChartId","600","400");
第一个参数是SWF文件的地址。
第二个是图形的id。
这个id你可以随便叫什么,但是要注意,在后面我们讲到一个页面里有多个图形的时候,这个id一定要是唯一的。
第三个参数是图形的宽。
第四个参数是图形的高。
我们还要设置数据文件的地址。
myChart.setDataURL("${path}/jsp/data.xml");
最后,我们把图形渲染在指定的地方。
myChart.render("chartdiv");
"chartdiv"就是前面的DIV的id,这就表示把图形render到"chartdiv"。
我们第一个图形报表就完成了,运行效果如下,图形是动态的,鼠标移上去还有相应的提示,当然这些效果都是我们可以改变的。
要做成其它形状的图形只需要把Pie3D.swf变换成其它的,如柱状图MSColumn3D.swf:
还可以是拆线图:
FusionCharts使用进阶
看到这我们肯定就清楚了FusionCharts的基本使用方法,下面让我们看看FusionCharts变幻的关键,那就是数据。
不论用XML还是JSON作用数据源,我们实际使用肯定数据是动态的,并可根据需要改变参数值,使图形呈现不一样的效果。
相对XML我更喜欢用JSON生成数据,虽然很多人不喜欢用JSON,因为看着数据比较复杂,没有XML数据直观,但我的观点正好相反,JSON数据其实是有规律的就是对象数据的反映,我可以用对象方式直接生成JSON数据,至于生成的数据你要去看他干嘛呢?
你要看的是输出的图形报表,而不是JSON数据。
下面是我做的一个单系列图形JSON数据源例子,主要是为了使用对象动态生成JSON数据。
先看效果:
需要生成的JSON格式大概像这样:
1.建立输出Bean对象,这些Bean的属性只是其中的一部分,我们需要用到什么就写什么,但为了共用性,最好是全部属性都写上。
需要用就是赋值,不用的不赋值,这当然是最好的。
publicclassChartBean{
privateStringcaption;//标题
privateStringxAxisName;//横轴名称
privateStringyAxisName;//纵轴名称
privateStringnumberPrefix;//数字前缀
privateStringformatNumberScale;//是否格式化数字,默认为1(True)
privateStringpieSliceDepth;//饼图厚度
privateStringstartingangle;
….省略getset
}
publicclassDataBean{
privateStringlabel;
privateStringvalue;
privateStringissliced;//是否被切开
privateStringcolor;//颜色
…省略getset
}
publicclassChartOutBean{
privateChartBeanchart;
privateList
…省略getset
}
2.模拟生成数据的方法:
3.建一个servlet用于调生成数据的方法并根据对象生成JSON数据,这里要用到jackson.jar,一个目前java生成json效率最优的Json包。
//来源二:
通过对象生成数据
ChartOutBeanchartOutBean=createChartOutBean();
JsonUtil.getJsonGenerator(resp).writeObject(chartOutBean);
页面这样使用:
生成了我们的需要格式的json数据,但页面图形没出来,原因是有的我不想用的属性我们就没有赋值像dataBean中的color,但生成的json中成了color:
null,这肯定是不合法的数据。
怎么办?
4.Jackson给我们提供了强大的注解功能,有很多可以用上的比如忽略某个字段,字段过滤,日期格式化等,这也是为什么说Jackson比较强大的原因。
我这里要用到的字段过滤器@JsonFilter,根据对象生成JSON时,只有当属性有值时才生成,否则忽略此字段。
在DataBean类上加上@JsonFilter("dataFilter"),在ChartBean类上加上@JsonFilter("chartFilter"),写一个ChartUtil类,使用反射原理用于过滤对象中为空的属性。
上代码:
使用JSON过滤器重新生成JSON的方式如下:
生成的JSON数据格式如下:
{"chart":
{"caption":
"JSON数据源例子","numberPrefix":
"¥","formatNumberScale":
"0","pieSliceDepth":
"20","startingangle":
"20"},"data":
[{"label":
"星期1","value":
"1353","issliced":
"0"},{"label":
"星期2","value":
"2706","issliced":
"0"},{"label":
"星期3","value":
"4059","issliced":
"0"},{"label":
"星期4","value":
"5412","issliced":
"0"},{"label":
"星期5","value":
"6765","issliced":
"0"},{"label":
"星期6","value":
"8118","issliced":
"0"},{"label":
"星期7","value":
"9471","issliced":
"1"}]}
Ok,成功了!
没有值的属性自动过滤掉了,只留下的有值的属性。
这样我们只要把ChartBean和DataBean的属性完善,全部加入,不需要用的不赋值就行。
当然这只是个简单的例子,其它还有复杂的多系列图,生成的JSON格式更为复杂,都只要在这个基础框架上再加其它对应的Bean,按自己的需要进行组合即可。
一旦这个框架成型之后,你会惊喜的发现,现在你要做的只是根据需求获取数据生成不同的CreateOutBean了。
按照这样的思路,在上海易行本地同行系统中进行了应用,下面是自动生成的一个用户
当日访问量统计报表。
属于多系列线形图,相对单系列来说要复杂很多。
总结:
FusionCharts使用起来很方便,代码非常简洁,而做出来的效果可以说非常炫,有各种动态效果。
而我们需要关心的如何动态生成数据,而使用JSON数据格式,按对象生成数据,就变了获取组装对象,而这对于一个”资深”的Java程序员来说是再熟悉不过的一件事情。
FusionCharts还有其它很多丰富的功能,包括可以任意旋转的立体图,大家一起来学习吧,它不但是一个工具,更像是一个优雅的妹子,让你的客户看了赏心悦目。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- FusionCharts 构建 高效 优雅 图表 框架