AmCharts Flash 图形报表工具
2010-12-22 17:17 假面Wilson 阅读(1390) 评论(0) 编辑 收藏 举报原文出处:http://blog.chenlb.com/2009/07/amcharts-flash-report-tool.html
最近做一些服务器访问日志统计的工作,统计好数据后用什么工具输出,才会一目了然呢?恩,肯定是 chart。
Java 开源里有 JFreeChart,但要比较多的编程。很久以前用过 flex 的示例,印象中觉得用 flex 做 chart 也比较好,但没有经验。同事建议用 google chart api,但是要通过 url 传数据,可能它可以用 post 。前期的统计报表输出是用 google chart 与 jquery 的插件 完成了统计报表了。但是总是觉得不理想,可能是因为我看 google chart 的文档还没够(其实 google 的文档好难懂),效果不是很好。
google chart: http://chart.apis.google.com/chart?cht=p3&chd=e:blog.chenlb.com&chs=250x100&chl=a|b|c|d|e|f|g
后来看了 spingside 的 wiki,知道了一直想要的什么,Flash Chart,spingside 作者推荐用 amcharts。引用 spingside wiki 的一段话:
在画图工具中 ,在服务器端直接生成图片的又不美观又缺乏互动性,而在客户端用JavaScript生成的图片还是稍欠美感和互动性,所以最好看又最互动的报表方案应该是Flash报表方案了。
在FlashChart方案中,Amcharts,FusionChart与OFC三足而立,三者有不同的license策略,美观功能也略有不同,各凭喜好了。个人最喜欢Amcharts.
无论使用哪一种方案,形式上都差不多,静态的配置文件和flash文件+动态的数据文件(XML格式,JSON格式)。
先来看下效果吧:
![amline pv/uv/ip of my site](http://blog.chenlb.com/wp-content/uploads/2009/07/amline.gif)
pv/uv/ip of my site
amcharts 要一个“配置文件”(setting.xml),一个数据文件,一个 SWFObject.js,一个对应的 SWF 就可以生成漂亮的统计报表了。例如上面示例的 amline_setting.xml
- <?xml version="1.0" encoding="UTF-8"?>
- <settings>
- <labels>
- <label lid="0">
- <x></x>
- <y>20</y>
- <width>520</width>
- <align>center</align>
- <text>
- <![CDATA[<b>PV/UV/IP Of My Site</b>]]>
- </text>
- </label>
- </labels>
- <graphs>
- <graph gid="pv">
- <title>PV</title>
- <color>#FF0000</color>
- </graph>
- <graph gid="uv">
- <title>UV</title>
- <color>#00AA00</color>
- </graph>
- <graph gid="ip">
- <title>IP</title>
- <color>#0000FF</color>
- </graph>
- </graphs>
- </settings>
数据文件 amline_data.xml
页面文件 amline.html
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <title>Line & Area chart</title>
- </head>
- <body>
- <!-- saved from url=(0013)about:internet -->
- <!-- amline script-->
- <script type="text/javascript" src="js/swfobject.js"></script>
- <div id="flashcontent">
- <strong>You need to upgrade your Flash Player</strong>
- </div>
- <script type="text/javascript">
- // <![CDATA[
- var so = new SWFObject("swf/amline.swf", "amline", "520", "400", "8", "#FFFFFF");
- so.addVariable("path", "");
- so.addVariable("settings_file", encodeURIComponent("amline_settings.xml")); // you can set two or more different settings files here (separated by commas)
- so.addVariable("data_file", encodeURIComponent("amline_data.xml"));
- so.write("flashcontent");
- // ]]>
- </script>
- <!-- end of amline script -->
- </body>
- </html>
上面的示例可以在 http://demo.chenlb.com/amcharts/amline.html 看到。
其它图,如实际应用的一个饼图:
![ampie 服务器的响应时间](http://blog.chenlb.com/wp-content/uploads/2009/07/ampie.gif)
服务器的响应时间
好看吧。统计数据一目了然。amcharts 除了基本的线图、饼图、条形图,还有股票图、地区图。基本能满足应用,赞一个。它可以免费使用,只不过在图的左上角有个官方的链接。
amcharts 官方地址:http://www.amcharts.com/