谭维维吧 关注：77,987贴子：11,126,442
小盆友很有才哈，继续加油
作者： 维风沁心 2008-7-4 14:07 回复此发言
--------------------------------------------------------------------------------
谢谢哈~！
这是几天前写的：http://tieba.baidu.com/f?kz=425689971
作者： 维风沁心 2008-7-4 14:07 回复此发言
--------------------------------------------------------------------------------
谢谢哈~！
这是几天前写的：http://tieba.baidu.com/f?kz=425689971
<style type="text/css">
<!--
/* 生成柱状图的CSS */
.chart{position:relative;margin:10px 0 30px 31px;border:1px solid #B3B3DC}
.chart div.bar,.chart div.barhl{position:absolute;background:#DCDCF4;border:1px solid #B3B3DC;line-height:0}
.chart div.barhl{background:#C2C2F4}
.chart div.liney{position:absolute;border-top:1px dotted #B9B9B9;line-height:0}
.chart div.titx,.chart div.titxhl,.chart div.tity{position:absolute;color:#666;font-size:9px;font-family:Arial;text-align:center;white-space:nowrap}
.chart div.titxhl{color:#FF0000}
.chart div.tity{text-align:right}
.chart div.hit{position:absolute;z-index:1000;width:100px;color:#666;font-size:12px;font-family:Arial}
-->
</style>
<!--不知道原因，一定要放表格中才有用 -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><div id="chart"></div></td>
</tr>
</table>
<script language="javascript">
<!--
var k=[109,36,14,11,27,18,11,20,20,6,3,6,8,11,10,14,7,9,27,27,8,6,13,15,9,17,14,8,18,17,33,3,6,0,1,0,0,
0,1,3,6,3,5,1,2,5,2,5,4,7,1,0,3,8,7,7,17,8,0,0,];//此处放要显示的数据，倒序
function Chart(E,D,A,C,B){this.parent=document.getElementById(E);this.xl=D;this.yl=A;this.barw=(document.all)?C:(C-2);this.chartw=0;this.charth=B+((document.all)?0:-2);this.minpv=this.yl[0];this.maxpv=this.yl[this.yl.length-1]}Chart.prototype.GetPVHeight=function(B){var A=Math.round(((B-this.minpv)*this.charth/(this.maxpv-this.minpv)))+((document.all)?2:0);if(A>this.charth){A=this.charth}return A};Chart.prototype.Create=function(){var A=document.createElement("div");A.className="chart";A.style.height=this.charth+"px";this.parent.appendChild(A);var K=document.createElement("div");A.appendChild(K);K.className="hit";var J=0;for(var G=0;G<this.xl.length;G+=2){var B=this.GetPVHeight(this.xl[G]);var I=this.xl[G+1];var F=document.createElement("div");A.appendChild(F);F.className="bar";F.style.width=this.barw+"px";F.style.height=B+"px";F.style.top=this.charth-B-1+"px";F.style.left=(J-1)+"px";F.innerHTML=" ";F.ohit=K;F.onmouseover=function(){this.className="barhl";this.ohit.style.display="";this.ohit.innerHTML=this.id.substring(3,this.id.length);this.ohit.style.left=this.style.left;this.ohit.style.top=parseInt(this.style.top)-parseInt(this.ohit.offsetHeight)+"px"};F.onmouseout=function(){this.className="bar";this.ohit.style.display="none"};var E=document.createElement("div");A.appendChild(E);E.style.width=this.barw+"px";E.style.top=(document.all)?this.charth:this.charth+3+"px";var C=I.indexOf(".");F.id="bar"+I.substring(0,C)+"月"+I.substring(C+1,I.length)+"日 "+this.xl[G];if(G%4==0){if((I.substring(C+1,I.length)=="1"||I.substring(C+1,I.length)=="2")){E.className="titxhl";E.style.left=(J-4)+"px";E.innerHTML=I}else{E.className="titx";E.style.left=(J-1)+"px";E.innerHTML=I.substring(C+1,I.length)}}else{E.className="titx";E.style.left=(J-1)+"px";E.innerHTML=""}J+=this.barw+((document.all)?-1:1)}this.chartw=J+((document.all)?1:-1);A.style.width=this.chartw+"px";for(var G=0;G<this.yl.length;G++){var D=this.GetPVHeight(this.yl[G]);if(G!=0&&G!=this.yl.length-1){var H=document.createElement("div");A.appendChild(H);H.className="liney";H.style.width=(this.chartw-((document.all)?1:-1))+"px";H.style.top=(this.charth-D-1)+"px"}var E=document.createElement("div");A.appendChild(E);E.className="tity";E.style.width="35px";E.style.top=(this.charth-D-2)+"px";E.style.left=-42+"px";E.innerHTML=this.yl[G]}}; //图表生成主函数
//开始调用
try{
if(k.length==0){k=[0];}
else
{
var f=k.toString();
if(f.charAt(f.length-1)==",")
{f=f.substring(0,f.length-1);}
k=f.split(",");
}
}
catch(A){}
if(k.length<60) //可以在此调整图表跨度
{
while(k.length<60) {k.push(0);}//自动补齐长度
}
var f=[];
for(var b=0;b<k.length;b++)
{f[b]=k[b];}
f.sort(function(B,A){return parseInt(B)-parseInt(A);});//排序，从小到大`
var min=parseInt(f[0]);
var max=parseInt(f[f.length-1]);
var p=[];
var n=6; //水平等分线，n-1份
var N=Math.ceil((max-min)/(n-1)); //ceil()方法返回了比浮点参数number 大的最小整数（往大的方向四舍五入）//每一分等份线的跨度
p[0]=min;
for(var b=1;b<n;b++){p[b]=min+N*b;}
var _k="2007-6-9".split("-"); //第一条数据的统计时间
var q=new Date(parseInt(_k[0]),parseInt(_k[1])-1,parseInt(_k[2]));//上一个月的时间
var w=[];
for(var b=0;b<60;b++)
{w.push((q.getMonth()+1)+"."+q.getDate());q.setDate(q.getDate()-1);}
var x=[];
for(var b=60-1;b>=0;b--)
{x.push(k[b]);x.push(w[b]);}
var y=p;
if(y.toString()==[0,0,0,0,0,0].toString())
{y=[0,1,2,3,4,5];}
new Chart("chart",x,y,10,152).Create();
-->
</script>
<!--
/* 生成柱状图的CSS */
.chart{position:relative;margin:10px 0 30px 31px;border:1px solid #B3B3DC}
.chart div.bar,.chart div.barhl{position:absolute;background:#DCDCF4;border:1px solid #B3B3DC;line-height:0}
.chart div.barhl{background:#C2C2F4}
.chart div.liney{position:absolute;border-top:1px dotted #B9B9B9;line-height:0}
.chart div.titx,.chart div.titxhl,.chart div.tity{position:absolute;color:#666;font-size:9px;font-family:Arial;text-align:center;white-space:nowrap}
.chart div.titxhl{color:#FF0000}
.chart div.tity{text-align:right}
.chart div.hit{position:absolute;z-index:1000;width:100px;color:#666;font-size:12px;font-family:Arial}
-->
</style>
<!--不知道原因，一定要放表格中才有用 -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><div id="chart"></div></td>
</tr>
</table>
<script language="javascript">
<!--
var k=[109,36,14,11,27,18,11,20,20,6,3,6,8,11,10,14,7,9,27,27,8,6,13,15,9,17,14,8,18,17,33,3,6,0,1,0,0,
0,1,3,6,3,5,1,2,5,2,5,4,7,1,0,3,8,7,7,17,8,0,0,];//此处放要显示的数据，倒序
function Chart(E,D,A,C,B){this.parent=document.getElementById(E);this.xl=D;this.yl=A;this.barw=(document.all)?C:(C-2);this.chartw=0;this.charth=B+((document.all)?0:-2);this.minpv=this.yl[0];this.maxpv=this.yl[this.yl.length-1]}Chart.prototype.GetPVHeight=function(B){var A=Math.round(((B-this.minpv)*this.charth/(this.maxpv-this.minpv)))+((document.all)?2:0);if(A>this.charth){A=this.charth}return A};Chart.prototype.Create=function(){var A=document.createElement("div");A.className="chart";A.style.height=this.charth+"px";this.parent.appendChild(A);var K=document.createElement("div");A.appendChild(K);K.className="hit";var J=0;for(var G=0;G<this.xl.length;G+=2){var B=this.GetPVHeight(this.xl[G]);var I=this.xl[G+1];var F=document.createElement("div");A.appendChild(F);F.className="bar";F.style.width=this.barw+"px";F.style.height=B+"px";F.style.top=this.charth-B-1+"px";F.style.left=(J-1)+"px";F.innerHTML=" ";F.ohit=K;F.onmouseover=function(){this.className="barhl";this.ohit.style.display="";this.ohit.innerHTML=this.id.substring(3,this.id.length);this.ohit.style.left=this.style.left;this.ohit.style.top=parseInt(this.style.top)-parseInt(this.ohit.offsetHeight)+"px"};F.onmouseout=function(){this.className="bar";this.ohit.style.display="none"};var E=document.createElement("div");A.appendChild(E);E.style.width=this.barw+"px";E.style.top=(document.all)?this.charth:this.charth+3+"px";var C=I.indexOf(".");F.id="bar"+I.substring(0,C)+"月"+I.substring(C+1,I.length)+"日 "+this.xl[G];if(G%4==0){if((I.substring(C+1,I.length)=="1"||I.substring(C+1,I.length)=="2")){E.className="titxhl";E.style.left=(J-4)+"px";E.innerHTML=I}else{E.className="titx";E.style.left=(J-1)+"px";E.innerHTML=I.substring(C+1,I.length)}}else{E.className="titx";E.style.left=(J-1)+"px";E.innerHTML=""}J+=this.barw+((document.all)?-1:1)}this.chartw=J+((document.all)?1:-1);A.style.width=this.chartw+"px";for(var G=0;G<this.yl.length;G++){var D=this.GetPVHeight(this.yl[G]);if(G!=0&&G!=this.yl.length-1){var H=document.createElement("div");A.appendChild(H);H.className="liney";H.style.width=(this.chartw-((document.all)?1:-1))+"px";H.style.top=(this.charth-D-1)+"px"}var E=document.createElement("div");A.appendChild(E);E.className="tity";E.style.width="35px";E.style.top=(this.charth-D-2)+"px";E.style.left=-42+"px";E.innerHTML=this.yl[G]}}; //图表生成主函数
//开始调用
try{
if(k.length==0){k=[0];}
else
{
var f=k.toString();
if(f.charAt(f.length-1)==",")
{f=f.substring(0,f.length-1);}
k=f.split(",");
}
}
catch(A){}
if(k.length<60) //可以在此调整图表跨度
{
while(k.length<60) {k.push(0);}//自动补齐长度
}
var f=[];
for(var b=0;b<k.length;b++)
{f[b]=k[b];}
f.sort(function(B,A){return parseInt(B)-parseInt(A);});//排序，从小到大`
var min=parseInt(f[0]);
var max=parseInt(f[f.length-1]);
var p=[];
var n=6; //水平等分线，n-1份
var N=Math.ceil((max-min)/(n-1)); //ceil()方法返回了比浮点参数number 大的最小整数（往大的方向四舍五入）//每一分等份线的跨度
p[0]=min;
for(var b=1;b<n;b++){p[b]=min+N*b;}
var _k="2007-6-9".split("-"); //第一条数据的统计时间
var q=new Date(parseInt(_k[0]),parseInt(_k[1])-1,parseInt(_k[2]));//上一个月的时间
var w=[];
for(var b=0;b<60;b++)
{w.push((q.getMonth()+1)+"."+q.getDate());q.setDate(q.getDate()-1);}
var x=[];
for(var b=60-1;b>=0;b--)
{x.push(k[b]);x.push(w[b]);}
var y=p;
if(y.toString()==[0,0,0,0,0,0].toString())
{y=[0,1,2,3,4,5];}
new Chart("chart",x,y,10,152).Create();
-->
</script>
