使用JFreeChart製作美觀易懂的圖表 (J )

Size: px

Start display at page:

Download "使用JFreeChart製作美觀易懂的圖表 (J )"

及钱
5 years ago
Views:

使用 JFreeChart 製作美觀易懂的圖表 2004 年 10 月號本文難易程度 : 易難作審者 : 戴玉佩稿 : 吳修福相關資源與開發工具 : J2SDK 1.4.2 JFreeChart 0.9.

1 使用 JFreeChart 製作美觀易懂的圖表 2004 年 10 月號本文難易程度 : 易難作審者 : 戴玉佩稿 : 吳修福相關資源與開發工具 : J2SDK JFreeChart 文章編號 :J 出刊日期 :2004/10/28 前言 : 相關技術討論請至本電子雜誌開發工具技術討論區在開發應用系統時, 使用者常希望將系統中的資料, 以多樣豐富的統計圖表方式呈現, 讓原本平凡單調的資料, 能表達更深層的意義如此一來, 應用系統也因為能將分析的資料結果, 以更方便易懂多彩多樣的圖表介面表達而加分的 JFreeChart 就提供 Java 程式設計師一組免費下載的統計圖表程式庫它提供了多種統計圖表, 如 :pie chart bar chart line chart scatter plot time series chart Gantt chart CandleStick chart 另外 JFreeChart 中也提供了很多的類別函式讓 Programmer 能客制化圖表的樣式效果而且 JFreeChart 所產生的圖表物件能展現在 windows application, applet 上, 也能透過 Java Servlets/ JSP 顯示在網頁上, 甚至能將圖表 export 成為 PDF 檔案現在我們就來開始體驗一下它的威力吧! 下載安裝發行人 : 劉致宏總編 : 張智凱主編 : 許嘉仁社務顧問 : 邱世萍技術編輯 : 梅玉成編輯顧問 : 申建忠張書源潘家羲吳修福戴谷洲戴玉佩美術設計 : 魏吉芝張鈴玉廖怡珍行銷企劃 : 曹雅瑩陳秀慧許克臻發行服務 : 謝佩珊劉清滿王芳綺劉佩玟發行所 : 毅達行銷顧問服務股份有限公司客戶服務 : service@javatwofriday.com.tw 要使用這組程式庫, 請先執行下述的動作 : 至網址 : 下載檔案 : Unix 環境下載 :jfreechart tar.gz Windows 環境下載 :jfreechart zip 檔案解壓縮後, 找出其中的兩個.jar 檔案 : 本電子刊物之所載標誌名稱分屬各該公司所有, 非經授權請勿轉載使用, 版權所有如經查證依法律追訴 1. jcommon jar:jcommon class library, 提供 JFreeChart 底層 1

所需的各項類別 2. jfreechart-0.9.21.jar: 這是 JFreeChart 主要的類別程式庫, 包含 : org.jfree.chart: 圖表樣式的介面或類別定義 org.jfree.data: 圖表所需的資料結構資料集等介面或類別定義我們將介紹的主要物件多半是在這兩大 Package 中將這兩個.

org/jfreechart/javadoc/index.html 開始第一個圖表我們先從一個簡單的 BarChart( 長條圖 ) 開始吧!

2 所需的各項類別 2. jfreechart jar: 這是 JFreeChart 主要的類別程式庫, 包含 : org.jfree.chart: 圖表樣式的介面或類別定義 org.jfree.data: 圖表所需的資料結構資料集等介面或類別定義我們將介紹的主要物件多半是在這兩大 Package 中將這兩個.jar 檔案設到 classpath 或加入你所使用的 java IDE 工具的程式庫中, 就可以開始在你的 java 應用系統中加入統計圖表了在使用這些 API 時, 你可以參考右列網址的 API 說明文件 : 開始第一個圖表我們先從一個簡單的 BarChart( 長條圖 ) 開始吧! 這裡有一個銷售資料表, 接下來的例子就是要將這些資料顯示在 BarChart 上咖啡啤酒果汁汽水茶第一季第二季第三季表 1: 範例資料 2

