JFreeChart是一組功能強大、靈活易用的 Java繪圖 API,使用它可以生成多種通用性的報表,包括柱狀圖、餅圖、曲線圖等。它能夠用在 Swing和 Web等中製作自定義的圖表或報表,並且得到廣泛的應用。本文將通過引領讀者學習在JFreeChart中 柱狀圖 、 餅圖 和曲線圖的進階應用,來達到熟練使用 JFreeChart的目的。
一. 下載與環境配置
1. 下載 JFreeChart
JFreeChart是開放源代碼的免費軟件。可以到其官方網站http://sourceforge.net/projects/jfreechart/files/上下載最新版本,本文使用1.0.10版。
說明: (1) source目錄:爲 jfreechart的源碼目錄;不會的主要看這裏。因爲他的文檔是收費的。
(2) lib目錄:爲包目錄,我們需要關注的包爲 jfreechart-1.0.10.jar、 gnujaxp.jar和 jcommon-1.0.13.jar這三個包;
(3)根目錄下的 jfreechart-1.0.10-demo.jar是例子程序,大家雙擊後可看到其中有很多例子的運行結果。
2. 環境配置
我們在 MyEclipse中創建一個名爲 jfreechart的 Web工程。將下載的 JFreeChart1.0.6下 lib目錄下的 jar包拷貝到WebRoot/WEB-INF/lib目錄下。另外還需要在 web.xml文件中增加如下配置:
1
2
3
4
5
6
7
8
|
< servlet > < servlet-name >DisplayChart</ servlet-name > < servlet-class >org.jfree.chart.servlet.DisplayChart</ servlet-class > </ servlet > < servlet-mapping > < servlet-name >DisplayChart</ servlet-name > < url-pattern >/DisplayChart</ url-pattern > </ servlet-mapping > |
二. 開發柱狀圖
在 WebRoot目錄下建立 bar目錄,用來存放柱狀圖的各個例子。首先在該目錄下建立一個 pillar1.jsp文件,讓我們來看一個簡單的柱狀圖的例子,修改後的 pillar1.jsp的內容如下所示:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<%@
page language= "java"
contentType= "text/html;charset=GBK"
pageEncoding= "utf-8" %> <%@
page import ="org.jfree.chart.ChartFactory,org.jfree.chart.JFreeChart,org.jfree.chart.plot.PlotOrientation, org.jfree.chart.servlet.ServletUtilities,org.jfree.data.category.DefaultCategoryDataset"%> <% DefaultCategoryDataset
dataset = new
DefaultCategoryDataset(); dataset.addValue( 510 , "深圳" , "蘋果" ); dataset.addValue( 320 , "深圳" , "香蕉" ); dataset.addValue( 580 , "深圳" , "橘子" ); dataset.addValue( 390 , "深圳" , "梨子" ); JFreeChart
chart = ChartFactory.createBarChart3D( "水果銷量統計圖" , "水果" , "銷量" , dataset, PlotOrientation.VERTICAL, false , false , false ); String
filename = ServletUtilities.saveChartAsPNG(chart, 420 , 300 , null ,
session); String
graphURL = request.getContextPath() + "/DisplayChart?filename="
+ filename; %> <img
src= "<%=
graphURL %>"
width= 420
height= 300
border= 0 > |
在瀏覽器中輸入地址: http://localhost:8080/jfree/bar/pillar1.jsp ,可看到如下3D柱狀圖:
上面的這個柱狀圖比較簡單,稍顯單調,在有些情況下,我們需要用不同顏色來表示不同的種類,或者在種類上標上具體數值,亦或需要加上 3D水晶效果。下面讓我們來做更深一步的探討。接下來讓我們看一個用不同顏色來表示不通種類的例子。在 WebRoot的 bar目錄下新建 pillar2.jsp頁面,將其代碼修改如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<%@
page language= "java"
contentType= "text/html;charset=GBK"
pageEncoding= "utf-8" %> <%@
page import ="org.jfree.chart.*,org.jfree.data.category.*, org.jfree.chart.servlet.*,org.jfree.chart.plot.PlotOrientation,org.jfree.data.general.DatasetUtilities"%> <% double [][]
data = new
double [][]
{{ 1320 },
{ 720 },
{ 830 },
{ 400 }}; String[]
rowKeys = { "蘋果" , "香蕉" , "橘子" , "梨子" }; String[]
columnKeys = { "" }; CategoryDataset
dataset = DatasetUtilities.createCategoryDataset(rowKeys, columnKeys, data); JFreeChart
chart = ChartFactory.createBarChart3D( "水果銷量統計圖" , "水果" , "銷量" , dataset, PlotOrientation.VERTICAL, true , false , false ); String
filename = ServletUtilities.saveChartAsPNG(chart, 450 , 300 , null ,
session); String
graphURL = request.getContextPath() + "/DisplayChart?filename="
+ filename; %> <img
src= "<%=
graphURL %>"
width= 450
height= 300
border= 0 > |
運行 pillar2.jsp頁面的效果如下圖所示:
對比該例與前例,可看出 createBarChart3D 的 倒數第三個參數修改成了 true,該參數可用來顯示下方的用例 。上兩例我們顯示的只是一個城市的水果銷量,有時候我們有對比顯示多個城市的不同肉類,只要將上例稍作修改即可。例如要在圖中表示鶴壁、西安、深圳、北京四個城市的四種水果的銷售情況,只需要將如下三句稍做修改:
1
2
3
|
double [][]
data = new
double [][]
{{ 1230 , 1110 , 1120 , 1210 },
{ 720 , 750 , 860 , 800 },
{ 830 , 780 , 790 , 700 ,},
{ 400 , 380 , 390 , 450 }}; String[]
rowKeys = { "蘋果" , "香蕉" , "橘子" , "梨子" }; String[]
columnKeys = { "鶴壁" , "西安" , "深圳" , "北京" }; |
運行pillar3. jsp 頁面,可看到如下界面:
上述幾例中,在某個柱子上都沒有顯示相應的數值,下面讓我們爲每個柱子都加上它的數值,我們新建一個 pillar4.jsp頁面,其內容如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
<%@
page language= "java"
contentType= "text/html;charset=GBK"
pageEncoding= "utf-8" %> <%@
page import ="org.jfree.chart.*,org.jfree.chart.plot.*,org.jfree.chart.labels.*, org.jfree.data.category.*,java.awt.*,org.jfree.ui.*,org.jfree.chart.renderer.category.BarRenderer3D, org.jfree.chart.servlet.*,org.jfree.chart.plot.PlotOrientation,org.jfree.data.general.DatasetUtilities"%> <% double [][]
data = new
double [][]
{{ 1230 , 1110 , 1120 , 1210 },
{ 720 , 750 , 860 , 800 },
{ 830 , 780 , 790 , 700 ,},
{ 400 , 380 , 390 , 450 }}; String[]
rowKeys = { "蘋果" , "香蕉" , "橘子" , "梨子" }; String[]
columnKeys = { "鶴壁" , "西安" , "深圳" , "北京" }; CategoryDataset
dataset = DatasetUtilities.createCategoryDataset(rowKeys, columnKeys, data); JFreeChart
chart = ChartFactory.createBarChart3D( "水果銷量統計圖" , "水果" , "銷量" , dataset, PlotOrientation.VERTICAL, true , true , false ); CategoryPlot
plot = chart.getCategoryPlot(); //設置網格背景顏色 plot.setBackgroundPaint(Color.white); //設置網格豎線顏色 plot.setDomainGridlinePaint(Color.pink); //設置網格橫線顏色 plot.setRangeGridlinePaint(Color.pink); //顯示每個柱的數值,並修改該數值的字體屬性 BarRenderer3D
renderer = new
BarRenderer3D(); renderer.setBaseItemLabelGenerator( new
StandardCategoryItemLabelGenerator()); renderer.setBaseItemLabelsVisible( true ); //默認的數字顯示在柱子中,通過如下兩句可調整數字的顯示 //注意:此句很關鍵,若無此句,那數字的顯示會被覆蓋,給人數字沒有顯示出來的問題 renderer.setBasePositiveItemLabelPosition( new
ItemLabelPosition(ItemLabelAnchor.OUTSIDE12, TextAnchor.BASELINE_LEFT)); renderer.setItemLabelAnchorOffset(10D); //設置每個地區所包含的平行柱的之間距離 renderer.setItemMargin( 0.4 ); plot.setRenderer(renderer); //設置地區、銷量的顯示位置 //將下方的“肉類”放到上方 //plot.setDomainAxisLocation(AxisLocation.TOP_OR_RIGHT); //將默認放在左邊的“銷量”放到右方 //plot.setRangeAxisLocation(AxisLocation.BOTTOM_OR_RIGHT); String
filename = ServletUtilities.saveChartAsPNG(chart, 500 , 300 , null ,
session); String
graphURL = request.getContextPath() + "/DisplayChart?filename="
+ filename; %> <img
src= "<%=
graphURL %>"
width= 530
height= 320
border= 0 > |
運行 pillar4.jsp頁面的效果如下圖所示:
以上4個案例都是縱向的柱子。下面在看一個橫向的列子:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
<%@
page language= "java"
contentType= "text/html;charset=GBK"
pageEncoding= "utf-8" %> <%@
page import ="org.jfree.chart.*,org.jfree.chart.plot.*,org.jfree.chart.labels.*, org.jfree.data.category.*,java.awt.*,org.jfree.ui.*,org.jfree.chart.renderer.category.BarRenderer, org.jfree.chart.servlet.*,org.jfree.chart.plot.PlotOrientation"%> <% DefaultCategoryDataset
dataset = new
DefaultCategoryDataset(); dataset.addValue( 390 , "中國" , "河南" ); dataset.addValue( 220 , "中國" , "河北" ); dataset.addValue( 510 , "中國" , "遼寧" ); dataset.addValue( 580 , "中國" , "山東" ); dataset.addValue( 320 , "中國" , "山西" ); dataset.addValue( 410 , "中國" , "陝西" ); JFreeChart
chart = ChartFactory.createBarChart( "蘋果年產量統計圖" , "省份" , "產量(萬噸)" , dataset, PlotOrientation.HORIZONTAL, false , false , false ); CategoryPlot
plot = chart.getCategoryPlot(); //設置網格背景顏色 plot.setBackgroundPaint(Color.white); //設置網格豎線顏色 plot.setDomainGridlinePaint(Color.pink); //設置網格橫線顏色 plot.setRangeGridlinePaint(Color.pink); //顯示每個柱的數值,並修改該數值的字體屬性 BarRenderer
renderer = new
BarRenderer(); renderer.setBaseItemLabelGenerator( new
StandardCategoryItemLabelGenerator()); renderer.setBaseItemLabelsVisible( true ); //默認的數字顯示在柱子中,通過如下兩句可調整數字的顯示 //注意:此句很關鍵,若無此句,那數字的顯示會被覆蓋,給人數字沒有顯示出來的問題 renderer.setBasePositiveItemLabelPosition( new
ItemLabelPosition(ItemLabelAnchor.OUTSIDE3, TextAnchor.BASELINE_RIGHT)); renderer.setItemLabelAnchorOffset(20D); plot.setRenderer(renderer); String
filename = ServletUtilities.saveChartAsPNG(chart, 500 , 300 , null ,
session); String
graphURL = request.getContextPath() + "/DisplayChart?filename="
+ filename; %> <img
src= "<%=
graphURL %>"
width= 500
height= 300
border= 0 > |
運行pillar5.jsp效果如下:
至此關於柱狀圖的列子先到這裏。後面會在寫餅圖和曲線圖。敬請期待。
注意:jfreechart的很多版本不兼容,請大家在運行此例時確認下載了對應的版本。