JS之柱状图

最新推荐文章于 2024-09-04 16:43:07 发布

相思比梦长

最新推荐文章于 2024-09-04 16:43:07 发布

阅读量1k

点赞数 2

分类专栏： WEB前端文章标签： JS 柱状图

本文链接：https://blog.csdn.net/netuser1937/article/details/54911431

版权

WEB前端专栏收录该内容

114 篇文章 2 订阅

订阅专栏

效果如下：

<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]=11
dataArray[1]=11
dataArray[2]=12
dataArray[3]=13
dataArray[4]=14
dataArray[5]=15
dataArray[6]=17
dataArray[7]=10
var 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>