2012年9月26日 星期三

JOFC2 - 第三個範例

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 的合用方式。在本文中,我們希望能夠更進一步的調整條型圖的內容,這次 調整的內容是將兩個以上的 Bar 放到條型圖中;完成後,條型圖如下所示:
在進一步說明範例之前,我們要先說明的是:我們只針對跟之前不同的地方進行 說明,相同的部分就不再贅述!
  1. 由於我們需要在 Chart 物件上加上兩個以上的 Bars;或者更明確的說, 要加上兩個以上的 BarChart。因此,為了能產生兩個 BarChart 物件,我們 宣告了以下敘述:
      BarChart bar1 = new BarChart(BarChart.Style.NORMAL),
               bar2 = new BarChart(BarChart.Style.NORMAL);
    
  2. bar1 和 bar2 都會以預設的顏色(類紫色)來呈現,可是這樣的呈現效果 不好;一般來說,不同的 Bar 會有不同的顏色。設定 Bar 顏色的方法為:
      bar1.setColour("#993300");
      bar2.setColour("#669933");
    
    setColour() 的參數是一個字串,其格式為井字號(#)之後,加上 RGB 的 十六進位數字。讀者可以利用繪圖工具或者 Table Tutor - Color Chart 來選擇 顏色。
  3. 顏色設定完成之後,我們可以利用類似之前的迴圈將亂數值經由 addValues() 將資料加到 BarChart 內。最後,我們就可以利用下列方式將 bar1 和 bar2 加上 Chart 物件:
      cht.addElements(bar1, bar2);
    
  4. 為了完整性,我們將完整的 JSP 程式碼列示如下:
    <%@page contentType="text/plain" pageEncoding="UTF-8"
            import="jofc2.*,
                    jofc2.model.*,
                    jofc2.model.elements.*,
                    jofc2.model.elements.BarChart.*"%>
    <%
      Chart cht = new Chart("亂數資料");
    
      // 產生兩串資料,分別由 bar1 和 bar2 代表
      BarChart bar1 = new BarChart(BarChart.Style.NORMAL),
               bar2 = new BarChart(BarChart.Style.NORMAL);
      bar1.setColour("#993300");
      bar2.setColour("#669933");
      for(int i=0; i<4; i++) {
        bar1.addValues((int) (Math.random() * 10) + 1);
        bar2.addValues((int) (Math.random() * 7) + 1);
      }
      cht.addElements(bar1, bar2);
    
      out.println(cht.toString());
    %>
    



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



沒有留言:

張貼留言