open flash chart--1

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。

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