OFC2 的準備工作

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

請勿轉貼

JSP 入門

tomcat/webapps/test

安裝 OFC2：這個部分有點麻煩，第一個原因是該網頁中含有多個版本，至於哪個版本比較好也沒有清楚的說明；第二個原因是OFC2 開發的時間是 2009 年，似乎舊了一些。最近找到了另一個新版本，目前從測試的結果來看，似乎網頁上的範例都 OK，至於新版本有沒有提供新的功能，我需要找時間再試試看。以下針對我測試過的兩個版本進行說明：

Version 2 Lug Wyrm Charmer (28th, July 2009)：
1. 請到 OFC2 下載網頁下載 Version 2 Lug Wyrm Charmer (28th, July 2009)，檔案名稱為 open-flash-chart-2-Lug-Wyrm-Charmer.zip。
2. 請將該壓縮檔進行解壓縮。
3. 解壓縮之後，它包含有 12 個目錄（如 js, php-ofc-library, php5-ofc-library 等）以及兩個檔案（分別是 README.txt 和 open-flash-chart.swf）；請將 open-flash-chart.swf 以及 js 目錄分別複製於 tomcat/webapps/test。
OFC2 Community Release：這個版本是在 OFC2 討論區中看到的。從討論區的字裡行間看出，似乎 OFC2 原作者已經不再進行更新了，因此 OFC2 社群中有人跳出來進行持續更新。
1. 請到 OFC2 Community Release 下載網頁下載最新版本，我們正在測試 open-flash-chart-2-community-0.25.zip。
2. 請將該壓縮檔進行解壓縮。
3. 解壓縮之後，請將 open-flash-chart.swf 以及 js 目錄分別複製於 tomcat/webapps/test。
從第一個範例中，我們可以知道目前介紹的 open-flash-chart.swf 是無法讓 Y 軸上的標籤出現中文的（例如，將 data.json 中的 "Open Flash Chart" 改成 "次數"， open-flash-chart.swf 是不會呈現任何結果的）。如果讀者一定需要在 Y 軸出現中文，甚至希望在 X 軸上的中文可以轉動某個角度，那麼可以下載這個版本；該版本的修改範圍如說明。請注意： 下載檔是一個 zip 檔，解壓縮之後的檔案為 open_flash_chart.swf（是底線），而該檔案的大小大約 7 個 MB，與原先不到 300 多 KB 的檔案比起來，明顯大很多，使用時要注意頻寬的問題。

安裝 OFC2 的 Java 套件：

請到 JOFC2 - Java API for Open Flash Chart 2 下載 jofc2-1.0-0.zip。雖然 JOFC2 的首頁介紹了（開發中的）最新版 JOFC2，但是本文僅介紹原始版的。
解壓縮該 ZIP 檔之後，請將 jofc2-1.0-0.jar 以及 xstream-1.3.1.jar（在解壓縮後的 lib 目錄內）複製到 tomcat\common\lib 或者 tomcat\shared\lib 內。

由於 JOFC2 的測試需要寫程式，所以這部份的測試留到開始介紹 JSP 程式時才說明，我們先測試 OFC2 的安裝是否正確。請將下列資料檔案，命名為 data.json 並將其放置於 tomcat/webapps/test。請注意： 當你編輯 data.json 的時候，由於 OFC2 只能正確的解讀 UTF-8 的資料，所以在資料中包含有中文的資料時，請以 UTF-8 的編碼方式儲存；以"記事本"為例，在儲存檔案時，請在"編碼"的地方，選擇 UTF-8。

{
  "title":{
    "text":  "測試資料",
    "style": "{font-size: 20px; color:#0000ff; font-family: Verdana; text-align: center;}"
  },
 
  "y_legend":{
    "text": "Open Flash Chart",
    "style": "{color: #736AFF; font-size: 12px;}"
  },
 
  "elements":[
    {
      "type":      "bar",
      "alpha":     0.5,
      "colour":    "#9933CC",
      "text":      "Page views",
      "font-size": 10,
      "values" :   [9,6,7,9,5,7,6,9,7]
    },
    {
      "type":      "bar",
      "alpha":     0.5,
      "colour":    "#CC9933",
      "text":      "Page views 2",
      "font-size": 10,
      "values" :   [6,7,9,5,7,6,9,7,3]
    }
  ],
 
  "x_axis":{
    "stroke":1,
    "tick_height":10,
    "colour":"#d000d0",
    "grid_colour":"#00ff00",
    "labels": {
        "labels": ["一月","二月","March","April","May","June","July","August","Spetember"]
    }
   },
 
  "y_axis":{
    "stroke":      4,
    "tick_length": 3,
    "colour":      "#d000d0",
    "grid_colour": "#00ff00",
    "offset":      0,
    "max":         20
  }
}

請利用編輯器將下列 HTML 檔存成 ofc0.html 檔：

<html>
<head>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("open-flash-chart.swf", "my_chart", "500", "250", "9.0.0");
</script>
</head>
<body>
 
<p>第一個範例：使用 SWFObject.js</p>
 
<div id="my_chart"></div>
 
</body>
</html>

最後，請在瀏覽器的 URL 欄輸入 http://localhost:8080/test/ofc0.html?ofc=data.json，你應該會看到類似之前的圖表；你也可以點一下測試頁來看一下結果。

在測試 OFC2 的過程中，我試圖將圖表中 Y 軸的標籤進行更改；例如我希望將範例圖表中的 "Open Flash Chart" 換成 "次數"，但是"次數"無法顯示出來，似乎 OFC2 無法將中文顯示在 Y 軸的標籤。練習題： 請試著將 data.json 中 y_legend 後的 Open Flash Chart 換成 次數，並將 data.json 轉存成 wdata.json，然後輸入 http://localhost:8080/test/ofc0.html?ofc=wdata.json 試試看！

Last Updated: Wednesday, 08-Jun-2011 14:23:05 CST
Written by: 國立中興大學資管系呂瑞麟 Eric Jui-Lin Lu