XML/SWF Charts – 在 HTML 及 PHP 語法的 WEB 中繪製圖表的好選擇
今天想要介紹一套 XML/SWF Charts 圖表繪製軟體給各位,不過這套軟體可不是 Client 端的 software 喔!它主要是讓您可以很方便的在 Web 中繪製圖表,有常在寫部落格或是一些商業網站或多或少都需要用到圖表來提供一些數據,早期使用 PHP 語法的網站應該幾乎都是使用 GD 吧,然而這套軟體可是比起 GD 方便又好用許多,它最主要是透過 SWF (Flash) 在 client 端繪圖,所以 Server 端的重點只要準備 XML 的資料,如此一來便減少 Server 端的負載,當然另一個比較大的優勢就是在於它可以有一些3D立體圖及動畫特效的呈現.剛開始我在摸的時候還覺得有些複雜,不過只要花點時間看懂 XML 的內容大概就知道如何使用了,下面就是這套 XML/SWF Charts 的安裝及設定步驟,需要的人可以試試看…
- 1. 首先當然先從官方網站下載它回來並且解壓縮它到您的 Web 目錄中,官方網站提供了給 Unix like, MacOS, Windows 所使用的三種壓縮檔案,以方便使用者在不同的作業系統中使用它,而我使用的 Wordpress 是架設在 FreeBSD 平台上,所以下載了 .tgz 檔案
http://www.maani.us/xml_charts/charts.sit
http://www.maani.us/xml_charts/charts.tgz
http://www.maani.us/xml_charts/charts.zip
# cd /usr/local/www/apache22/data/your_web_root_directory/
# mkdir charts
# cd charts
# wget http://www.maani.us/xml_charts/charts.tgz
# tar -zxvf charts.tgz
- 2. 這時候您就可以先透過瀏覽器去瀏覽如下的範例檔案
http://your_web_address/charts/sample.html
- 3. 然而此軟體在 charts 的目錄中最重要的就是 sample.xml 檔案,請先將它 copy 成您想要的檔案名稱如: test.xml ,然後更改此檔案內容並且將您的數據填入,下面是我的範例檔案
# cp sample.xml test.xml
# vi test.xml
<chart>
<chart_type>bar</chart_type> ->顯示模式
<chart_transition type=’scale’ delay=’.5′ duration=’0.5′ order=’series’ />->顯示效果
<chart_label position=’right’ font=’arial’ bold=’true’ size=’10′ color=’000000′ alpha=’100′ /> ->數字顯示位置,字型,粗細,大小,顏色,透明度
<chart_data>
<row>
<null/>
<string>Taiwan
<string>US
<string>UK
</row>
<row>
<string>Product A
<number>15785
<number>15268
<number>15094
</row>
<row>
<string>Product B
<number>15718
<number>14633
<number>14504
</row>
<row>
<string>Product C
<number>15150
<number>14253
<number>14223
</row>
</chart_data>
</chart>
- 由於此 xml 檔案可以修改的參數很多,底下我先針對 chart_type 顯示模式介紹兩種參數 bar 及 column:
Bar: 橫條圖
Column: 直條圖
- 至於 chart_transition type 顯示效果 我在此範例中是使用 scale 並且延遲 0.5秒,當然官方網站也有許多效果可供設定,在此就另外再舉一個落下效果的例子如下:
此為落下效果 drop 的語法：
<chart_transition type=’drop’ delay=’1′ duration=’2′ order=’series’ />
- 另外需要注意的是數字顯示位置的寫法,根據 chart_type 顯示模式有所不同,所以請先到官方網站查詢您使用的圖形類型該使用哪種寫法才能將數字正確顯示出來,官方網址在此 http://www.maani.us/xml_charts/index.php?menu=Reference&submenu=chart_label
直條圖的寫法
Column: top, bottom, middle, middle-up, middle-down, outside, hide
橫條圖的寫法
Bar: left, center, right, outside, hide
- 4. 當您改好了想要的 test.xml 檔案,這時該如何顯示在網站中呢?假設您的網址是 http://lifestory.moqin.com/ 並且想在新的文章中呈現上面 test.xml 檔案的橫條圖範例,您只需複製下列的崁入式語法到您現在的文章 xxx.php or xxx.html 中就大功告成了!
<object classid=’clsid:D27CDB6E-AE6D-11cf-96B8-444553540000′ codebase=’http://download.macromedia.com/pub/shockwave/cabs/flash /swflash.cab#version=9,0,0,0′ WIDTH=’400′ HEIGHT=’250′ id=’charts’ ALIGN=”> <param NAME=movie VALUE=’http://lifestory.moqin.com/charts/charts.swf?library_path=http://lifestory.moqin.com/charts/charts_library&xml_source=http://lifestory.moqin.com/charts/test.xml’></param><param NAME=quality VALUE=high> </param><param NAME=bgcolor VALUE=#dddddd> <embed src=’http://lifestory.moqin.com/charts/charts.swf?library_path=http://lifestory.moqin.com/charts/charts_library&xml_source=http://lifestory.moqin.com/charts/test.xml’ quality=high bgcolor=#dddddd WIDTH=’400′ HEIGHT=’250′ NAME=’charts” ALIGN=” swLiveConnect=’true’ TYPE=’application/x-shockwave-flash’ PLUGINSPAGE=’http://www.macromedia.com/go/getflashplayer’> </embed> </param></object>
PS: 請注意我已經將需要改的地方用紅色標記起來,所以您只需要將上面紅色部份改為您網站名稱即可
