源代码如下: /*****************************************************************************/ <%@ page contentType="text/html; charset=GBK"%> <html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"> <!--[if !mso]> <style> v/:* { behavior: url(#default#VML) } o/:* { behavior: url(#default#VML) } .shape { behavior: url(#default#VML) } </style> <![endif]--> <HEAD> <TITLE>柱状图形报表样列</TITLE> <SCRIPT LANGUAGE="JavaScript"> //addPole 增加一个柱状图 //left 与窗口左边的距离 //width 宽度 //height 高度 //zindex 层高度 //fillcolor 主色 //color 渐变色 //type 默认为竖,1为横 function addPole(left,top,width,height,zindex,fillcolor,color,type){ top=top-height; var a=""; if(type==1){ a="angle='-90' focus='100%'"; } var html="<v:rect style='position:absolute;"; html=html+"left:"+left+"px;"; html=html+"top:"+top+"px;"; html=html+"width:"+width+"px;"; html=html+"height:"+height+"px;"; html=html+"z-index:"+zindex+"'"; html=html+"fillcolor='"+fillcolor+"'>"; html=html+"<v:fill color2='"+color+"'"; html=html+" rotate='t' "+a+" type='gradient'/><o:extrusion v:ext='view' backdepth='20pt' "; html=html+"color='"+fillcolor+"' on='t'/></v:rect>"; document.write(html); } //left 与窗口左边的距离 //width 宽度 //height 高度 //zindex 立体高度 //fillcolor 主色 function addBackground(left,top,width,height,zindex,fillcolor){ top=top-height; var html="<v:rect style='position:absolute;left:"+left+"px;"; html=html+"top:"+top+"px;"; html=html+"width:"+width+"px;"; html=html+"height:"+height+"px;"; html=html+"z-index:"+zindex+"'"; html=html+"fillcolor='"+fillcolor+"'"; html=html+" stroked='f'><v:fill rotate='t' angle='-45' focus='100%' type='gradient'/></v:rect>"; document.write(html); } function addLine(zindex,from,to,color){ var html="<v:line style='position:absolute;left:0;text-align:left;top:0;flip:y;z-index:"+zindex+"'"; html=html+" from='"+from+"' to='"+to+"' strokecolor='"+color+"'/>" document.write(html); } function addText(left,top,width,height,zindex,value,fontsize){ top=top-height; var html="<v:shape style='position:absolute;left:"+left+"px;"; html=html+"top:"+top+"px;"; html=html+"width:"+width+"px;"; html=html+"height:"+height+"px;"; html=html+"z-index:"+zindex+"'>"; html=html+"<v:textbox inset='0px,0px,0px,0px'><table cellspacing='3' cellpadding='0' width='100%' height='100%'><tr><td"; html=html+" style='FONT-SIZE:"+fontsize+"' align='center'>"+value+"</td></tr></table></v:textbox></v:shape>"; document.write(html); } function addGround(left,top,width,height,zindex,fillcolor,linecolor1,linecolor2,offset,level,min,leftoffset,textwidth,textheight,fontsize){ addBackground(left,top,width,height,zindex,fillcolor); addLine(zindex,left+"px,"+top+"px",((left-0)+(width-0))+"px,"+top+"px",linecolor1); addLine(zindex,left+"px,"+top+"px",left+"px,"+(top-height)+"px",linecolor1); addLine(zindex,((left-0)+(offset-0))+"px,"+(top-offset)+"px",((left-0)+(width-0))+"px,"+(top-offset)+"px",linecolor2); addLine(zindex,((left-0)+(offset-0))+"px,"+(top-offset)+"px",((left-0)+(offset-0))+"px,"+(top-height)+"px",linecolor2); addLine(zindex,left+"px,"+(top-offset)+"px",((left-0)+(offset-0))+"px,"+top+"px",linecolor2); for(var i=1;i<level;i++){ addLine(zindex,left+"px,"+(top-offset-(height*i)/level)+"px",((left-0)+(offset-0))+"px,"+(top-(height*i)/level)+"px",linecolor2); addLine(zindex,(left-leftoffset)+"px,"+(top-(height*i)/level)+"px",left+"px,"+(top-(height*i)/level)+"px",linecolor1); addText(left-textwidth,(top-(height*i)/level)+(textheight-0)+2,textwidth,textheight,"-1",i*min,fontsize) 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); } addLine(zindex,(left-leftoffset)+"px,"+(top-(height*level)/level)+"px",left+"px,"+(top-(height*level)/level)+"px",linecolor1); addText(left-textwidth,(top-(height*level)/level)+(textheight-0)+2,textwidth,textheight,"-1",level*min,fontsize) } function addEPole(left,top,width,height,zindex,fillcolor,color,textwidth,textheight,value1,value2,fontsize){ addText(left-textwidth/2+width/2,top-height-10,textwidth,textheight,zindex,value1,fontsize); addText(left-textwidth/2+width/2,(top-0)+(textheight-0),textwidth,textheight,zindex,value2,fontsize); addPole(left,top,width,height,zindex,fillcolor,color) } </SCRIPT> </HEAD> <BODY> <div> <SCRIPT LANGUAGE="JavaScript"> <!-- addEPole("180","400","30","150","1","#3300FF","#66FFFF","80","18","300","1月份","9pt"); addEPole("230","400","30","300","1","#FF0000","#99FFFF","80","18","600","2月份","9pt"); addEPole("280","400","30","200","1","#33CC00","#99FFFF","80","18","400","3月份","9pt"); addEPole("330","400","30","100","1","#FF0099","#99FFFF","80","18","200","4月份","9pt"); addEPole("380","400","30","50","1","#660000","#99FFFF","80","18","100","5月份","9pt"); addEPole("430","400","30","20","1","#FFFF00","#99FFFF","80","18","40","6月份","9pt"); addEPole("480","400","30","180","1","#330066","#99FFFF","80","18","360","7月份","9pt"); addEPole("530","400","30","120","1","#CC6633","#99FFFF","80","18","240","8月份","9pt"); addEPole("580","400","30","80","1","#9933FF","#99FFFF","80","18","160","9月份","9pt"); addGround("160","400","460","300","-1","#33CCFF","#000000","#6699CC","10","6","100","20","40","18","9pt") //--> </SCRIPT> </div> </body> 其中方法调用,想知道每个参数的详细信息,你可以自己试: addEPole("580","400","30","80","1","#9933FF","#99FFFF","80","18","160","9月份","9pt"); 参数含义包括上边距离,左边距,以及高宽,以及XY上的内容 。以及颜色,柱体的宽度等等信息。 addGround("160","400","460","300","-1","#33CCFF","#000000","#6699CC","10","6","100","20","40","18","9pt") 定义了范围大小以及6个刻度,每个100,还包括字体大小,刻度线颜色,以及内部线条颜色,以及渐变色等等含义。 </html>