open flash chart--5

?

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.TEXT_ALIGN_CENTER)));
   
     // 調整 X 軸的標籤
     XAxis labels = new XAxis();
     labels.addLabels("北區","離島");
     cht.setXAxis(labels);  
   
     // 調整 Y 軸的標籤（目前只能英文）以及間距
     YAxis range = new YAxis();
     range.setRange(0,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; i++) {
       bar1.addValues((int) (Math.random() * 10) + 1);
       bar2.addValues((int) (Math.random() * 60) + 1);
     }
     cht.addElements(bar1,bar2);
   
     out.println(cht.toString());
   %>

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