XML Technology Research Lab: JOFC2 - LineChart 和 PieChart

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 非常類似，我們大多只列示其程式碼，並加上執行後的範例畫面。在進一步說明範例之前，我們要先說明的是：我們只針對跟之前不同的地方進行說明，相同的部分就不再贅述！

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 data-blogger-escaped-10="" data-blogger-escaped-1="" data-blogger-escaped-60="" data-blogger-escaped-ath.random="" 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-lin1.addvalues="" data-blogger-escaped-lin1="" data-blogger-escaped-lin2.addvalues="" data-blogger-escaped-lin2="" data-blogger-escaped-out.println="" data-blogger-escaped-pre="">
```

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 data-blogger-escaped-10="" data-blogger-escaped-1="" data-blogger-escaped-ath.random="" 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-pie.addvalues="" data-blogger-escaped-pie.setcolours="" data-blogger-escaped-pie.setradius="" data-blogger-escaped-pie="" data-blogger-escaped-pre="">

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

XML Technology Research Lab

2012年9月26日星期三

JOFC2 - LineChart 和 PieChart

JOFC2 - LineChart 和 PieChart

沒有留言:

張貼留言

2012年9月26日 星期三

JOFC2 - LineChart 和 PieChart

JOFC2 - LineChart 和 PieChart

沒有留言:

張貼留言

2012年9月26日星期三