amCharts是一款前台Flash报表工具,官方网站http://www.amcharts.com/
由于使用了Flash ,可以做出不少华丽的动画效果,使报表数据显得生动立体。与其说它是报表工具,倒不如称之为图表工具。
amCharts可生成饼图柱状图线图等,细分下来种类很多,官方有很多例子供参考。
下面介绍一下如何使用amCharts。
制作一个报表非常简单,基本包括3个文件:
1.原始报表flash程序(通过动态读取xml数据元素进行显示)
2.flash配置文件(xml)
3.flash数据文件(可以是xml或csv)
flash程序配置文件一般会提前做好,当然也可以动态生成。而数据文件则是我们主要需要处理的。
首先设计一下图表的样式,编辑flash配置文件。可以从官方例子里借鉴。
配置文件中几个比较重要的标签:
pie
图表的基本配置,不同种类的图有不同的标签名称。
animation
图表初始化时可为其设置动画,每种图都可有不一样的我特效。
background
图表背景,可以是一张图甚至另一个flash
balloon
设置鼠标经过图表项目时所显示的过滤数据
legend
如有需要,可以为图表单独设立一个说明框
export_as_image
顾名思义,配置图片导出的设置选项
labels
图表标题
plugins
图表还设置了接口,可以引入渲染插件
显示样式设计好了,造个假的数据文件看看效果,如果满意的话就可以写产生数据文件的代码了。
数据文件一般需要动态生成,但不会每次点击都会生成新的数据文件吧?所以通常会按时间间隔生成数据文件(每小时、每天)。
具体生成方法就不提了。以上面2图为例,帖一下生成的数据文件的大致格式:
饼图
<?xml version="1.0" encoding="UTF-8"?>
<pie>
<slice title="图书管理系统" description="使用VB为学校图书馆开发的图书管理系统" >2.000</slice>
<slice title="学生管理系统" description="使用C#为学校开发的学生管理系统" >1.000</slice>
<slice title="人事管理系统" description="使用Java为企事业单位开发的人事管理系统" >1.000</slice>
</pie>
柱状图(设计了2组数据)
<?xml version="1.0" encoding="UTF-8"?>
<chart>
<series>
<value xid="0" >08年3月</value>
<value xid="1" >08年4月</value>
<value xid="2" >08年5月</value>
</series>
<graphs>
<graph gid='1'>
<value xid="0" >6</value>
<value xid="1" >3</value>
<value xid="2" >7</value>
</graph>
<graph gid='0'>
<value xid="0" >8</value>
<value xid="1" >7</value>
<value xid="2" >15</value>
</graph>
</graphs>
</chart>
amCharts提供了生成图片的功能
amCharts对后台透明,无论使用何种语言(java/php),只要提供URL,amCharts就会把画面上的像素一个个作为paramter传到后台,这样就可以生成图片了。
诚然,amCharts也存在一些弊端。
首次显示一个报表,总计需要大约100k的流量(flash程序+配置文件能占到总文件大小的90%)。
这在网络条件不佳的情况下可能会大大降低用户体验度。解决办法是压缩一下配置XML文件,这样会适当降低一些流量开销。
另外,图片导出也可能会发生问题。如附录的图片导出代码可以看出,导出图片的开销是可观的,parameter很多(像素n方),很占用资源。
如上图那般方式导出,amCharts的flash本身没有提供控制功能,用户可以连续无限点,造成重复提交。
解决办法是关掉flash本身的图片导出功能,自己做按钮让用户点来调用导出函数,然后在按钮上做文章。缺点是页面无故多了个按钮会变丑...
而且这也不会从根本上解决问题,parameter是固定传的,即使在后台做了图片缓存,效果也不会太明显。
amCharts是一款华丽的报表工具,依稀记得自己第一次鼓捣的时候旁边的同事纷纷围上来赞叹。
用好了它,会让你的网页显得非常牛b。当然这并不是我们的初衷,让死板的报表变得好看易于理解,才是我们最想要的。
附录:
图片导出的代码可参考这里:
http://www.javaeye.com/topic/229006