之前介紹過 XML/SWF Charts , 可以參考這篇: XML/SWF Charts好用繪製圖表組件 https://diary.tw/archives/316 , 這裡要介紹另一個好用的組件, FusionCharts Free (http://www.fusioncharts.com/free/), 為什麼說是 Free 呢, 因為, 他也有付費的版本, 而這個 Free 的版本是要免費給大家使用, 並且進一步使用那家公司其他的工具(再來付費), 真是不錯的好方法.
這個組件是用 flash 實作的, 提供了以下種類的圖表,
- 3D/2D Column & Bar Charts
- Line Charts
- 2D/3D Pie & Doughnut Charts
- Area Charts
- Stacked Charts
- Candlestick Charts
- Funnel Chart
- Gantt Chart
比較特別的是這個 Gantt Chart, 一般的繪圖組件, 比較少見這個類型的圖表, 十分特別, 其他的圖表也都很美觀, 而接下來我們就來進行實作吧.
該元件有支援中文, 不過輸出中文的資料檔要有 BOM, 也就是 UTF-8檔頭, 否則不能輸出正確的中文, 我們以簡單的一個 Line Chart 來看.
基本上, 要畫一個 Line Chart 使用的元件是 FCF_Line.swf 這個 flash 組件, 而餵給他的參數共有 &dataURL=data1.php&chartWidth=640&chartHeight=480, 其中的 dataURL 為另外的一支餵資料的程式, 可以是任何型態的 server 程式碼或是靜態的網頁, 而 chartWidth 及 chartHeight 則是圖表的寬高. 若是要給中文, 一定要用 UTF-8 with BOM 的方式, 才能正常顯示中文.
再來就是這個 data1.php 的內容, 基本上有幾個重點, 先看圖形根節點:
<graph baseFont="system" caption="年度銷售" subcaption="台北地區" xAxisName="月份" showNames="1" showValues="0" formatNumberScale="0" decimalPrecision="0" >
其中 baseFont 是指定字型, 若是中文, 儘量用 “system” 這個字型, 而 caption 就是圖表標題, 而 subcaption 是副標, 會在標題下方, xAxisName 是 x 軸說明, showNames 是 x 軸資料的名稱是否要顯示(本例為 1, 2, 3, .. 12), showValues 是指每個資料點上的值是否要秀出, formatNumberScale 是用來表現大數字時, 是否要用 k, m 等來表示, 如 30,000 會顯示為 30K, 而 decimalPrecision 則是指要小數點幾位.
再來是資料內容, 被包在 <graph ></graph> 這組內, 現在要 demo 是簡單版的, 就是只有一個數值要繪製, 可以直接將 name value 放成資料在上面的 graph 裡, 以此例來看, 就是這樣:
<set name="n1" value="12000" hoverText="name1" /> <set name="n2" value="19000" hoverText="name2" /> ....
其中 set 是一個一個的資料, 而 name 是在 x 軸上的名稱, hoverText 是當 mouseOver 時, 會在數值點上的名稱, 整個秀出來的結果如下:
可以參考這個 sample: http://sample.diary.tw/19/chart1.php , 資料在此: http://sample.diary.tw/19/data1.php , 其中的 flash 語法如下:
<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="640" height="480" id="Line" > <param name="movie" value="./FCFCharts/FCF_Line.swf?dataURL=data1.php&chartWidth=640&chartHeight=480" /> <param name="quality" value="high" /> <embed src="./FCFCharts/FCF_Line.swf?dataURL=data1.php&chartWidth=640&chartHeight=480" quality="high" width="640" height="480" name="Line" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object>
這樣就能順利繪出所需要的 Line Chart 折線圖了.
至於多數列的部分, 這裡再整裡一下, 多數列會面臨不能用一個 <set > 將資料標籤和資料值組包在一起, 所以需要分開作, 而且, 重點在於多數列使用的 swf 組件為 FCF_MSLine.swf, 原來的 FCF_Line.swf 只能畫單數列.
graph 的部分不變, 用法相同.
再定義 x 軸, 如下:
<categories> <category Name="Jan" /> <category Name="Feb" /> ... </categories>
再定義數列, 此例為兩列數列:
<dataset seriesName="PC" color="aabb00" anchorBorderColor="aabb00" anchorRadius="4"> <set value="12000" /> <set value="19000" /> ... </dataset> <dataset seriesName="NB" color="00aabb" anchorBorderColor="00aabb" anchorRadius="4"> <?php <set value="17000" /> <set value="22000" /> ... </dataset>
最後一樣用 </graph> 包起來即可, 範例在此: http://sample.diary.tw/19/chart2.php , 其資料在此: http://sample.diary.tw/19/data2.php
PS 注意以上範例的 value 都利用 php 亂數產生的, 所以每次值會不同, 而這組 swf 圖表的好處是若只要用 Line Chart 則使用 FCF_Line.swf , 而多組數列, 則用 FCF_MSLine.swf 都是獨立 swf 組件, 而且, 餵給他的參數中 dataURL=[filename] 的部分, 不需要再自組亂數在後面(避免 cache 問題, 因為他會自己加, 如下:)
結論是這組繪畫組件也十分輕量好用, 一個 swf 檔 20k 左右, 用哪一種就 embed 哪一種, 個個獨立操作, 而若不想用 dataURL 給 script 的方式, 也可以用 dataXML 將字串直接用 querystring 的方式餵給他, 就不需要再寫 script, 看實際應用方便來調整囉.
而單組和多組數列的圖表繪製使用的 swf 組件也不同, 主要由檔名就看得出來了, 就是多了 MS 的都是多組數列的哦.
有什麼問題, 大家可以一起討論看看.