2012年9月26日 星期三

Open Flash Chart 2 簡介

Open Flash Chart 2 簡介

The materials presented in this web page is provided as is and is used solely for educational purpose. Use at your own risks.
Written by: 國立中興大學資管系呂瑞麟 Eric Jui-Lin Lu
請勿轉貼

開發以瀏覽器為介面的資訊系統是這幾年來系統開發的常態,而且常見的開發方式 都能很輕易的顯示一些 HTML 的文字內容(如條列示、表格式),但是對於顯示 圖表,卻往往發生找不到適當的中文教學文件的困擾,這篇文章就是希望能部分 解決這個問題,也順便可以當作教學文件用。
由於我們系上的程式語言以 Java 為主,因此以 Java 和 Chart 的關鍵字搜尋之後, 我們發現了 JFreeChart 以及 jCharts 這兩套免費的 Java 工具, 可以讓程式開發人員簡單的產生各式各樣的圖表。這兩套工具又以 JFreeChart 可以 找到的文件比較多,我也曾利用找到的教學資料:JFreeChart(JSP)學生學習評量曲線圖範例"使用JFreeChart製作美觀易懂的圖表 開發了一些能夠顯示工具提示(tooltip) 的條型圖。在測試 JFreeChart 的過程中,我發現雖然它可以提供一般 Java Applications 使用,也能在 servlets/JSPs 的開發環境下使用,但是總覺得它的設計以及使用上 實在太多於複雜。有幾次找尋資料的過程中,發現了 Open Flash Chart 2 的套件,於是 決定試試看,並比較它們的優缺點。目前的感覺,我個人覺得 Open Flash Chart 2 似乎比較簡單,只是它僅限於以瀏覽器為介面的資訊系統開發中使用,所以決定先 寫篇 Open Flash Chart 2 的教學文件(也就是本文);或許哪一天心血來潮也會把 之前的 JFreeChart 也寫一寫。
Open Flash Chart 2 是一個利用 Flash 物件來顯示圖表的一個工具,而且更妙的是這個工具不但是免費的, 而且還是 Open Source(開放原始碼)的。在開始介紹 OFC2 之前,請點選這個 範例,如果這樣的圖表能引起你的興趣,請繼續閱讀下去。
基本上,每一個 OFC2 的圖表都是由一個內嵌在網頁內的 Flash 物件所形成,而該 Flash 物件就是由 OFC2 所開發的 open-flash-chart.swf;當瀏覽器載入 一個含有 OFC2 Flash 物件的網頁,該 Flash 物件會由伺服器端下載;當下載完成後, 該 Flash 物件會開始讀取呈現圖表所需的資料檔案;OFC2 要求資料檔案必須符合 JSON 的格式,而該資料檔可以是一個固定的資料檔,或者是由一個程式(如 servlets/ JSPs)回傳給該 Flash 物件;資料讀取完成後,Flash 物件就把圖表顯示出來。
  1. 準備工作:這部分主要在於 OFC2 的安裝。 由於 OFC2 物件可以讀取由程式所形成的 JSON 資料檔,因此我們需要安裝給 servlets/JSPs 的套件,以便於可以輕易、快速的產生 JSON 檔。
  2. 第一個範例:我們在這個範例中利用固定的 資料檔案來呈現圖表。
  3. 第二個範例:我們在這個範例中利用 JSP 程式來產生資料,並由 HTML 檔呈現圖表。
  4. 第三個範例:這個範例主要在於呈現兩個 Bars 在條型圖中,並分別為它們設定各自的顏色。
  5. 第四個範例:這個範例主要在於為條型圖 更進一步的調整,調整的部分包含設定 X 軸的標籤等。
  6. 第五個範例:這個範例主要在於將條型圖 與資料庫結合;範例中使用的是 MySQL。
  7. 第六、七個範例:這兩個範例主要在於說明 如何使用 JSP 分別產生 LineChart 以及圓餅圖。
  8. 第八個範例:這個範例主要在於說明 如何在一個圖表中,建立兩種以上的不同圖表;範例中使用的是之前說過的 BarChart 以及 LineChart。

Written by: 國立中興大學資管系呂瑞麟 Eric Jui-Lin Lu

沒有留言:

張貼留言