同事給了一個連結, 看到了 www.maani.us 上有個 XML/SWF Charts的繪製圖表的組件, 介面很不錯, 而且又有動畫效果, 於是就來試試看.
這個網站上有多組套件可用, 這次針對 XML/SWF 進行安裝試用, 他的安裝很容易, 就下載放到 web server 上即可, 而 data 的內容可以拉 xml 的檔案, 或是 asp/php/cfm/cgi 等可輸出的網頁皆可. 內容不難實作, 格式如下:
<chart>
<chart_type>bar</chart_type>
<chart_data>
<row>
<null/>
<string>2006/1</string>
<string>2006/2</string>
<string>2006/3</string>
<string>2006/4</string>
</row>
<row>
<string>ITEM 1</string>
<string>123</string>
<string>222</string>
<string>333</string>
<string>444</string>
</row>
.....
</chart_data>
</chart>
這樣的內容, 可以由程式即時生成, 所有行為皆為 client 的 swf 進行繪製, 比較有趣的是動畫部分, 動畫的部分要加入一行控制, 如下:
<chart_transition type=’scale’ delay=’.5′ duration=’0.5′ order=’series’ />
其中的 type 有多種設定, 可以參考 type設定, 共有: dissolve, drop, spin, scale, zoom, blink, slide_right, slide_left, slide_up, slide_down, 預設是無動畫效果, 也就是 none.
雖然網站上是說有支援 any language, 但我用中文試是不行的, 以下為兩個 sample 的連結:
chart: http://sample.diary.tw/2/chart1.php
data source: http://sample.diary.tw/2/data1.php 請自行檢視原始檔
chart: http://sample.diary.tw/2/chart2.php
data source: http://sample.diary.tw/2/data2.php 請自行檢視原始檔
整個工作方式是 client 拿到了 charts.swf 及其對應 lib 的 swf 後, 再依該 charts.swf 的後接參數指定的資料來源 xml檔 (或是 asp/php/cfm/cgi 等可 output xml內容的網頁) 來取得要繪製圖表的資料內容, 所以整個圖表是在客戶端完成的, 敏感性資料仍要注意安全性問題, 在實作上要注意一下.
其中的 data source data2.php 是有含動畫功能的哦!
給各位參考看看囉!
[2007/3/3 01:35]
感謝網友 john 提供資料, 將 font 設置為 ‘system’ 即可順利顯示中文, 請參閱 sample:
http://sample.diary.tw/2/chart3.php
資料: http://sample.diary.tw/2/data3.php
在 <chart>內多加一筆:
<legend_label font=’system’ size=’10’ />
即可!!
[2008/10/13 19:48]
感謝網友[菜鳥學習者]的資料, 新版 v5 的語法已將 <legend_label>修改掉了, 應該為 <legend>語法, 所以實際上將是修改為:
<legend font=’system’ size=’10’ />
可以參考 sample:
http://sample.diary.tw/14/chart3.php
資料: http://sample.diary.tw/14/data3.php
[2008/10/21 11:52]
新增一個 ASP.NET C#小範例, 包含由DB讀出資料, 並餵給 XML/SWF CHART進行繪製. 使用了SqlConnection 配合 SqlCommand 及 SqlDataReader 將資料由DB讀出, 並寫出為對應的XML/SWF CHART所需要的語法(mydata.aspx), 並由Default.aspx頁面上的object/embed語法配合亂數防止CACHE將資料由mydata.aspx取得並繪製. 可以由此下載:
xmlswfchart.zip
執行結果如下:
