open flash chart--4

?

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());
   %>

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