open flash chart--7

 

JOFC2 - LineChart 和 PieChart

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 的合用方式。在本文中，我們簡單的介紹 LineChart 和 PieChart 的產生方式。由於這些圖表的產生方式跟之前 BarChart 非常類似，我們大多只列示其程式碼，並加上執行後的範例畫面。

在進一步說明範例之前，我們要先說明的是：我們只針對跟之前不同的地方進行說明，相同的部分就不再贅述！

1. LineChart：jofc2.model.elements.LineChart 跟 BarChart 一樣，也是 jofc2.model.elements.Element 的子類別，因此使用的方式與 BarChart 非常類似。依據 JOFC2 LineChart 的文件，我們之前介紹 LineChart 的 Style 共有 LineChart.Style.DOT、LineChart.Style.HOLLOW、 以及 LineChart.Style.NORMAL 三種；其中，只有 NORMAL 有效果，其它的，就算可以產生 json 檔，卻無法顯示。後來在我有空的時候，我仔細檢查了 JOFC2 LineChart 的原始碼之後，我發現 原來文件和原始碼是不一致的，請以下列的方式來開發，我也強烈懷疑，之前測不出來的效果，可能也是這個原因所造成的）。

   在下列程式碼中，我們特別針對 LineChart 物件的產生方式說明一下；根據 JOFC2 的原始碼，我們說明在設定上彈性最高的一種建構元，該建構元總共有六個參數；

   1. 第一個參數用來指定線型圖上每一個資料點的形狀：支援的形狀總共有 BOW, DOT, HALLOW_DOT, ANCHOR, STAR, 和 SOLID_DOT 六種。在範例中，我們使用了 STAR 和 HALLOW_DOT。
   2. 第二個參數用來指定線型圖上每一個資料點的顏色：設定的方式是利用 #RGB 的方式；在範例中，我們分別指定紫色和紅色。
   3. 第三個參數用來指定線型圖上每一個資料點的大小；在範例中，我們分別指定的大小為 8 和 5。
   4. 第四個參數用來指定線型圖上每一個資料點與兩端線的距離；在範例中，我們分別指定的距離是 0 （也就是不留間隙） 和 10。
   5. 第五個參數用來設定轉動（rotate）每一個資料形狀的角度；在範例中，我們讓 STAR（星狀圖）轉動 90 （從畫面呈現的效果，90 應該不是代表 90 度）；而 DOT（圓餅）不轉動。
   6. 第四個參數用來設定每一個資料點與兩端線的距離是否為真。目前測不出任何效果。

   如果讀者依據我們的程式執行，應該可以看到類似如下的畫面；我們強烈建議讀者盡量測試各種的效果。

   而完整的程式碼列示如下：

   <%@page  contentType="text/plain" pageEncoding="UTF-8"
           import="jofc2.*,
                   jofc2.model.*,
                   jofc2.model.elements.*,
                   jofc2.model.axis.*,
                   jofc2.model.elements.LineChart.*"%>
   <%
     Chart cht = new Chart("存貨量線型圖");
     XAxis labels = new XAxis();
     labels.addLabels("北區", "中區", "南區", "離島");
     cht.setXAxis(labels);
     YAxis range = new YAxis();
     range.setRange(0, 60, 10);
     cht.setYAxis(range);
   
     // 初始化 LineChart，並分別設定線型圖的各種樣子
     // LineChart.Style 的第一個參數指的是每一個點的形狀；總共有 BOW, DOT, HALLOW_DOT,
     //                 ANCHOR, STAR, 和 SOLID_DOT
     // 第二個參數指的是點的顏色
     // 第三個參數指的是點的大小
     // 第四個參數指的是 halo （點以及線之間的距離）
     // 第五個參數指的是旋轉（rotate）點的角度
     // 第六個參數指的是是否要讓 halo 的值生效；目前測不出效果
     LineChart lin1 = new LineChart(new LineChart.Style(LineChart.Style.Type.STAR, 
                                    "#CC00CC", 8, 0, 90, false));
     LineChart lin2 = new LineChart(new LineChart.Style(LineChart.Style.Type.HALLOW_DOT, 
                                    "#CC0000", 5, 10, 0, true));
   
     // 設定線的的顏色
     lin1.setColour("#669900");
     lin2.setColour("#6666FF");
   
     // 設定線的的標題
     lin1.setText("存貨量");
     lin2.setText("價格");
   
     for(int i=0; i<4; i++) {
       lin1.addValues((int) (Math.random() * 10) + 1);
       lin2.addValues((int) (Math.random() * 60) + 1);
     }
   
     cht.addElements(lin1, lin2);
     out.println(cht.toString());
   %>

2. PieChart: jofc2.model.elements.PieChart 跟 BarChart 一樣，是 jofc2.model.elements.Element 的子類別，但是它跟之前介紹過的 BarChart 和 LineChart 有幾個比較不同的地方：第一個 PieChart 是一個圓餅圖，在一般的情形下，大概只有一系列的資料，而不會有多群的 Bars 或者 Lines；第二個差異在於 PieChart 沒有明顯的 X 和 Y 軸，因此一些 X 和 Y 軸的設定沒有必要。

   PieChart 跟 BarChart 和 LineChart 一樣，可以直接把想表現的數值利用 addValues() 方法加進去，缺點是圓餅圖中的每一片（slice）的標籤就是該片的數值，不太方便。因此，可以使用如下的方式：

     pie.addSlice((int) (Math.random() * 10) + 1, "北區");

   將數值以及其相對應的標籤一起家進去。如果讀者依據本程式執行，應該可以看到如下的畫面：
   

   完整的程式碼如下：

   <%@page  contentType="text/plain" pageEncoding="UTF-8"
           import="jofc2.*,
                   jofc2.model.*,
                   jofc2.model.elements.*,
                   jofc2.model.axis.*,
                   jofc2.model.elements.PieChart.*"%>
   <%
     Chart cht = new Chart("存貨量圓型圖");
   
     PieChart pie = new PieChart();
     pie.addSlice((int) (Math.random() * 10) + 1, "北區");
     pie.addSlice((int) (Math.random() * 10) + 1, "中區");
     pie.addSlice((int) (Math.random() * 10) + 1, "南區");
     pie.addSlice((int) (Math.random() * 10) + 1, "離島");
     
     // 請嘗試移除上列四個 pie.addSlice(), 並使用下列數值以觀察不同結果
   /*
     for(int i=0; i<4; i++) {
       pie.addValues((int) (Math.random() * 10) + 1);
     }
   */
   
     // 設定出現的顏色順序 (請嘗試定義不同數目的顏色試試看)
     pie.setColours("#669900", "#6666FF", "#6699FF", "#666600");
   
     // 設定圓圈的大小
     pie.setRadius(100);
   
     cht.addElements(pie);
     out.println(cht.toString());
   %>

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