柱状统计图js代码

稿源：互联网 2022-08-02 05:58:14 点击： 6511 撤稿纠错

js设计的一个柱状统计图，非常漂亮，立体感很强。

以下讨论的是和柱状统计相关的柱状统计图js代码教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<html>
<head>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">
<meta name="keywords" content="站长,网页特效,网页特效代码,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" />
<title>网页特效 JS柱状统计图 站长特效网欢迎您。</title>
<style>
  TD { FONT-SIZE: 9pt}
</style>
</head>
<body>
<a href="http://www.zzjs.net/">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>


<script language="javascript">
  function table1(total,table_x,table_y,thickness,table_width,all_width,all_height,table_type){
  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";
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";
var tb_color = new Array(tmdColor1,tmdColor2);
var line_color = "#69f";
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>9)
  {
  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));
  }
  }//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
  else
  {
  if(temp1>4)
  temp3 = 10;
  else
  temp3 = 5;
  }
temp4=temp3
  document.write("");
  document.write("");
  document.write("");
  switch (table_type)
  {
  case "A":
var table_space = (all_width-table_width*total_no)/total_no;
  document.write("");
for(var i=0;i<=all_height-1;i+= all_height/5)
  {
  document.write("");
  document.write("");
  document.write("");
  document.write("");
  temp4 = temp4-temp3/5;
  }//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
  for(var i=0;i<total_no;i++)
  {
var temp_space = table_x + left_width + table_space / 2 + table_space * i + table_width * i;
  document.write("<v:rect id='_x0000_s1025' alt='' style='position:absolute;left:");
  document.write(temp_space);
  document.write("px;top:");
  document.write(table_y + all_height * (1 - (total[0][i] / temp3)));
  document.write("px;width:" + table_width + "px;height:" + all_height * (total[0][i] / temp3) + "px;z-index:1' fillcolor='" + tb_color[1][i] + "'>");
  document.write("<v:fill color2='" + tb_color[0][i] + "' rotate='t' 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:" + temp_space + "px;top:" + (table_y+all_height*(1-(total[0][i]/temp3))-table_width) + "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:" + (temp_space-table_space/2) + "px;top:" + (table_y+all_height+1) + "px;width:" + (table_space+table_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='center'>" + total[1][i] + "</td></tr></table></v:textbox></v:shape>");
  }
break;
  case "B":
  var table_space = (all_height - table_width * total_no) / total_no;
  document.write("");
  for(var i=0;i<=all_width-1;i +=all_width/5)
  {
  document.write("");
  document.write("");
  document.write("");
  document.write("");
  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>");
  }
}
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
</script>
<script language="javascript">
var dataArray = new Array()
  dataArray[0]=200
  dataArray[1]=800
  dataArray[2]=1000
  dataArray[3]=600
  dataArray[4]=1222
  dataArray[5]=3213
  dataArray[6]=8
  var nameArray = new Array()
  nameArray[0]="项目一"
  nameArray[1]="项目二"
  nameArray[2]="项目三"
  nameArray[3]="项目四"
  nameArray[4]="项目五"
  nameArray[5]="项目六"
  nameArray[6]="项目七"
  var total= new Array(dataArray,nameArray)
table1(total,200,20,20,30,400,200,"A");
  table1(total,200,320,20,20,400,250,"B")
</script>
</body>
</html>

关于柱状统计图js代码的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2010091464621.shtml方便下次再访问哦。

·上一篇： 鼠标经过单元格变色
·下一篇： 网页取色器

柱状统计图js代码

文章分类LIST >>返回首页

最新游戏

最新新闻