XML/SWF Charts – 新一代的網站圖表工具

在 Web 上常常需要顯示圖表，而圖表如果是由動態資料產生的，就必需要有繪圖的 API 來幫忙製圖。以 Java 來說，大家熟知的是 JFreeChart。JFreeChart 提供的繪圖 API，在 web 環境的話，就要在 server 先把圖產生，再由 client 端顯示。這樣對 server 也是一個負擔，當很多人想要看各種不同的圖表時，系統的回應時間變慢、暫存檔的量大增，都是可以預見的。

XML/SWF Charts 是一個由 SWF (Flash) 在 client 端繪圖的 API。Server 只要準備 XML 格式的資料，圖的部份由 Flash 幫你在 client 端繪畫起來。省了 server 的 loading，也沒有暫存檔的產生，而且因為是 flash 做的，還可以有動畫特效，簡單、好用又美觀，絕對是 web 產生動態圖表的不二之選！

大家在這個連結可以看到很多範例，我不用貼圖的方式是因為貼圖沒有動畫的效果。事實上 W3Counter 跟 WUFOO 裡的圖似乎也都是用這個 API 做的，看來這個 API 已經得到 AJAX 界的肯定。

使用上其實也蠻簡單的，首先 下載 XML/SWF Charts 的 library，解開後有一個 charts.swf 和 charts_library 的資料夾。把它們放到 web 可以 access 得到的地方。在 html 或是動態網頁檔加入以下的 flash object:

<OBJECT classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0″ WIDTH=”400″ HEIGHT=”250″ id=”charts” ALIGN=”"> <PARAM NAME=movie VALUE=”charts.swf?library_path=charts_library&xml_source=sample.xml”> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#666666> <EMBED src=”charts.swf?library_path=charts_library&xml_source=sample.xml” quality=high bgcolor=#666666 WIDTH=”400″ HEIGHT=”250″ NAME=”charts” ALIGN=”" swLiveConnect=”true” TYPE=”application/x-shockwave-flash” PLUGINSPAGE=”http://www.macromedia.com/go/getflashplayer”> </EMBED> </OBJECT>

其中 src 的部份要指向 charts.swf 的所在位置。而後面的 sample.xml 就是圖表的資料來源囉。Sample.xml 由一個固定的 xml 格式表示圖表的原始資料。以下列的圖表為列：

	2001	2002	2003	2004
Region A	5	10	30	63
Region B	100	20	65	55
Region C	56	21	5	90

那麼 Data 的格式就要如下：

<chart>
    <chart_type>column</chart_type>
    <chart_data>
      <row>
         <null/>
         <string>2001</string>
         <string>2002</string>
         <string>2003</string>
         <string>2004</string>
      </row>
      <row>
         <string>Region A</string>
         <number>5</number>
         <number>10</number>
         <number>30</number>
         <number>63</number>
      </row>
      <row>
         <string>Region B</string>
         <number>100</number>
         <number>20</number>
         <number>65</number>
         <number>55</number>
      </row>
      <row>
         <string>Region C</string>
         <number>56</number>
         <number>21</number>
         <number>5</number>
         <number>90</number>
      </row>
   </chart_data>
</chart>

而產生出的圖表就是這個樣子囉：

補充一下，圖表的一些格式、設定參數，是由 chart attributes 來設定，上面的 <chart_type> 就決定了系統要畫出什麼圖表。而 chart 的資料來源也可以帶有參數，讓 server 依參數動態產生 xml data。以上就大觀念作了簡單的解釋，詳細的部份請參閱 Tutorial 跟 Reference，畢竟參數太多了，很難一一解說。

這樣的 web 圖表架構，其實本身就是一種 AJAX。而 XML/SWF Charts 是可以免費使用的，只是圖會是可以點的，而點選就跳到 XML/SWF Charts 的 site。如果選擇付費的話，其實也不會很貴，USD $45 就可以買到一個 domain + any subdomain。我覺得 XML/SWF Charts 很有潛力成為知名圖表工具，甚至變成 Web 的圖表標準。而它的 host，maani.us 還提供了很多有趣跟有用的工具，像有一個是 flash 做成的汽車儀表板，實在太讚了。強力推介！

technorati tags:XML/SWF, Charts, JFreeChart, W3Counter, WUFOO

Blogged with Flock