希望转载，或引用我blog资源保留作者信息。——算了，显然那也是不大可能的。我前不就在其他blog还发现了和我写的一摸一样的文章，虽然我写的自认为还是比较臭，但是没有人喜欢看到自己花了精力的总结，被人毫不分析，毫不处理，毫不掩饰的改上他的大名。在blogjava也发现过，啥都没有改。就作者名字改了，和写的时间晚点，有些估计是我的有缘人，就晚几个小时——也许还真是和我想的一摸一样了。我也常用别人资源（不过性质没有这么恶劣罢了），所以不废话了，必定分享知识和分享苹果是不一样的。呵呵，发现自己废话还真不少哦。

上手JFreeChart
http://www.blogjava.net/JAVA-HE/archive/2007/04/18/111439.aspx

报表使用经验、技巧大总结（包括JFreechart、JS chart以及自己的使用经验）

http://www.blogjava.net/JAVA-HE/archive/2007/05/08/115813.html

这是我前面写的两篇关于客户端报表的总结，有需要的朋友可以参考参考。下面总结的是自己扩展封装的一个绘制饼图javascript class。

/* ************更多技术文章请访问：http://www.blogjava.net/JAVA-HE****************
2

*
3

* 文件名：pie.js V 1.01
4

*
5

* 作者：何昌敏
6

*
7

* 时间：2007-6
8

*
9

* 描述：绘制饼图
10

*
11

* 备注：
12

* 1.修改数据转化为像素<1 像素时候，出现的图形走样bug。
13

* 2.实现换行可设置。
14

* 3.实现是否将说明图标居右。
15

* 4.实现阴影绘制可选。
16

* 5.实现比较严格的参数判断。
17

* 6.可选择显示百分比的。
18

* 7.实现了图像清除。
19

* 8.调整startx starty能实现整体位置调整。
20

*
21

* 感谢：Walter Zorn提供了API ——wz_jsgraphics.js v. 3.01。
22

*
23

*************更多技术文章请访问：http://www.blogjava.net/JAVA-HE*************** */
24

function Pie(_div)
25

