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 和 JSP 的合用方式。在本文中,我們希望能夠更進一步的調整條型圖的內容,這次 調整的內容包含修改圖表標題的顏色、大小,新增 X 軸的標籤,設定 Y 軸的 最小值、最大值、間距,設定 Y 軸的標籤(從之前的說明,目前只支援英文), 以及分別設定兩個 Bar 的值代表 2008 和 2009 的銷售量。程式修改後所呈現的 畫面如下:
在進一步說明範例之前,我們要先說明的是:我們只針對跟之前不同的地方進行 說明,相同的部分就不再贅述!
  1. 首先,我們修改圖表標題的字體大小、顏色,以及 alignment。為了設定 標題,我們必須先宣告一個沒有標題的 Chart 物件,然後利用 setTitle() 的 方法將標題文字以及格式(style;包含字體大小、顏色,以及 alignment)設定好。 setTitle() 的參數是一個 jofc2.model.Text 的物件,而產生 style 字串的方式 是藉由 createStyle(字體大小, 顏色, alignment) 來完成,所以我們的程式碼 如下所示:
      // 調整 title 的字體大小、顏色,以及 alignment
      cht.setTitle(new Text("亂數資料", Text.createStyle(20, "#9933FF", Text.TEXT_ALIGN_CENTER)));
    
  2. 我們必須使用 jofc2.model.axis.XAxis 來設定 X 軸的標籤:在產生完 XAxis 物件之後,我們利用其 addLabels() 方法將標籤加進去,最後我們 利用 Chart 物件的 setXAxis() 的方法將 XAxis 設定為 Chart 的 X 軸物件。 程式碼如下所示:
      // 調整 X 軸的標籤
      XAxis labels = new XAxis();
      labels.addLabels("北區", "中區", "南區", "離島");
      cht.setXAxis(labels); 
    
  3. 如果要調整 Y 軸的呈現方式,我們使用 jofc2.model.axis.YAxis 物件。 YAxis 物件提供 setRange(最小值, 最大值, 間距) 方法來設定 Y 軸的數值; 另外,我們也可以使用 Chart 物件的 setYLengend() 的方法來改變 Y 軸的 標籤。setYLengend() 的參數是一個 Text 物件,設定方式跟之前相同。 原始碼如下所示:
      // 調整 Y 軸的標籤(目前只能英文)以及間距
      YAxis range = new YAxis();
      range.setRange(0, 60, 5);
      cht.setYAxis(range);
      cht.setYLegend(new Text("Quantity", Text.createStyle(12, "#736AFF", Text.TEXT_ALIGN_CENTER)));
    
  4. 最後,我們需要為 bar1 和 bar2 分別設定標籤,其設定方式如下:
      // 為 bar1 和 bar2 加上標籤
      bar1.setText("2008");
      bar2.setText("2009");
    
  5. 為了完整性,我們將完整的 JSP 程式碼列示如下:
    <%@page contentType="text/plain" pageEncoding="UTF-8"
            import="jofc2.*,
                    jofc2.model.*,
                    jofc2.model.elements.*,
                    jofc2.model.axis.*,
                    jofc2.model.elements.BarChart.*"%>
    <%
      Chart cht = new Chart();
    
      // 調整 title 的字體大小、顏色,以及 alignment
      cht.setTitle(new Text("亂數資料", Text.createStyle(20, "#9933FF", Text.TEXT_ALIGN_CENTER)));
    
      // 調整 X 軸的標籤
      XAxis labels = new XAxis();
      labels.addLabels("北區", "中區", "南區", "離島");
      cht.setXAxis(labels);  
    
      // 調整 Y 軸的標籤(目前只能英文)以及間距
      YAxis range = new YAxis();
      range.setRange(0, 60, 5);
      cht.setYAxis(range);
      cht.setYLegend(new Text("Quantity", Text.createStyle(12, "#736AFF", Text.TEXT_ALIGN_CENTER)));
      
      // 產生兩串資料,分別由 bar1 和 bar2 代表
      BarChart bar1 = new BarChart(BarChart.Style.NORMAL),
               bar2 = new BarChart(BarChart.Style.NORMAL);
      bar1.setColour("#993300");
      bar2.setColour("#669933");
    
      // 為 bar1 和 bar2 加上標籤
      bar1.setText("2008");
      bar2.setText("2009");
    
      for(int i=0; i<4 data-blogger-escaped-10="" data-blogger-escaped-1="" data-blogger-escaped-60="" data-blogger-escaped-ath.random="" data-blogger-escaped-bar1.addvalues="" data-blogger-escaped-bar1="" data-blogger-escaped-bar2.addvalues="" data-blogger-escaped-bar2="" data-blogger-escaped-cht.addelements="" data-blogger-escaped-cht.tostring="" data-blogger-escaped-gt="" data-blogger-escaped-i="" data-blogger-escaped-int="" data-blogger-escaped-out.println="" data-blogger-escaped-pre="">
    




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



沒有留言:

張貼留言