通用柱装图代码（JS版）

最新推荐文章于 2024-07-18 11:48:33 发布

MagicianLiu

最新推荐文章于 2024-07-18 11:48:33 发布

阅读量1.7k

点赞数

文章标签： border behavior textbox table javascript office

本文链接：https://blog.csdn.net/MagicianLiu/article/details/1208433

版权

因工作需要，参考了一些柱装图样式，用Javascript写了一个柱装图JS代码。。。可以在各种WEB应用程序中使用。不需要注册组件。采用VML语言画的图，所以只能在IE浏览器上显示，而且不同浏览器可能存在差异。。。
。。希望同大家共同研究一下。
源代码如下：
调用页面：
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>发帖量统计</title>
<style>
body{
font-size:12px;
}
td{
font-size:12px;
}
</style>
</head>
<script src="histogram.js"></script>
<body>
<table width="500" border="0" cellspacing="0" cellpadding="0" align="center">
<tr><td height="30" align="center" style="font-size:16px;font-weight:bold;color:#fc3a00;">发帖量统计</td></tr>
<tr>
    <td ><script language="javascript">
var ar,space,width=500,height=400;
ar = new Array();
ar[0]="攒机买机|245";
ar[1]="硬件讨论|12";
ar[2]="笔记本专区|852";
ar[3]="数码产品|424";
ar[4]="操作系统|412";
ar[5]="软件下载|751";
ar[6]="影视下载|123";
space=20;
histogram(ar,space,width,height);

</script></td>
</tr>
</table>

</body>
</html>

histogram.js

//产品名称：柱装图 JS版
//魔术师工作室出品
//发布日期：2006年09月10日
//作者：魔术师·刘
//MSN：zhi_angel@msn.com
//参数含义(传递的数组,柱状间隔，总宽，总高）
var force_color = new Array();
var bg_color = new Array();
force_color[0]="#d1ffd1";
force_color[1]="#ffbbbb";
force_color[2]="#ffe3bb";
force_color[3]="#cff4f3";
force_color[4]="#d9d9e5";
force_color[5]="#ffc7ab";
force_color[6]="#ecffb7";

bg_color[0]="#00ff00";
bg_color[1]="#ff0000";
bg_color[2]="#ff9900";
bg_color[3]="#33cccc";
bg_color[4]="#666699";
bg_color[5]="#993300";
bg_color[6]="#99cc00";
line_color="#69f";
var left_width=30;
var bottom_height=20;
function histogram(ar,space,width,height){
//柱阴影厚度
var thickness = space/2;
if (thickness<1)
  thickness =0;
thickness = space;
//数据长度
var length = ar.length;
var iMax=0,iWidth=0,iHeight=0,tMax=0;//数据最大值
var i,j,obj,tmp;
var index=-1;
//验证
if (length==0) return;
for(i=0;i<length;i++){
  obj = ar[i].split("|");
  for(j=0;j<obj.length;j++){
   tmp = parseInt(obj[j]);
   if(tmp>iMax)
    iMax =tmp;
  }
}
tmp = iMax+'';
j = tmp.length;
if(iMax>9){
  i= parseInt((iMax %100)/10);
  if(i>4)
   tMax =(parseInt(iMax/Math.pow(10,(j-1)))+1)*Math.pow(10,j-1);
  else
   tMax =(parseInt(iMax/Math.pow(10,(j-1)))+0.5)*Math.pow(10,j-1);
}else{
  if(iMax>4)
   tMax = 10;
  else
   tMax= 5;
}

document.write('<table width="'+width+'" height="'+height+'" border="0" cellpadding="0" cellspacing="0"><tr>');
document.write('<td width="'+left_width+'" align="right" valign="bottom" height="'+(height-bottom_height)+'"><v:line style="position:absolute;left:0px;top:0px;right:0px;" alt="" to="'+left_width+'px,-'+(height-bottom_height)+'px" from="'+left_width+'px,0px"/>');
//画分隔线
iMax = 5;
tmp = ((height-bottom_height)/iMax);
i=1;
if(tmp>40){
  iMax=10;
  tmp = ((height-bottom_height)/iMax);
}
while(tmp>40){
  iMax=10*(i++);
  tmp = ((height-bottom_height)/iMax);
}
if(i>1) {
  iMax-=10;
  tmp = ((height-bottom_height)/iMax);
}

document.write("<table width='100%' border='0' cellpadding='0' cellspacing='0' >");
for(i=iMax;i>=1;i--){
  document.write("<tr><td height='"+tmp+"' align='center' style='border-top:1px solid #000000;' valign='top'>"+(tMax/iMax*i)+"</td></tr>");
}
document.write("</table><v:line to='0px,-"+(height-bottom_height)+"px'/> ");

function formatNumber(obj,length){
if(isNaN(obj)) return obj;
var tmp=obj+'';
var index = tmp.indexOf(".");
if(index!=-1){
return obj.substring(0,index+3);
}
else
return obj;

}

MagicianLiu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
通用柱装图代码（JS版）

因工作需要，参考了一些柱装图样式，用Javascript写了一个柱装图JS代码。。。可以在各种WEB应用程序中使用。不需要注册组件。采用VML语言画的图，所以只能在IE浏览器上显示，而且不同浏览器可能存在差异。。。。。希望同大家共同研究一下。源代码如下：调用页面：v/:* { behavior: url(#default#VML) }o/:* { behavior:
复制链接

扫一扫