作者: BUILDER.COM
JSP提供了許多簡單實用的工具,其中包括從資料庫中讀出數據,發送數據,並且能夠把結果顯示在一個餅狀圖形。現在讓我們來看看這簡單又實用的方法。
你所需要的東西
為了能正確運行這一文章相關的範例,你必須需要JDK 1.2或更高的版本、一個關係資料庫管理系統、一個JSP網路伺服器。我都是在Tomcat調試這些例子,同時也使用了Sun Java 2 SDK發布的com.sun.image.codec.jpegclasses。
資料庫設計假設你在一家從事銷售新鮮水果的公司上班,公司出售的水果包括:蘋果、桔子、葡萄。現在你的老闆想用一個餅狀圖形顯示每一種水果的總出售量,餅狀圖形能使每種產品的銷售情況一目了然,老闆可以迅速掌握公司的產品成交情況。
表A使用了本文中的兩種資料庫清單。第一種清單(Products)包含所有銷售產品的名稱;第二種清單(Sales)包含每種產品對應的銷售量。
產品(Products)清單包含productID和productname兩個域。銷售(Sales)清單包含saleID, productID,以及總額。銷售清單中的productID提供了這兩個清單之間的關聯。銷售清單中的總額包含了每一次出售的現金金額,這些金額以浮點型資料出現。
表B中的getProducts()方法連接了兩個資料庫,並把所有的產品名稱保存在數組中,我設定以下的資料庫規則:
ProductID在產品列表中最獨特,也是最關鍵;
ProductID對於第一個記錄的值為0;
所有之後的連續的記錄都是累積的,所以第二個記錄的productID為1,第三個記錄的productID為2,以此類推。
這些資料庫規則允許在product數組中儲存數據,如下所示:
arr[rs.getInt("productID")] = rs.getString("productname");
一些資料庫管理系統在預設情況下就允許資料的自動累加或自動排序。當你在設計資料庫時,一定先找出你的資料庫管理系統遵循哪些規則,例如自動累加,自動排序等。
取得總額銷售量
在多數情況下,銷售清單中會有很多個記錄,所以存取資料庫的快速性和高效性顯得非常重要。現在我們只需要存取資料庫中每種產品的總額銷售量。
表C中的getSales()方法與資料庫連接並傳回一個數組,這個數組包含每種產品的總額出售量。當getSales()遍歷所有的記錄後,它只儲存的是每一種產品新的出售量:
int product = rs.getInt("productID");
arr[product] += rs.getFloat("amount");
pieColor物件餅狀圖形上的每種產品應該以不同的顏色顯示。為了達到這個目的,我們建立一個pieColor物件(如表D)所示,這個物件包含有關顏色的陣列:
Color pieColorArray[] = {new Color(210,60,60), new Color(60,210,60 )…}
pieColor類別定義了一個setNewColor()的方法,這個方法能夠使curPieColor和索引遞增,同時它可以檢查索引不要超過邊界範圍,即採用的方法是:如果curPieColor過大即賦0值。
更有效的是,setNewColor()循環每一種顏色後,並在第一種顏色下執行以下的程式碼:
curPieColor++;
if(curPieColor >= pieColorArray.length)
{curPieColor = 0;}
RenderingHints和antialiasing類
java.awt.RenderingHints類別定義了許多方法以顯示二維圖形,包括alpha_interpolation, 抖動,以及antialiasing方法。 RenderingHints有助於決定圖形如何顯示以及圖形如何達到最佳處理。
為了能以平滑顯示,可以使用antialiasing方法來處理餅狀圖形。 Antialiasing是一種圖形的平滑處理方法。其演算法是選擇一個特殊像素的顏色值並取代交叉處的像素,從而能夠使線條交叉處得到平滑化。
圖A說明了antialiasing方法的效果。可以看出使用antialiasing方法的餅狀圖形的線條交叉處變得很平滑。
圖A
同時,也可以建立一個RenderingHints對象,並傳遞到Graphics2D setRenderingHints()方法,如下所示:
RenderingHints renderHints = new RenderingHints(RenderingHints.KEY_ANTIALIASING,
RenderingHints.VALUE_ANTIALIAS_ON);
g2d.setRenderingHints(renderHints);
做可調整的邊界
圖A中的餅狀圖形有一個邊界,如何改變邊界的大小?可以先定義int border = 10,然後再計算邊界內面積的大小而實現:
Ellipse2D.Double elb = new Ellipse2D.Double(x_pie - border/2, y_pie - border/2, pieWidth + border, pieHeight + border); x_pie - border/2, pieWidth + border, pieHeight + border); x_pie - border/2, pieWidth + border, pieHeight + border); x_pie - border/2, pieWidth + border, pieHeight + border);
x_pie和y_pie的值代表包圍在餅狀圖形的正方形的左上角。我們透過邊界面積取一半(border/2)而得到餅狀圖形的中心。
圓弧(Arc)理論從java.awt.Graphics 類別繼承而來的fillArc()方法提供了繪製餅狀圖形各個部分(或圓弧)的簡單方法:
g2d.fillArc(x_position, y_position, width, height, startAngle, sweepAngle);
x_position,和y_position整數代表著要填充的圓弧的左上角的x,y的座標,width和heigh整數代表其具體的尺寸。如果width和height的值相等,餅狀圖形將會是圓。如果width和height不相等,那麼餅狀圖形將會是一個橢圓。
fillArc()方法決定基於sweepAngle整數值的圓弧的大小。如果sweepAngle值是正的,則圓弧是以反時針方向繪製,反之以順時針繪製。
繪製圓弧第一步,使用pieColor物件的getPieColor()方法來取得最近餅狀圓弧的顏色,並把它賦予當前的圓弧::
g2d.setColor(pc.getPieColor());
接著,透過不斷循環sales[]陣列並使其累積而獲得總共的銷售量:
salesTotal += sales[i];
使用總共銷售量,可以計算出每一種產品銷售情況佔總共銷售量的百分量:
float perc = (sales [i]/salesTotal);
我們計算sweepAngle即可給圓弧的每一部分分配度數:
int sweepAngle = (int)(perc * 360);
每一部分圓弧畫完之後,startAngle即可依照目前的sweepAngle遞增。這就確保目前的圓弧部分都是以上一圓弧為開始,從而建立一個完整的餅狀圖形。
顯示圖示圖示提供了顯示餅狀圖形中各個部分最簡潔的方式。一個圖示的大小應該與餅狀圖形中的佔有量相對應。
圖B顯示了一個完整餅狀圖形及其對應各個部分的圖標,包括產品名稱、銷售總量、以及各個部分的佔有量。
圖B
總結
這篇文章講述如何利用JSP繪製餅狀圖形的方法及演算法,這些方法及演算法簡單而實用,開發人員可以充分利用這些方法。