画柱状图方法收集
1
、立体感的柱状图
2
3——这是在网上陶下来的漂亮代码
4
5 1<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
6 2
7 3<!--[if !mso]>
8 4
9 5<style>
10 6
11 7v\:* { behavior: url(#default#VML) }
12 8
13 9o\:* { behavior: url(#default#VML) }
14 10
15 11.shape { behavior: url(#default#VML) }
16 12
17 13</style>
18 14
19 15<![endif]-->
20 16
21 17<HEAD>
22 18
23 19<TITLE>柱状图形报表样列</TITLE>
24 20
25
21<SCRIPT LANGUAGE="JavaScript">
26
22
27 23//addPole 增加一个柱状图
28 24
29 25//left 与窗口左边的距离
30 26
31 27//width 宽度
32 28
33 29//height 高度
34 30
35 31//zindex 层高度
36 32
37 33//fillcolor 主色
38 34
39 35//color 渐变色
40 36
41 37//type 默认为竖,1为横
42 38
43
39function addPole(left,top,width,height,zindex,fillcolor,color,type){
44 40
45 41 top=top-height;
46 42
47 43 var a="";
48 44
49 45 if(type==1){
50 46
51 47 a="angle='-90' focus='100%'";
52 48
53
49 }
54 50
55 51 var html="<v:rect style='position:absolute;";
56 52
57 53 html=html+"left:"+left+"px;";
58 54
59 55 html=html+"top:"+top+"px;";
60 56
61 57 html=html+"width:"+width+"px;";
62 58
63 59 html=html+"height:"+height+"px;";
64 60
65 61 html=html+"z-index:"+zindex+"'";
66 62
67 63 html=html+"fillcolor='"+fillcolor+"'>";
68 64
69 65 html=html+"<v:fill color2='"+color+"'";
70 66
71 67 html=html+" rotate='t' "+a+" type='gradient'/><o:extrusion v:ext='view' backdepth='20pt' ";
72 68
73 69 html=html+"color='"+fillcolor+"' on='t'/></v:rect>";
74 70
75 71 document.write(html);
76 72
77 73}
78 74
79 75
80 76
81 77//left 与窗口左边的距离
82 78
83 79//width 宽度
84 80
85 81//height 高度
86 82
87 83//zindex 立体高度
88 84
89 85//fillcolor 主色
90 86
91 87function addBackground(left,top,width,height,zindex,fillcolor){
92 88
93 89 top=top-height;
94 90
95 91 var html="<v:rect style='position:absolute;left:"+left+"px;";
96 92
97 93 html=html+"top:"+top+"px;";
98 94
99 95 html=html+"width:"+width+"px;";
100 96
101 97 html=html+"height:"+height+"px;";
102 98
103 99 html=html+"z-index:"+zindex+"'";
104100
105101 html=html+"fillcolor='"+fillcolor+"'";
106102
107103 html=html+" stroked='f'><v:fill rotate='t' angle='-45' focus='100%' type='gradient'/></v:rect>";
108104
109105 document.write(html);
110106
111107}
112108
113109
114110
115111function addLine(zindex,from,to,color){
116112
117113 var html="<v:line style='position:absolute;left:0;text-align:left;top:0;flip:y;z-index:"+zindex+"'";
118114
119115 html=html+" from='"+from+"' to='"+to+"' strokecolor='"+color+"'/>"
120116
121117 document.write(html);
122118
123119}
124120
125121
126122
127123function addText(left,top,width,height,zindex,value,fontsize){
128124
129125 top=top-height;
130126
131127 var html="<v:shape style='position:absolute;left:"+left+"px;";
132128
133129 html=html+"top:"+top+"px;";
134130
135131 html=html+"width:"+width+"px;";
136132
137133 html=html+"height:"+height+"px;";
138134
139135 html=html+"z-index:"+zindex+"'>";
140136
141137 html=html+"<v:textbox inset='0px,0px,0px,0px'><table cellspacing='3' cellpadding='0' width='100%' height='100%'><tr><td";
142138
143139 html=html+" style='FONT-SIZE:"+fontsize+"' align='center'>"+value+"</td></tr></table></v:textbox></v:shape>";
144140
145141 document.write(html);
146142
147143}
148144
149145
150146
151147function addGround(left,top,width,height,zindex,fillcolor,linecolor1,linecolor2,offset,level,min,leftoffset,textwidth,textheight,fontsize){
152148
153149 addBackground(left,top,width,height,zindex,fillcolor);
154150
155151 addLine(zindex,left+"px,"+top+"px",((left-0)+(width-0))+"px,"+top+"px",linecolor1);
156152
157153 addLine(zindex,left+"px,"+top+"px",left+"px,"+(top-height)+"px",linecolor1);
158154
159155 addLine(zindex,((left-0)+(offset-0))+"px,"+(top-offset)+"px",((left-0)+(width-0))+"px,"+(top-offset)+"px",linecolor2);
160156
161157 addLine(zindex,((left-0)+(offset-0))+"px,"+(top-offset)+"px",((left-0)+(offset-0))+"px,"+(top-height)+"px",linecolor2);
162158
163159 addLine(zindex,left+"px,"+(top-offset)+"px",((left-0)+(offset-0))+"px,"+top+"px",linecolor2);
164160
165161 for(var i=1;i<level;i++){
166162
167163 addLine(zindex,left+"px,"+(top-offset-(height*i)/level)+"px",((left-0)+(offset-0))+"px,"+(top-(height*i)/level)+"px",linecolor2);
168164
169165 addLine(zindex,(left-leftoffset)+"px,"+(top-(height*i)/level)+"px",left+"px,"+(top-(height*i)/level)+"px",linecolor1);
170166
171167 addText(left-textwidth,(top-(height*i)/level)+(textheight-0)+2,textwidth,textheight,"-1",i*min,fontsize)
172168
173169 addLine(zindex,((left-0)+(offset-0))+"px,"+(top-offset-(height*i)/level)+"px",((left-0)+(width-0))+"px,"+(top-offset-(height*i)/level)+"px",linecolor2);
174170
175171 }
176172
177173 addLine(zindex,(left-leftoffset)+"px,"+(top-(height*level)/level)+"px",left+"px,"+(top-(height*level)/level)+"px",linecolor1);
178174
179175 addText(left-textwidth,(top-(height*level)/level)+(textheight-0)+2,textwidth,textheight,"-1",level*min,fontsize)
180176
181177}
182178
183179
184180
185181function addEPole(left,top,width,height,zindex,fillcolor,color,textwidth,textheight,value1,value2,fontsize){
186182
187183 addText(left-textwidth/2+width/2,top-height-10,textwidth,textheight,zindex,value1,fontsize);
188184
189185 addText(left-textwidth/2+width/2,(top-0)+(textheight-0),textwidth,textheight,zindex,value2,fontsize);
190186
191187 addPole(left,top,width,height,zindex,fillcolor,color)
192188
193189}
194190
195
191</SCRIPT>
196192
197193</HEAD>
198194
199195
200196
201197<BODY>
202198
203199<div>
204200
205201<SCRIPT LANGUAGE="JavaScript">
206202
207203<!--
208204
209205
210206
211207addEPole("180","400","30","150","1","#3300FF","#66FFFF","80","18","300","1月份","9pt");
212208
213209addEPole("230","400","30","300","1","#FF0000","#99FFFF","80","18","600","2月份","9pt");
214210
215211addEPole("280","400","30","200","1","#33CC00","#99FFFF","80","18","400","3月份","9pt");
216212
217213addEPole("330","400","30","100","1","#FF0099","#99FFFF","80","18","200","4月份","9pt");
218214
219215addEPole("380","400","30","50","1","#660000","#99FFFF","80","18","100","5月份","9pt");
220216
221217addEPole("430","400","30","20","1","#FFFF00","#99FFFF","80","18","40","6月份","9pt");
222218
223219addEPole("480","400","30","180","1","#330066","#99FFFF","80","18","360","7月份","9pt");
224220
225221addEPole("530","400","30","120","1","#CC6633","#99FFFF","80","18","240","8月份","9pt");
226222
227223addEPole("580","400","30","80","1","#9933FF","#99FFFF","80","18","160","9月份","9pt");
228224
229225addGround("160","400","460","300","-1","#33CCFF","#000000","#6699CC","10","6","100","20","40","18","9pt")
230226
231227//-->
232228
233229</SCRIPT>
234230
235231</div>
236232
237233</body>
238234
239235</html>
240
、立体感的柱状图2
3
——这是在网上陶下来的漂亮代码4
5
1<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">6
27
3<!--[if !mso]>8
49
5<style>10
611
7v\:* { behavior: url(#default#VML) }12
813
9o\:* { behavior: url(#default#VML) }14
1015
11.shape { behavior: url(#default#VML) }16
1217
13</style>18
1419
15<![endif]-->20
1621
17<HEAD>22
1823
19<TITLE>柱状图形报表样列</TITLE>24
2025
21<SCRIPT LANGUAGE="JavaScript">
21
26
2227
23//addPole 增加一个柱状图28
2429
25//left 与窗口左边的距离30
2631
27//width 宽度32
2833
29//height 高度34
3035
31//zindex 层高度36
3237
33//fillcolor 主色38
3439
35//color 渐变色40
3641
37//type 默认为竖,1为横42
3843
39function addPole(left,top,width,height,zindex,fillcolor,color,type){
3944
4045
41 top=top-height;46
4247
43 var a="";48
4449
45 if(type==1){50
4651
47 a="angle='-90' focus='100%'";52
4853
49 }54
5055
51 var html="<v:rect style='position:absolute;";56
5257
53 html=html+"left:"+left+"px;";58
5459
55 html=html+"top:"+top+"px;";60
5661
57 html=html+"width:"+width+"px;";62
5863
59 html=html+"height:"+height+"px;";64
6065
61 html=html+"z-index:"+zindex+"'";66
6267
63 html=html+"fillcolor='"+fillcolor+"'>";68
6469
65 html=html+"<v:fill color2='"+color+"'";70
6671
67 html=html+" rotate='t' "+a+" type='gradient'/><o:extrusion v:ext='view' backdepth='20pt' ";72
6873
69 html=html+"color='"+fillcolor+"' on='t'/></v:rect>";74
7075
71 document.write(html);76
7277
73}78
7479
75 80
7681
77//left 与窗口左边的距离82
7883
79//width 宽度84
8085
81//height 高度86
8287
83//zindex 立体高度88
8489
85//fillcolor 主色90
8691
87function addBackground(left,top,width,height,zindex,fillcolor){92
8893
89 top=top-height;94
9095
91 var html="<v:rect style='position:absolute;left:"+left+"px;";96
9297
93 html=html+"top:"+top+"px;";98
9499
95 html=html+"width:"+width+"px;";100
96101
97 html=html+"height:"+height+"px;";102
98103
99 html=html+"z-index:"+zindex+"'";104
100105
101 html=html+"fillcolor='"+fillcolor+"'";106
102107
103 html=html+" stroked='f'><v:fill rotate='t' angle='-45' focus='100%' type='gradient'/></v:rect>";108
104109
105 document.write(html);110
106111
107}112
108113
109 114
110115
111function addLine(zindex,from,to,color){116
112117
113 var html="<v:line style='position:absolute;left:0;text-align:left;top:0;flip:y;z-index:"+zindex+"'";118
114119
115 html=html+" from='"+from+"' to='"+to+"' strokecolor='"+color+"'/>"120
116121
117 document.write(html);122
118123
119}124
120125
121 126
122127
123function addText(left,top,width,height,zindex,value,fontsize){128
124129
125 top=top-height;130
126131
127 var html="<v:shape style='position:absolute;left:"+left+"px;";132
128133
129 html=html+"top:"+top+"px;";134
130135
131 html=html+"width:"+width+"px;";136
132137
133 html=html+"height:"+height+"px;";138
134139
135 html=html+"z-index:"+zindex+"'>";140
136141
137 html=html+"<v:textbox inset='0px,0px,0px,0px'><table cellspacing='3' cellpadding='0' width='100%' height='100%'><tr><td";142
138143
139 html=html+" style='FONT-SIZE:"+fontsize+"' align='center'>"+value+"</td></tr></table></v:textbox></v:shape>";144
140145
141 document.write(html);146
142147
143}148
144149
145 150
146151
147function addGround(left,top,width,height,zindex,fillcolor,linecolor1,linecolor2,offset,level,min,leftoffset,textwidth,textheight,fontsize){152
148153
149 addBackground(left,top,width,height,zindex,fillcolor);154
150155
151 addLine(zindex,left+"px,"+top+"px",((left-0)+(width-0))+"px,"+top+"px",linecolor1);156
152157
153 addLine(zindex,left+"px,"+top+"px",left+"px,"+(top-height)+"px",linecolor1);158
154159
155 addLine(zindex,((left-0)+(offset-0))+"px,"+(top-offset)+"px",((left-0)+(width-0))+"px,"+(top-offset)+"px",linecolor2);160
156161
157 addLine(zindex,((left-0)+(offset-0))+"px,"+(top-offset)+"px",((left-0)+(offset-0))+"px,"+(top-height)+"px",linecolor2);162
158163
159 addLine(zindex,left+"px,"+(top-offset)+"px",((left-0)+(offset-0))+"px,"+top+"px",linecolor2);164
160165
161 for(var i=1;i<level;i++){166
162167
163 addLine(zindex,left+"px,"+(top-offset-(height*i)/level)+"px",((left-0)+(offset-0))+"px,"+(top-(height*i)/level)+"px",linecolor2);168
164169
165 addLine(zindex,(left-leftoffset)+"px,"+(top-(height*i)/level)+"px",left+"px,"+(top-(height*i)/level)+"px",linecolor1);170
166171
167 addText(left-textwidth,(top-(height*i)/level)+(textheight-0)+2,textwidth,textheight,"-1",i*min,fontsize)172
168173
169 addLine(zindex,((left-0)+(offset-0))+"px,"+(top-offset-(height*i)/level)+"px",((left-0)+(width-0))+"px,"+(top-offset-(height*i)/level)+"px",linecolor2);174
170175
171 }176
172177
173 addLine(zindex,(left-leftoffset)+"px,"+(top-(height*level)/level)+"px",left+"px,"+(top-(height*level)/level)+"px",linecolor1);178
174179
175 addText(left-textwidth,(top-(height*level)/level)+(textheight-0)+2,textwidth,textheight,"-1",level*min,fontsize)180
176181
177}182
178183
179 184
180185
181function addEPole(left,top,width,height,zindex,fillcolor,color,textwidth,textheight,value1,value2,fontsize){186
182187
183 addText(left-textwidth/2+width/2,top-height-10,textwidth,textheight,zindex,value1,fontsize);188
184189
185 addText(left-textwidth/2+width/2,(top-0)+(textheight-0),textwidth,textheight,zindex,value2,fontsize);190
186191
187 addPole(left,top,width,height,zindex,fillcolor,color)192
188193
189}194
190195
191</SCRIPT>196
192197
193</HEAD>198
194199
195 200
196201
197<BODY>202
198203
199<div>204
200205
201<SCRIPT LANGUAGE="JavaScript">206
202207
203<!--208
204209
205 210
206211
207addEPole("180","400","30","150","1","#3300FF","#66FFFF","80","18","300","1月份","9pt");212
208213
209addEPole("230","400","30","300","1","#FF0000","#99FFFF","80","18","600","2月份","9pt");214
210215
211addEPole("280","400","30","200","1","#33CC00","#99FFFF","80","18","400","3月份","9pt");216
212217
213addEPole("330","400","30","100","1","#FF0099","#99FFFF","80","18","200","4月份","9pt");218
214219
215addEPole("380","400","30","50","1","#660000","#99FFFF","80","18","100","5月份","9pt");220
216221
217addEPole("430","400","30","20","1","#FFFF00","#99FFFF","80","18","40","6月份","9pt");222
218223
219addEPole("480","400","30","180","1","#330066","#99FFFF","80","18","360","7月份","9pt");224
220225
221addEPole("530","400","30","120","1","#CC6633","#99FFFF","80","18","240","8月份","9pt");226
222227
223addEPole("580","400","30","80","1","#9933FF","#99FFFF","80","18","160","9月份","9pt");228
224229
225addGround("160","400","460","300","-1","#33CCFF","#000000","#6699CC","10","6","100","20","40","18","9pt")230
226231
227//-->232
228233
229</SCRIPT>234
230235
231</div>236
232237
233</body>238
234239
235</html>240
效果图如下：
其中方法调用，想知道每个参数的详细信息
addEPole("580","400","30","80","1","#9933FF","#99FFFF","80","18","160","9月份","
参数含义包括上边距离，左边距，以及高宽，以及XY上的内容 。以及颜色，柱体的宽度等等信息。
addGround("160","400","460","300","-1","#33CCFF","#000000","#6699CC","10","6","100","20","40","18","
定义了范围大小以及6个刻度，每个100，还包括字体大小，刻度线颜色，以及内部线条颜色，以及渐变色等等含义。
文章转自以下地址，在此感谢作者的分享
http://www.blogjava.net/JAVA-HE/archive/2007/05/08/115813.html
