2012年9月26日 星期三

OFC2 的準備工作

OFC2 的準備工作

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

請勿轉貼


OFC2 的安裝工作包含兩個部分,一個是 OFC2 本身,另一個是用來產生 JSON 的 Java 套件;當然第二個部分不是必要的,因為 OFC2 本身已經包含了像是 php 之類 的套件,如果你的開發環境不是 Java,你可以到 OFC2 的首頁確認你是否還需要 下載安裝其他套件。另外,由於我們之後的範例是以 JSP 為主,因此我們假設 讀者已經熟析 JSP,而且了解我們預設的 tomcat 設定如 JSP 入門 所示;也就是說,我們的測試目錄是 tomcat/webapps/test
  1. 安裝 OFC2:這個部分有點麻煩,第一個原因是該網頁中含有多個版本,至於哪個版本比較好也沒有清楚的說明;第二個原因是OFC2 開發的時間是 2009 年,似乎舊了一些。 最近找到了另一個新版本,目前從測試的結果來看,似乎網頁上的範例都 OK,至於 新版本有沒有提供新的功能,我需要找時間再試試看。以下針對我測試過的兩個版本 進行說明:
    1. 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
    2. 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
    3. 從第一個範例中,我們可以知道目前介紹的 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 的檔案比起來,明顯大很多,使用時要注意頻寬的問題。

  2. 安裝 OFC2 的 Java 套件:
    1. 請到 JOFC2 - Java API for Open Flash Chart 2 下載 jofc2-1.0-0.zip。雖然 JOFC2 的首頁介紹了 (開發中的)最新版 JOFC2,但是本文僅介紹原始版的。
    2. 解壓縮該 ZIP 檔之後,請將 jofc2-1.0-0.jar 以及 xstream-1.3.1.jar(在 解壓縮後的 lib 目錄內)複製到 tomcat\common\lib 或者 tomcat\shared\lib 內。
  3. 由於 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,你應該會看到類似之前的圖表;你也可以點一下 測試頁 來看一下結果。
  4. 在測試 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 試試看!




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



沒有留言:

張貼留言