pCloud Partner Program

免費的圖表工具-FusionCharts Free

程式技術 2009/08/03 13:04
views: 104744 times
之前介紹過 XML/SWF Charts , 可以參考這篇: XML/SWF Charts好用繪製圖表組件 http://diary.tw/tim/36 , 這裡要介紹另一個好用的組件, FusionCharts Free (http://www.fusioncharts.com/free/), 為什麼說是 Free 呢, 因為, 他也有付費的版本, 而這個 Free 的版本是要免費給大家使用, 並且進一步使用那家公司其他的工具(再來付費), 真是不錯的好方法.

這個組件是用 flash 實作的, 提供了以下種類的圖表,
  1. 3D/2D Column & Bar Charts
  2. Line Charts
  3. 2D/3D Pie & Doughnut Charts
  4. Area Charts
  5. Stacked Charts
  6. Candlestick Charts
  7. Funnel Chart
  8. 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 語法如下:



這樣就能順利繪出所需要的 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 問題, 因為他會自己加, 如下:)
用戶插入圖片
那個 curr=80 就是他 flash swf 自行呼叫的加上的亂數, 比較自動一點.

結論是這組繪畫組件也十分輕量好用, 一個 swf 檔 20k 左右, 用哪一種就 embed 哪一種, 個個獨立操作, 而若不想用 dataURL 給 script 的方式, 也可以用 dataXML 將字串直接用 querystring 的方式餵給他, 就不需要再寫 script, 看實際應用方便來調整囉.

而單組和多組數列的圖表繪製使用的 swf 組件也不同, 主要由檔名就看得出來了, 就是多了 MS 的都是多組數列的哦.

有什麼問題, 大家可以一起討論看看.
top

Trackback Address :: http://diary.tw/tim/trackback/809

  1. speed 2010/04/29 04:20 MODIFY/DELETE REPLY

    真是好用的工具耶!

Write a comment


PREV : [1] : ... [250] : [251] : [252] : [253] : [254] : [255] : [256] : [257] : [258] : ... [462] : NEXT



Nextbit Robin 5.2吋六核心智慧型手機 Microsoft Office 365 中文家用版PKC (無光碟)
ASUS華碩 AC1900 雙頻無線路由器 RT-AC68U 美國 VORNADO 533 渦流空氣循環機 (黑色)
御茶園 每朝健康綠茶(650mlx24入) 每朝健康 雙纖綠茶(650mlx24入)


 Waiting...