希望轉載，或引用我blog資源保留作者信息。——算了，顯然那也是不大可能的。我前不就在其他blog還發現了和我寫的一摸一樣的文章，雖然我寫的自認為還是比較臭，但是沒有人喜歡看到自己花了精力的總結，被人毫不分析，毫不處理，毫不掩飾的改上他的大名。在blogjava也發現過，啥都沒有改。就作者名字改了，和寫的時間晚點，有些估計是我的有緣人，就晚幾個小時——也許還真是和我想的一摸一樣了。我也常用別人資源（不過性質沒有這么惡劣罷了），所以不廢話了，必定分享知識和分享蘋果是不一樣的。呵呵，發現自己廢話還真不少哦。

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

報表使用經驗、技巧大總結（包括JFreechart、JS chart以及自己的使用經驗）

http://www.aygfsteel.com/JAVA-HE/archive/2007/05/08/115813.html

這是我前面寫的兩篇關于客戶端報表的總結，有需要的朋友可以參考參考。下面總結的是自己擴展封裝的一個繪制餅圖javascript class。

/* ************更多技術文章請訪問：http://www.aygfsteel.com/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.aygfsteel.com/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 下都順利通過。