AmCharts Flash 图形报表工具

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

google chart blog.chenlb.com

后来看了 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>

<?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>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Line &amp; 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 看到。

其它图，如实际应用的一个饼图：

服务器的响应时间

好看吧。统计数据一目了然。amcharts 除了基本的线图、饼图、条形图，还有股票图、地区图。基本能满足应用，赞一个。它可以免费使用，只不过在图的左上角有个官方的链接。

amcharts 官方地址：http://www.amcharts.com/