open flash chart--3

 

JOFC2 - 第二個範例

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 和 JSP 作結合。我們在本範例中,將以亂數來產生四個整數,並將這四個整數值以 BarChart(條型圖)呈現出來。我們在這一系列的教學文件中,都以條型圖為範例,至於其他的圖表,我們建議分別利用舊版的 Open Flash Chart 教學文件以及 JOFC2 的 JavaDoc 來學習。

  1. 首先我們來看 JSP 的程式碼:在所有 JOFC2 所產生的圖表都是由一個 jofc2.model.Chart 的物件所形成,而在形成 Chart 物件的時候,我們可以順便為這個圖表產生"標題"。產生 Chart 物件的方式:
    import jofc2.model.Chart;
    
    Chart cht = new Chart("亂數資料");
    一旦 Chart 物件 cht 產生之後,我們就可以在這個物件上加上需要的圖表內常見的物件;例如,條型圖(BarChart)(或者其他圖,如 LineChart、PieChart 等),圖例(legend),以及 X、Y 軸等。由於我們希望能產生條型圖,所以我們需要產生一個 jofc2.model.elements.BarChart 物件(其實大多數圖表的物件都是屬於 jofc2.model.elements.Element 的子類別,例如 BarChart、 LineChart、PieChart 等),其產生的方式如下:
    import jofc2.model.elements.*;
    
    BarChart bc = new BarChart(BarChart.Style.NORMAL);
    BarChart 的風格有三種,除了程式碼中的 BarChart.Style.NORMAL,還有 BarChart.Style.GLASS 以及 BarChart.Style.THREED 兩種。我們鼓勵讀者在看完本文的範例之後,可以試試看更改 BarChart 的風格。

    有了 BarChart 物件 bc 之後,我們可以開始為 bc 加上其所要表現的數字。將數字加入 bc 是利用其 addValues() 的方法,其程式碼如下:

      for(int i=0; i<4; i++)
        bc.addValues((int) (Math.random() * 10) + 1);
    完成了 BarChart 的設定之後,我們需要把它加到 cht 內,其方式如下:
      cht.addElements(bc);
    最後,我們就可以把 cht 轉換成字串,並將它回傳給客戶端,其方式如下:
      out.println(cht.toString());
    這個範例的完整繩式碼如下:
    <%@page  contentType="text/plain" pageEncoding="UTF-8"
            import="jofc2.*,
                    jofc2.model.*,
                    jofc2.model.elements.*,
                    jofc2.model.elements.BarChart.*"%>
    <%
      Chart cht = new Chart("亂數資料");
    
      // 產生 BarChart 並將資料新增到 BarChart
      BarChart bc = new BarChart(BarChart.Style.NORMAL);
      for(int i=0; i<4; i++)
        bc.addValues((int) (Math.random() * 10) + 1);
    
      cht.addElements(bc);
      out.println(cht.toString());
    %>
    請注意: 跟之前的資料檔一樣,請在儲存這個檔案的時候,務必要把它儲存成 UTF-8 的編碼方式,如此一來 OFC2 才能正確的顯示中文;另外,也請記得將 @page 的 pageEncoding 的值定義成 UTF-8。

  2. 請將上述程式檔置放於 tomcat\webapps\test 內,並先執行它以確保該程式能正確的回傳符合 json 格式的資料,而且也可以確定該程式可以正確無誤的執行。假設我們將該程式碼儲存為 ofc2.jsp,執行後的畫面如下:
    open flash chart--3_第1张图片

  3. 如果程式可以正確無誤的執行,我們就可以為它開發一個相對應的 HTML 檔。這個檔案的內容跟之前的範例非常類似,差別只在我們為 data-file 設定的值為程式的名稱,也就是 ofc2.jsp。
    <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",
                       "expressInstall.swf", {"data-file":"ofc2.jsp"});
    </script>
    </head>
    <body>
     
    <p>第二個範例:結合 OFC2 和 JSP</p>
    <div id="my_chart"></div>
    </body>
    </html>

  4. 最後,我們可以載入 ofc2.html,其畫面如下:
    open flash chart--3_第2张图片

由於條型圖的內容是由亂數產生器所產生的,因此每一次"重新載入"之後,條型圖的內容應該會改變;這個情形在 Firefox 是完全沒問題的,但是在 IE 8 時,卻往往看到 IE 8 只會繼續使用 cache 的內容,而不會每次都重新執行 ofc2.jsp 並使用其最新的值。日前,有位網友(Jackey)提供了一個解決方式,那就是利用亂數字串給 JSP 檔,如此一來,IE 認定無法重複使用 cache 的內容而必須重新執行。以本範例而言,只需將 {"data-file":"ofc2.jsp"} 改成 {"data-file":"ofc2.jsp?random=(new Date()).valueOf()"} 但是使用時,請切記,你的 JSP 檔(在本例中就是 ofc2.jsp)內不會讀取名為 random 的參數;如果有,請記得將名稱改成一個不用的參數名稱即可。

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

你可能感兴趣的:(open flash chart--3)