便於使用JSP產生餅圖

js|餅圖

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和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繪製餅狀圖形的方法及演算法，這些方法及演算法簡單而實用，開發人員可以充分地利用這些方法。