在JSP頁面中輕鬆實現資料餅圖

製做可調整的邊界

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