{
26

var piejg = new jsGraphics(_div);
27

var colors = new Array();
28

colors[ 9 ] = " #0066FF " ;
29

colors[ 5 ] = " #996633 " ;
30

colors[ 2 ] = " #80bb80 " ;
31

colors[ 3 ] = " #FF0066 " ;
32

colors[ 4 ] = " #9900FF " ;
33

colors[ 6 ] = " #006633 " ;
34

colors[ 1 ] = " #8080FF " ;
35

colors[ 7 ] = " #000000 " ;
36

colors[ 8 ] = " #CCFFFF " ;
37

colors[ 0 ] = " #FF8080 " ;
38

colors[ 10 ] = " #066600 " ;
39

colors[ 11 ] = " #666666 " ;
40

this .start_x = 0 ;
42

this .start_y = 0 ;
43

this .width = 100 ;
44

this .height = 100 ;
45

this .desc_distance = 80 ;
46

this .desc_width = 10 ;
47

this .desc_height = 10 ;
48

this .IsShowPercentage = true ;
49

this .IsShowShadow = true ;
50

this .IsDescRight = true ;
51

this .nextRow = 2 ;
52

this .drawPie = function (y_value,x_value)
54

{
55

if ( this .IsShowShadow)
56

{
57

piejg.setColor( " #666666 " );
58

piejg.fillEllipse( this .start_x + 5 , this .start_y + 5 , this .width, this .height);
59

piejg.setColor( " #CCFFFF " );
60

piejg.fillEllipse( this .start_x, this .start_y, this .width, this .height);
61

}
62

var Percentage = new Array();
63

var y_len = y_value.length;
64

var x_len = x_value.length;
65

var sum = 0 ;
66

var perspective = new Array();
67

var begin_perspective = 0 ;
68

var end_perspective = 0 ;
69

if (y_len != x_len)
71

{
72

alert( " X and Y length of inconsistencies, errors parameters. " );
73

return ;
74

}
75

for ( var i = 0 ; i < y_len;i ++ )
76

{
77

sum += y_value[i];
78

}
79

for ( var i = 0 ; i < y_len;i ++ )
80

{
81

if (isNaN(y_value[i]))
82

{
83

alert( " y is not a number! " );
84

return ;
85

}
86

perspective[i] = Math.max(Math.round( 360 * y_value[i] / sum), 1 );
87

Percentage[i] = Math.round( 100 * y_value[i] / sum);
88

end_perspective += perspective[i];
89

if (i == 0 )
90

{
91

piejg.setColor(colors[i]);
92

piejg.fillArc( this .start_x, this .start_y, this .width, this .height, 0 , end_perspective);
93

}
94

else
95

{
96

begin_perspective += perspective[i - 1 ];
97

piejg.setColor(colors[i]);
98

piejg.fillArc( this .start_x, this .start_y, this .width, this .height, begin_perspective, end_perspective);
99

}
100

101

}
102

var temp_x = 0 ;
103

var temp_y = 0 ;
104

if ( this .IsDescRight)
105

{
106

for ( var i = 0 ;i < x_len;i ++ )
107

{
108

temp_x = this .width + 10 + this .start_y;
109

temp_y = this .start_y + (i - x_len / 2 + 1 / 2 ) * ( this .height / x_len) + this .height / 2 ;
110

// temp_y = this.start_y+(i+1)*(this.height/x_len);
111

piejg.setColor(colors[i]);
112

piejg.fillRect(temp_x,temp_y, this .desc_width, this .desc_height);
113

if ( this .IsShowPercentage)
114

{
115

piejg.drawString(x_value[i] + " [ " + Percentage[i] + " %] " ,temp_x + this .desc_width,temp_y);
116

} else
117

{
118

piejg.drawString(x_value[i],temp_x + this .desc_width,temp_y);
119

}
120

}
121

}
122

else
123

{
124

for ( var i = 0 ;i < x_len;i ++ )
125

{
126

temp_x = i * this .desc_distance + this .start_x;
127

temp_y = this .height + 10 + this .start_y;
128

if (i - this .nextRow >= 0 )
129

{
130

temp_x = (i - this .nextRow) * this .desc_distance + this .start_x;
131

temp_y = this .height + 10 + 30 + this .start_y;
132

133

}
134

if (i - this .nextRow * 2 >= 0 )
135

{
136

temp_x = (i - this .nextRow * 2 ) * this .desc_distance + this .start_x;
137

temp_y = this .height + 10 + 60 + this .start_y;
138

139

}
140

if (i - this .nextRow * 3 >= 0 )
141

{
142

temp_x = (i - this .nextRow * 3 ) * this .desc_distance + this .start_x;
143

temp_y = this .height + 10 + 90 + this .start_y;
144

145

}
146

piejg.setColor(colors[i]);
147

piejg.fillRect(temp_x,temp_y, this .desc_width, this .desc_height);
148

if ( this .IsShowPercentage)
149

{
150

piejg.drawString(x_value[i] + " [ " + Percentage[i] + " %] " , this .desc_width + 3 + temp_x,temp_y);
151

} else
152

{
153

piejg.drawString(x_value[i], this .desc_width + 3 + temp_x,temp_y);
154

}
155

}
156

}
157

piejg.paint();
158

159

} ;
160

this .clearPie = function ()
161

{
162

piejg.clear();
163

} ;
164

}

使用是非常简单的。其中封装的自我感觉还算比较好的，两个对应的数组放进去就ok了，关于属性的设定可以直接在new 对象后，用mypie.height=300……

demo代码：

< html xmlns ="http://www.w3.org/1999/xhtml" >
2

< head >
3

< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
4

< title > TEST </ title >
5

< script type ="text/javascript" src ="wz_jsgraphics.js" ></ script >
6

< script type ="text/javascript" src ="pie.js" ></ script >
7

</ head >
8

< body >
9

< p > 1.饼图 </ p >
10

< div id ="PieDiv" style ="position:relative;height:200px;width:300px;" ></ div >
11

< script language ="javascript" >
12

var y = new Array ();
13

y[ 0 ] = 11112 ;
14

y[ 1 ] = 16000 ;
15

y[ 2 ] = 20000 ;
16

var x = new Array ();
18

x[ 0 ] = " a " ;
19

x[ 1 ] = " b " ;
20

x[ 2 ] = " c " ;
21

var mypie = new Pie( " PieDiv " );
23

mypie.drawPie(y,x);
24

// mypie.clearPie();
25

</ script >
26

</ body >
27

</ html >

运行效果：

觉得截图的时候效果变筹了点。大小都可以通过mypie对象来修改，说明的文字可以放下面，也是可以通过mypie来设定的。我觉得还是非常方便的。至少在做的项目中还是够用了。测试在fifefox下和在IE 下都顺利通过。