首页 > 网站 > WEB开发 > 正文

JS之柱状图

2024-04-27 15:11:32
字体:
来源:转载
供稿:网友
效果如下:

图片

<script language="javascript">function table1(total,table_x,table_y,thickness,table_width,all_width,all_height){//参数含义(传递的数组,横坐标,纵坐标,柱子的厚度,柱子的宽度,图表的宽度,图表的高度,图表的类型) var tmdColor1 = new Array(); tmdColor1[0] = "#d1ffd1"; tmdColor1[1] = "#ffbbbb"; tmdColor1[2] = "#ffe3bb"; tmdColor1[3] = "#cff4f3"; tmdColor1[4] = "#d9d9e5"; tmdColor1[5] = "#ffc7ab"; tmdColor1[6] = "#ecffb7"; tmdColor1[7] = "green"; var tmdColor2 = new Array(); tmdColor2[0] = "#00ff00"; tmdColor2[1] = "#ff0000"; tmdColor2[2] = "#ff9900"; tmdColor2[3] = "#33cccc"; tmdColor2[4] = "#666699"; tmdColor2[5] = "#993300"; tmdColor2[6] = "#99cc00"; tmdColor2[7] = "yellow"; //var tb_color = new Array(tmdColor1,tmdColor2); var tb_color = new Array(tmdColor1,tmdColor2); var left_width = 70; var length = thickness/2; var total_no = total[0].length; var temp1 = 0; var temp2,temp4,temp4; for(var i = 0;i<total_no;i++) {  if(temp1<total[0][i]) {   temp1 = total[0][i];  } } temp1 = parseInt(temp1.toString());  if(temp1>10){  temp2 = temp1.toString().substr(1,1)  if(temp2>4) {   temp3 = (parseInt((temp1/(Math.pow(10,(temp1.toString().length-1)))).toString())+1)*Math.pow(10,(temp1.toString().length-1));  }else {   temp3 = (parseInt((temp1/(Math.pow(10,(temp1.toString().length-1)))).toString())+0.5)*Math.pow(10,(temp1.toString().length-1));  } }else{  alert(temp1);  if(temp1>4){   temp3 = 10;   }else{   temp3 = 5;  } } temp4=temp3 document.write("<!--[if gte vml 1]><v:line id='_x0000_s1027' alt='' style='position:absolute;left:0;text-align:left;top:0;flip:y;z-index:-1' from='" + (table_x+left_width) + "px," + table_y + "px' to='" + (table_x+left_width) + "px," + (table_y+all_height) + "px'/><![endif]-->");   var table_space = (all_height - table_width * total_no) / total_no; for(var i=0;i<=all_width-1;i +=all_width/5) {  document.write("<!--[if gte vml 1]>");  document.write("<v:shape id='_x0000_s1025' type='#_x0000_t202' alt='' style='position:absolute;left:" + (table_x+left_width+i+all_width/5-left_width) + "px;top:" + (table_y+all_height) + "px;width:" + left_width + "px;height:18px;z-index:1'>");  document.write("</v:shape><![endif]-->");  temp4 = temp4 - temp3 / 5; }  for(var i=0;i<total_no;i++) {  var temp_space = table_space/2 + table_space * i + table_width * i;  document.write("<v:rect id='_x0000_s1025' alt='' style='position:absolute;left:");  document.write(table_x + left_width);  document.write("px;top:");  document.write(table_y + temp_space);  document.write("px;width:" + all_width * (total[0][i] / temp3) + "px;height:" + table_width + "px;z-index:1' fillcolor='" + tb_color[1][i] + "'>");  document.write("<v:fill color2='" + tb_color[0][i] + "' rotate='t' angle='-90' focus='100%' type='gradient'/>");  document.write("<o:extrusion v:ext='view' backdepth='" + thickness + "pt' color='" + tb_color[1][i] + "' on='t'/>");  document.write("</v:rect>");  document.write("<v:shape id='_x0000_s1025' type='#_x0000_t202' alt='' style='position:absolute;left:" + (table_x + left_width + all_width * (total[0][i] / temp3) + thickness / 2) + "px;top:" + (table_y + temp_space) + "px;width:" + (table_space + 15) + "px;height:18px;z-index:1'>");  document.write("<v:textbox inset='0px,0px,0px,0px'><table cellspacing='3' cellpadding='0' width='100%' height='100%'><tr><td align='center'>" + total[0][i] + "</td></tr></table></v:textbox></v:shape>");   document.write("<v:shape id='_x0000_s1025' type='#_x0000_t202' alt='' style='position:absolute;left:" + table_x + "px;top:" + (table_y + temp_space) + "px;width:" + left_width + "px;height:18px;z-index:1'>");  document.write("<v:textbox inset='0px,0px,0px,0px'><table cellspacing='3' cellpadding='0' width='100%' height='100%'><tr><td align='right'>" + total[1][i] + "</td></tr></table></v:textbox></v:shape>"); }}</script><html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"><style>v/:*         { behavior: url(#default#VML) }o/:*         { behavior: url(#default#VML) }.shape       { behavior: url(#default#VML) }</style><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><style>TD { FONT-SIZE: 9pt}</style></head><body><script language="Javascript">//=============调用方法=====================/*1、修改dataArray和nameArray对于数据2、修改table1函数理的tmdColor2对于的颜色代码3、"A"和"B"两种类别图*/var dataArray = new Array()dataArray[0]=11dataArray[1]=11dataArray[2]=12dataArray[3]=13dataArray[4]=14dataArray[5]=15dataArray[6]=17dataArray[7]=10var nameArray = new Array()nameArray[0]="1"nameArray[1]="2"nameArray[2]="3"nameArray[3]="4"nameArray[4]="5"nameArray[5]="6"nameArray[6]="7"nameArray[7]="8"var total= new Array(dataArray,nameArray)table1(total,0,0,20,20,400,250)//参数含义(传递的数组,横坐标,纵坐标,柱子的厚度,柱子的宽度,图表的宽度,图表的高度,图表的类型)</script></body></html>


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表