XML/SWF Charts - Flash 繪製圖表

在網頁上常常需要顯示圖表資訊，例如投票結果，如果只用數字來呈現那就遜斃了。這裡提供了一個好用且免費的組件來繪製 Flash 圖表，並且可以產生不同類型的圖表，例如；柱狀圖、圓餅圖、曲線圖等等。


XML/SWF Charts

XML/SWF Charts 是一個由 SWF (Flash) 在 Client 端繪圖的組件。Server 只要準備 XML 格式的資料，圖的部份由 Flash 幫你在 Client 端繪畫起來。省了 Server 的 Loading，也沒有暫存檔的產生，而且是 Flash 做的，還可以有動畫特效，簡單、好用又美觀！

這裡還提供了支援 PHP 的組件，但是個人認為 XML 比較實用，所以對 PHP/SWF Charts 沒有做太多的研究。


PHP/SWF Charts

使用上很簡單，首先下載 XML/SWF Charts 的 library，解開後有一個 charts.swf 和 charts_library 的資料夾。把它們放到 web 可以 access 得到的地方。在 html 或是動態網頁檔加入以下的 flash object︰
<br /> <OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"<br /> codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" <br /> id="charts" <br /> width="550" <br /> height="450" <br /> ALIGN=""><br /> <PARAM NAME=movie VALUE="charts.swf?library_path=charts_library&xml_source=sample.xml"><br /> <PARAM NAME=quality VALUE="high"><br /> <PARAM NAME=bgcolor VALUE="#4C5E6F"><br /> <EMBED src="charts.swf?library_path=charts_library&xml_source=sample.xml"<br /> quality=high <br /> bgcolor="#4C5E6F" <br /> WIDTH="550" <br /> HEIGHT="450" <br /> NAME="charts" <br /> ALIGN="" <br /> swLiveConnect="true" <br /> TYPE="application/x-shockwave-flash" <br /> PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"><br /> </EMBED><br /> </OBJECT><br />
其中 src 指向 charts.swf 的所在位置，library_path=charts_library 為 charts_library 資料夾的位置，xml_source=sample.xml 為 XML 資料路徑，由一個固定的 XML 格式表示圖表的原始資料。以下列的圖表為列：

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

那麼 XML 如下：
<br /> <?xml version="1.0" encoding="utf-8"?><br /> <chart><br /> <chart_type>column</chart_type><br /> <chart_data><br /> <row><br /> <null/><br /> <string>2001</string><br /> <string>2002</string><br /> <string>2003</string><br /> <string>2004</string><br /> </row><br /> <row><br /> <string>Region A</string><br /> <number>5</number><br /> <number>10</number><br /> <number>30</number><br /> <number>63</number><br /> </row><br /> <row><br /> <string>Region B</string><br /> <number>100</number><br /> <number>20</number><br /> <number>65</number><br /> <number>55</number><br /> </row><br /> <row><br /> <string>Region C</string><br /> <number>56</number><br /> <number>21</number><br /> <number>5</number><br /> <number>90</number><br /> </row><br /> </chart_data><br /> </chart><br />
就可以產生出下面的圖表︰



其中 <chart_type>column</chart_type> 標籤決定繪出圖表的類型，請參閱 <chart_type>。

至於如果要呈現中文字請加上下面這兩個標籤，主要目的是將字型改為 system，預設字行為 Arial。
<br /> <legend_label font='system' /><br /> <axis_category font='system' /><br />
其他還有很多控制的標籤及參數請參閱 Tutorial 及 Reference。

以下是我自己測試的兩個範例圖表︰

