JS之柱状图

来源：互联网发布：新东方六级网络课程编辑：程序博客网时间：2024/06/04 07:23
效果如下：
<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>
1 0