在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绘制饼状图形的方法及算法，这些方法及算法简单而实用，开发人员可以充分地利用这些方法。