XML_SWF_Charts.html
<br /><table border="1" cellspacing="2" cellpadding="0" align="center"><br /> <tr><br /> <td><br /><OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"<br /> codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" <br /> width="550" <br /> height="450" <br /> id="charts" <br /> ALIGN=""><br /><PARAM NAME=movie VALUE="charts.swf?library_path=charts_library&xml_source=sample_1.xml"><br /><PARAM NAME=quality VALUE="high"><br /><PARAM NAME=bgcolor VALUE="#4C5E6F"><br /><EMBED src="charts.swf?library_path=charts_library&xml_source=sample_1.xml"<br /> quality=high <br /> bgcolor="#4C5E6F" <br /> WIDTH="550" <br /> HEIGHT="450" <br /> NAME="charts" <br /> ALIGN="" <br /> swLiveConnect="true" <br /> TYPE="application/x-shockwave-flash" <br /> PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"><br /></EMBED><br /></OBJECT><br /> </td><br /> </tr><br /> <tr><br /> <td><br /><OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"<br /> codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" <br /> width="550" <br /> height="450" <br /> id="charts" <br /> ALIGN=""><br /><PARAM NAME=movie VALUE="charts.swf?library_path=charts_library&xml_source=sample_2.xml"><br /><PARAM NAME=quality VALUE="high"><br /><PARAM NAME=bgcolor VALUE="#6666AA"><br /><EMBED src="charts.swf?library_path=charts_library&xml_source=sample_2.xml"<br /> quality=high <br /> bgcolor="#6666AA" <br /> WIDTH="550" <br /> HEIGHT="450" <br /> NAME="charts" <br /> ALIGN="" <br /> swLiveConnect="true" <br /> TYPE="application/x-shockwave-flash" <br /> PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"><br /></EMBED><br /></OBJECT><br /> </td><br /> </tr><br /></table><br />
sample_1.xml
<br /><?xml version="1.0" encoding="utf-8"?><br /><chart><br /> <chart_type>bar</chart_type><br /> <legend_label font='system' size='14' /> <br /> <legend_rect x='10'<br /> y='10'<br /> width='530' <br /> height='0' <br /> margin='5'<br /> fill_color='FFFFFF'<br /> fill_alpha='30'<br /> line_color='000000'<br /> line_alpha='0'<br /> line_thickness='1'<br /> /> <br /> <legend_transition type='slide_left' <br /> delay='1' <br /> duration='1' /> <br /> <axis_category font='system' size='14' /> <br /> <chart_transition type='scale' <br /> delay='1' <br /> duration='1' <br /> order='series' /><br /> <chart_value prefix='' <br /> suffix=''<br /> decimals='0'<br /> decimal_char='.'<br /> separator=''<br /> position='center'<br /> hide_zero='false'<br /> as_percentage='false'<br /> font='arial'<br /> bold='true'<br /> size='15'<br /> color='FFFFFF'<br /> alpha='65' /><br /> <series_color><br /> <color>790000</color><br /> <color>7B2D00</color><br /> <color>7D4800</color><br /> <color>827A00</color><br /> </series_color><br /> <series_switch>true</series_switch><br /> <draw><br /> <text color='FFFFFF' <br /> alpha='80' <br /> font='arial' <br /> rotation='0' <br /> bold='true' <br /> size='40' <br /> x='0' <br /> y='400' <br /> width='550' <br /> height='200' <br /> h_align='right' <br /> v_align='top'>Ballot : 153 </text><br /> <text color='000000' <br /> alpha='10' <br /> font='arial' <br /> rotation='0' <br /> bold='true' <br /> size='50' <br /> x='0' <br /> y='-8' <br /> width='550' <br /> height='200' <br /> h_align='center' <br /> v_align='top'>|||||||||||||||||||||||||||||||||||||||</text><br /> <text color='000000' <br /> alpha='10' <br /> font='arial' <br /> rotation='0' <br /> bold='true' <br /> size='50' <br /> x='0' <br /> y='390' <br /> width='550' <br /> height='200' <br /> h_align='center' <br /> v_align='top'>|||||||||||||||||||||||||||||||||||||||</text><br /> </draw><br /> <chart_data><br /> <row><br /> <null/><br /> <string>數學</string><br /> <string>自然科學</string><br /> <string>英文</string><br /> <string>國語</string><br /> </row><br /> <row><br /> <string>票擇你最喜歡的科目？</string><br /> <number>50</number><br /> <number>10</number><br /> <number>30</number><br /> <number>63</number><br /> </row><br /> </chart_data><br /></chart><br />
sample_2.xml
<br /><?xml version="1.0" encoding="utf-8"?><br /><chart><br /> <chart_type>pie</chart_type><br /> <legend_label font='system' size='14' /> <br /> <legend_rect x='10'<br /> y='60'<br /> width='0' <br /> height='330' <br /> margin='5'<br /> fill_color='FFFFFF'<br /> fill_alpha='30'<br /> line_color='000000'<br /> line_alpha='0'<br /> line_thickness='1'<br /> /><br /> <legend_transition type='slide_down' <br /> delay='1' <br /> duration='1' /><br /> <axis_category font='system' size='14' /> <br /> <chart_transition type='spin' <br /> delay='0.5' <br /> duration='0.75' <br /> order='category' /><br /> <chart_value color='FFFFFF' <br /> alpha='65' <br /> font='arial' <br /> bold='true' <br /> size='15' <br /> position='inside' <br /> prefix='' <br /> suffix='' <br /> decimals='0' <br /> separator='' <br /> as_percentage='true' /><br /> <series_color><br /> <color>790000</color><br /> <color>7B2D00</color><br /> <color>7D4800</color><br /> <color>827A00</color><br /> </series_color><br /> <draw><br /> <text color='FFFFFF' <br /> alpha='80' <br /> font='arial' <br /> rotation='0' <br /> bold='true' <br /> size='40' <br /> x='0' <br /> y='400' <br /> width='550' <br /> height='200' <br /> h_align='right' <br /> v_align='top'>Percentage </text><br /> <text color='000000' <br /> alpha='10' <br /> font='arial' <br /> rotation='0' <br /> bold='true' <br /> size='50' <br /> x='0' <br /> y='-8' <br /> width='550' <br /> height='200' <br /> h_align='center' <br /> v_align='top'>|||||||||||||||||||||||||||||||||||||||</text><br /> <text color='000000' <br /> alpha='10' <br /> font='arial' <br /> rotation='0' <br /> bold='true' <br /> size='50' <br /> x='0' <br /> y='390' <br /> width='550' <br /> height='200' <br /> h_align='center' <br /> v_align='top'>|||||||||||||||||||||||||||||||||||||||</text><br /> </draw><br /> <chart_data><br /> <row><br /> <null/><br /> <string>數學</string><br /> <string>自然科學</string><br /> <string>英文</string><br /> <string>國語</string><br /> </row><br /> <row><br /> <string>票擇你最喜歡的科目？</string><br /> <number>50</number><br /> <number>10</number><br /> <number>30</number><br /> <number>63</number><br /> </row><br /> </chart_data><br /></chart><br />