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 的原始碼,我們說明在設定上彈性最高的一種建構元,該建構元總共有六個參數;
- 第一個參數用來指定線型圖上每一個資料點的形狀:支援的形狀總共有 BOW, DOT, HALLOW_DOT, ANCHOR, STAR, 和 SOLID_DOT 六種。在範例中,我們使用了 STAR 和 HALLOW_DOT。
- 第二個參數用來指定線型圖上每一個資料點的顏色:設定的方式是利用 #RGB 的方式;在範例中,我們分別指定紫色和紅色。
- 第三個參數用來指定線型圖上每一個資料點的大小;在範例中,我們分別指定的大小為 8 和 5。
- 第四個參數用來指定線型圖上每一個資料點與兩端線的距離;在範例中,我們分別指定的距離是 0 (也就是不留間隙) 和 10。
- 第五個參數用來設定轉動(rotate)每一個資料形狀的角度;在範例中,我們讓 STAR(星狀圖)轉動 90 (從畫面呈現的效果,90 應該不是代表 90 度);而 DOT(圓餅)不轉動。
- 第四個參數用來設定每一個資料點與兩端線的距離是否為真。目前測不出任何效果。
如果讀者依據我們的程式執行,應該可以看到類似如下的畫面;我們強烈建議讀者盡量測試各種的效果。
而完整的程式碼列示如下:
<%@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()); %>
- 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