amCharts -- Flash图形图表工具

昵称11871755 2013-04-02

展开全文

最近做一些服务器访问日志统计的工作，统计好数据后用什么工具输出，才会一目了然呢？恩，肯定是 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.&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格式)。

先来看下效果吧：

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>
<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>
</body>
</html>