3 我們會在一個 JFrame 上顯示這個 BarChart, 所以程式一開始會 import java.awt.* javax.swing.* 而第三行到第五行所 import 的三組 Package 則是 JFreeChart 所要用的類別封裝你可以看到我們是在這個 Class 的 Constructor 中, 完成這個 BarChart 的主要流程 : 1 import java.awt.*; 2 import javax.swing.*; 3 import org.jfree.chart.*; 4 import org.jfree.chart.plot.*; 5 import org.jfree.data.category.*; 6 7 public class FirstBarChart extends JFrame{ 8 public FirstBarChart(){ 9 // 步驟 1. 建立 Dataset 10 CategoryDataset dataset = setdataset(); 11 // 步驟 2. 建立 BarChart 12 JFreeChart chart = createchart(dataset); 13 // 步驟 3. 將所建立的 BarChart 放在 ChartPanel 上, 並設定大小 14 ChartPanel chartpanel = new ChartPanel(chart); 15 chartpanel.setpreferredsize(new Dimension(500, 270)); 16 // 步驟 4. 將 Panel 放在 JFrame 的 ContentPane 上整理畫面, 顯示 JFrame 17 getcontentpane().add(chartpanel); 18 pack(); 19 setvisible(true); 20 setdefaultcloseoperation(jframe.exit_on_close); 21 } 程式碼列表 1:FirstBarChart Constructor 程式接下來我們詳細看一下程式碼列表 1 步驟 1 步驟 2 兩個 private methods 的程式內容 1. 建立 CategoryDataset 資料集物件 : 在建立統計圖表前, 我們要先把來源資料建立到圖表物件指定的 Dataset 中 BarChart 指定的 Dataset 是任何實作 org.jfree.data.category.categorydataset 介面的 Dataset 類別上, 因此我們建立了一個 DefaultCategoryDataset 類別的實體, 並用這個物件的 addvalue 函式來填入統計資料 : 31 private CategoryDataset setdataset() { 32 // 將 rows 資料存入陣列 String[] series = {" 第一季 ", " 第二季 ", " 第三季 "}; 34 // 將 columns 資料存入陣列 String[] category = {" 咖啡 ", " 啤酒 ", " 果汁 ", " 汽水 ", " 茶 "}; 36 // 將 table 資料存入陣列 double[][] data = {{8.0, 5.5, 10.2}, {4.2, 7.8, 23.0} 38, {3.5, 5.3, 6.8}, {9.2, 14.5, 10.7}, {6.6, 8.3, 7.9}}; 39 // 續下頁 3

40 41 // 建立 dataset 實體... 42 DefaultCategoryDataset dataset = new DefaultCategoryDataset(); 43 // 將資料填入 dataset 實體... 44 for (int i = 0; i < category.length; i++) { 45 for (int j = 0; j < series.

4 40 41 // 建立 dataset 實體 DefaultCategoryDataset dataset = new DefaultCategoryDataset(); 43 // 將資料填入 dataset 實體 for (int i = 0; i < category.length; i++) { 45 for (int j = 0; j < series.length; j++) { 46 dataset.addvalue(data[i][j], series[j], category[i]); 47 return dataset; 48 } 程式碼列表 2:FirstBarChart.setDataSet Method 2. 建立 BarChart 圖表物件 : JFreeChart 在 org.jfree.chart.chartfactory 類別中提供了一些方便的 static methods 可以讓 prorammer 將圖表物件建立起來, 這裡我們就用了 ChartFactory. createbarchart 來建立 BarChart 物件 : 51 private JFreeChart createchart(final CategoryDataset dataset){ 52 JFreeChart chart = ChartFactory.createBarChart( 53 "2004 年第一季 ~ 第三季銷售圖表 ", // 圖表標題 54 " 產品類型 ", // X 軸標題 55 " 銷售量 ( 單位 : 萬箱 )", // Y 軸標題 56 dataset, // dataset 物件變數 57 PlotOrientation.VERTICAL, // Bar 的方向 58 true, // 加入圖例說明? 59 true, // 顯示提示資料? 60 false // URLs? 61 ); 62 return chart; 63 } 程式碼列表 3:FirstBarChart.createChart Method 簡單吧! 先試試這個例子吧! 這段程式編譯執行後, 就會看到這個畫面 : 將游標移到 Bar 上即會出現提示資料圖例說明圖 1:FirstBarChart 4

5 介紹 4 個 JfreeChart 常用圖表從上述的例子中, 你應該可以發現,BarChart 的處理方式, 是先將統計資料建立成 Dataset, 然後建立 BarChart 圖表物件, 透過這個物件來呈現 Dataset 中的資料, 接著將圖表物件放在 ChartPanel 上並設定 size, 再把 ChartPanel 加到 Frame, 顯示畫面即可看到效果其實,JFreeChart 所提供的幾個基本圖表物件, 在處理上大致雷同只是不同樣式的統計圖表, 底層對應的 Dataset 就不太一樣, 裡面的資料結構也略有不同 ; 在建立圖表物件時,createXXXChart 函式的參數也有一些差別只要能掌握這些差異, 很快就能變化出不同的效果接下來, 我們下就先把一些常用圖表的 Dataset 及 createxxxchart 函式整理出來, 以供大家參考測試 : Bar Chart: Dataset 介面 :org.jfree.data.category.categorydataset, 可以用 new org.jfree.data.category.categorydataset() 來建立物件填入資料用 method:addvalue(numbervalue, rowkey, colkey) 建立圖表 :org.jfree.chart.chartfactory.createbarchart( 圖表標題字串, X 軸標題字串, Y 軸標題字串, CategoryDataset 物件, 長條圖垂直 / 水平方向, 是否顯示圖例說明, 是否顯示提示資料, 是否產生 URL) Line Chart: Dataset 介面 :org.jfree.data.category.categorydataset, 可以用 new org.jfree.data.category.categorydataset() 來建立物件填入資料用 method:addvalue(numbervalue, rowkey, colkey) 建立圖表 :ChartFactory.createLineChart( 圖表標題字串, X 軸標題字串, Y 軸標題字串, CategoryDataset 物件, 長條圖垂直 / 水平方向, 是否顯示圖例說明, 是否顯示提示資料, 是否產生 URL) 你可以將剛才的例子中, 把 ChartFactory.createBarChart 改為 ChartFactory.createLineChart, 編譯執行後, 你就會看到原來的 BarChart 變成 LineChart 了 ( 如圖 2) 圖 2:LineChart 5

6 Pie Chart: Dataset 介面 :org.jfree.data.category.piedataset, 可以用 new org.jfree.data.general.defaultpiedataset () 31 private CategoryDataset setdataset() { 來建立物件 32 DefaultPieDataset defaultpiedataset = new DefaultPieDataset(); 填入資料用 method:setvalue(key, numbervalue) 33 defaultpiedataset.setvalue(" 北區 ", new Double( D)); 建立圖表 :ChartFactory.createPieChart( 34 defaultpiedataset.setvalue(" 中區 ", new Double( D)); 圖表標題字串,PieDataset 物件, 35 defaultpiedataset.setvalue(" 南區 ", new Double( D)); 是否顯示圖例說明, 是否顯示提示資料, 是否產生 URL) 36 defaultpiedataset.setvalue(" 東區 ", new Double( D)); 你可以在上述的程式範例中, 先將第一段程式中第 10 行宣告的 dataset 變數的資料型態換成 37 return defaultpiedataset; org.jfree.data.category.piedataset, 並把 setdataset 和 createchart 兩支 method 改為下列程式內容 : 38 } 表四 FirstPieChart.setDataset Method 40 private static JFreeChart createchart(piedataset piedataset) { 41 JFreeChart jfreechart = ChartFactory.createPieChart( 42 " 飲料銷售分佈圖 ",piedataset, 43 true, true, false); 44 return jfreechart; 45 } 程式碼列表 4:FirstPieChart.createChart Method 編譯執行後, 你就會看到原來的 BarChart 變成 PieChart 了圖 3:FirstPieChart Time Series Chart: 所謂 Time Series Chart 即是以時間為軸, 將資料線性展開 Dataset 介面 :org.jfree.data.xy.xydataset, 可以用 new org.jfree.data.time.timeseriescollection () 來建立物件 6

7 填入資料用 method:addseries (TimeSeries series)? 什麼是 TimeSeries 類別 : 因為上述的 TimeSeriesCollection 中可以放多組不同的 TimeSeries 資料, 這些時序資料將透過 Time Series Chart 同時表現在統計圖上, 而各組時序資料則是先加到個別的 TimeSeries 物件中, 在加到 TimeSeriesCollection 裡請看這段範例程式 : 42 private XYDataset setdataset() 43 { 44 // 建立第一組資料 45 TimeSeries timeseries = new TimeSeries( 46 " 產品單位售價 ", org.jfree.data.time.month.class); 47 timeseries.add(new Month(2, 2001), D); timeseries.add(new Month(7, 2002), D); 63 // 建立第二組資料 64 TimeSeries timeseries1 = new TimeSeries( 65 " 產品單位成本 ", org.jfree.data.time.month.class); 66 timeseries1.add(new Month(2, 2001), D); timeseries1.add(new Month(6, 2002), 108.8D); 83 timeseries1.add(new Month(7, 2002), D); // 將這兩組資料放到 TimeSeriesCollection 中 86 TimeSeriesCollection timeseriescollection = 87 new TimeSeriesCollection(); 88 timeseriescollection.addseries(timeseries); 89 timeseriescollection.addseries(timeseries1); 90 timeseriescollection.setdomainispointsintime(true); 91 return timeseriescollection; 92 } 程式碼列表 5:FirstTimeSeries.setDataset Method 建立圖表 :ChartFactory.createTimeSeriesChart 93 private JFreeChart createchart(xydataset xydataset) 94 { 95 JFreeChart jfreechart = ChartFactory.createTimeSeriesChart( 96 "Legal & General Unit Trust Prices", 97 " 月份 "," 單價 ",xydataset, 98 true, true, false); 程式碼列表 6:FirstTimeSeries.createChart Method 為了要標示出 Time Series Chart 中每一個資料項, 並把時間資料顯示為 xxxx 年 x 月, 我們在上述程式的第 100 行插入了下列程式碼 : 7

8 100 // 明確標出每個資料項 101 XYPlot plt = jfreechart.getxyplot(); 102 org.jfree.chart.renderer.xy.xyitemrenderer xyitemrenderer = plt.getrenderer(); 103 if(xyitemrenderer instanceof StandardXYItemRenderer){ 104 StandardXYItemRenderer standardxyitemrenderer = 105 (StandardXYItemRenderer)xyitemrenderer; 106 standardxyitemrenderer.setplotshapes(true); 107 standardxyitemrenderer.setshapesfilled(true); 108 standardxyitemrenderer.setitemlabelsvisible(true); 109 } 110 // 設定時間軸的日期格式 111 DateAxis dateaxis = (DateAxis)plt.getDomainAxis(); 112 dateaxis.setdateformatoverride(new SimpleDateFormat("yyyy 年 MMM")); 程式碼列表 7:FirstTimeSeries.createChart Method, 設定資料項完成的 Time Series Chart: 圖 4:FirstTimeSeries 結語在前面的介紹中, 讓大家看到了 JFreeChart 所提供的幾個常用的統計圖表, 不過這可是開胃菜而已,JFreeChart 所能完成的當然還有更多而且 JFreeChart 是一個正在持續發展的 Open Source, 每個人都可以繼承這裡的圖表類別, 延伸加強其功能至今, 已有來自世界各地, 超過 50 位的開發者陸續貢獻了他們的程式碼我們將再介紹 JFreeChart 更多好看好用的統計圖表及功能, 請大家拭目以待喔! 戴玉佩恆逸資訊專任講師專長 :Java 程式設計 Servlet/JSP 開發物件導向技術 JBuilder JSE 4.0 等開發工具認證 :Sun SCJP Sun SCWCD 8

任務二 : 產生 20 個有炸彈的磚塊, 放在隨機的位置編輯 Block 類別的程式碼 import greenfoot.; // (World, Actor, GreenfootImage, Greenfoot and MouseInfo) Write a description of class

任務二 : 產生 20 個有炸彈的磚塊, 放在隨機的位置編輯 Block 類別的程式碼 import greenfoot.; // (World, Actor, GreenfootImage, Greenfoot and MouseInfo) Write a description of class 踩地雷遊戲高慧君南港高中開啟專案 MineSweep 任務一 : 產生 30X20 個磚塊編輯 Table 類別的程式碼 import greenfoot.; // (World, Actor, GreenfootImage, Greenfoot and MouseInfo) import java.util.arraylist; Write a description of class MyWorld