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

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

報(bào)表使用經(jīng)驗(yàn)、技巧大總結(jié)（包括JFreechart、JS chart以及自己的使用經(jīng)驗(yàn)）

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

這是我前面寫的兩篇關(guān)于客戶端報(bào)表的總結(jié)，有需要的朋友可以參考參考。下面總結(jié)的是自己擴(kuò)展封裝的一個(gè)繪制餅圖javascript class。

/* ************更多技術(shù)文章請(qǐng)?jiān)L問：http://www.tkk7.com/JAVA-HE****************
2

*
3

* 文件名：pie.js V 1.01
4

*
5

* 作者：何昌敏
6

*
7

* 時(shí) 間：2007-6
8

*
9

* 描述：繪制餅圖
10

*
11

* 備注：
12

* 1.修改數(shù)據(jù)轉(zhuǎn)化為像素<1 像素時(shí)候，出現(xiàn)的圖形走樣bug。
13

* 2.實(shí)現(xiàn)換行可設(shè)置。
14

* 3.實(shí)現(xiàn)是否將說明圖標(biāo)居右。
15

* 4.實(shí)現(xiàn)陰影繪制可選。
16

* 5.實(shí)現(xiàn)比較嚴(yán)格的參數(shù)判斷。
17

* 6.可選擇顯示百分比的。
18

* 7.實(shí)現(xiàn)了圖像清除。
19

* 8.調(diào)整startx starty能實(shí)現(xiàn)整體位置調(diào)整。
20

*
21

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

*
23

*************更多技術(shù)文章請(qǐng)?jiān)L問：http://www.tkk7.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

}

使用是非常簡(jiǎn)單的。其中封裝的自我感覺還算比較好的，兩個(gè)對(duì)應(yīng)的數(shù)組放進(jìn)去就ok了，關(guān)于屬性的設(shè)定可以直接在new 對(duì)象后，用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 >

運(yùn)行效果：

覺得截圖的時(shí)候效果變籌了點(diǎn)。大小都可以通過mypie對(duì)象來修改，說明的文字可以放下面，也是可以通過mypie來設(shè)定的。我覺得還是非常方便的。至少在做的項(xiàng)目中還是夠用了。測(cè)試在fifefox下和在IE 下都順利通過。

要查閱具體的API 和獲取 wz_jsgraphics.js 文件。
可以去原網(wǎng)站搜索，我只是利用別人的API 封裝了一個(gè)類。
http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm#download

posted on 2007-06-29 01:39 -274°C 閱讀(5751) 評(píng)論(8) 編輯收藏所屬分類: 計(jì)算機(jī)綜合、web前端

FeedBack: