统计报表柱状图，折线图生成
<base href="http://www.sharejs.com/code/image/stat/" mce_href="http://www.sharejs.com/code/image/stat/"></base> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>分享JavaScript-sharejs.com</title> <mce:style><!-- v/:*{behavior:url(#default#VML);position:absolute;} div,td {font-size:12px;} .gra{BACKGROUND-color: #CEDBFF ;font-size:1px;BORDER-bottom: #000000 1px solid;} .gra2{BACKGROUND-color: #003399;font-size:1px;BORDER-bottom: #000000 1px solid;} --></mce:style><style mce_bogus="1">v/:*{behavior:url(#default#VML);position:absolute;} div,td {font-size:12px;} .gra{BACKGROUND-color: #CEDBFF ;font-size:1px;BORDER-bottom: #000000 1px solid;} .gra2{BACKGROUND-color: #003399;font-size:1px;BORDER-bottom: #000000 1px solid;} </style> <mce:script type="text/javascript"><!-- var d=new Array();//统计数据数组 var d_ip_max=0;//最大IP数 var d_pv_max=0;//最大PV数 var d_ip_all=0;//IP总数 var d_pv_all=0;//PV总数 var title_all="";//统计图标题 var title_ip="";//IP数据标题 var title_pv="";//PV数据标题 var b_w=0;//柱状图柱宽 var b_s_w=0;//柱状图间隔 var base_x;//起始坐标X(用于画折线图) var base_y;//起始坐标Y(用于画折线图) function init_data(v)//初始化数据 { d=new Array(); d_ip_max=0; d_pv_max=0; d_ip_all=0; d_pv_all=0; var di=v.split(";"); var di0,di1,di2; d[0]=di[0].split(","); title_all=d[0][0]; title_ip=d[0][1]; title_pv=d[0][2]; b_w=Math.floor(d[0][3]); b_s_w=Math.floor(d[0][4]); for(var i=1;i<di.length;i++) { d[i]=di[i].split(","); di0=Math.floor(d[i][0]); di1=Math.floor(d[i][1]); di2=Math.floor(d[i][2]); d_ip_all+=di1; d_pv_all+=di2; d_ip_max=d_ip_max>di1?d_ip_max:di1; d_pv_max=d_pv_max>di2?d_pv_max:di2; } } function draw_bar(sa)//画柱状图 { var sa_div=document.getElementsByName("sa")[sa]; var v=sa_div.data; init_data(v); var b_d1=""; var b_d2=""; var title=""; var b='<div align="center">'+title_all+' (柱状图) <a href="javascript:draw_line('+sa+')" mce_href="javascript:draw_line('+sa+')">->切换到折线图</a></div><table border="0" cellpadding="0" cellspacing="0" align="center"><tr><td valign="top" rowspan="2"><p align="right" style="line-height: 12px; margin-right: 2" mce_style="line-height: 12px; margin-right: 2">'; for(var i=1;i<d.length;i++) { title=''+title_pv+':'+d[i][2]+' '+Math.floor(d[i][2]/d_pv_all*1000)/10+'%/n'+title_ip+':'+d[i][1]+' '+Math.floor(d[i][1]/d_ip_all*1000)/10+'%'; b_d1+='<td align="center" valign="bottom" width="'+(b_w+b_s_w)+'" background="tu_back.gif" title="'+title+'"><div class="gra2" style="width:'+b_w+';height:'+d[i][2]/d_pv_max*100+'"><div class="gra" style="width:'+b_w+';border:0px;height:'+((d[i][2]-d[i][1])/d_pv_max)*100+'"></div></div></td>'; b_d2+='<td width='+(b_w+b_s_w)+' title="'+title+'" id="x_'+sa+'_'+i+'">'+d[i][0]+'</td>'; } var d_per=d_pv_max%4==0?d_pv_max/4:Math.floor(d_pv_max/4+1); for(var i=4;i>0;i--) b+=d_per*i+'<br><br>'; b+='0</p></td>'; b+='<td width="10" valign="top"><img src="tu_back_left.gif" mce_src="tu_back_left.gif" width="10"></td>'; b+=b_d1; b+='<td width="10" valign="top"><img src="tu_back_right.gif" mce_src="tu_back_right.gif" width="10"></td></tr><tr height="20" align="center" style="letter-spacing:-2;font-family:Arial;font-size:12px" mce_style="letter-spacing:-2;font-family:Arial;font-size:12px"><td></td>'; b+=b_d2; b+='<td></td></tr></table><div align="center"><span class="gra2" style="height:10px;width:'+b_w+';border:#000000 1px solid;"></span> '+title_ip+' '+d_ip_all+' <span class="gra" style="height:10;width:'+b_w+';border:#000000 1px solid;"></span> '+title_pv+' '+d_pv_all+'</div>'; sa_div.innerHTML=b; } function draw_line(sa)//画折线图 { var sa_div=document.getElementsByName("sa")[sa]; var v=sa_div.data; init_data(v); var l_d1=""; var l_d2=""; var title=""; var l_x=''; var l_y=''; var e=document.getElementsByName("x_"+sa+"_1")[0]; var t=e.offsetTop; var l=e.offsetLeft; while(e=e.offsetParent) { t+=e.offsetTop; l+=e.offsetLeft; } e=document.getElementsByName("x_"+sa+"_"+(d.length-1))[0]; var t2=e.offsetTop; var l2=e.offsetLeft; while(e=e.offsetParent) { t2+=e.offsetTop; l2+=e.offsetLeft; } var w=(l2-l)/(d.length-2)*3/4; base_x=l*3/4-3/2*w; base_y=t*3/4; var l='<div align="center">'+title_all+' (折线图) <a href="javascript:draw_bar('+sa+')" mce_href="javascript:draw_bar('+sa+')">->切换到柱状图</a></div><table border="0" cellpadding="0" cellspacing="0" align="center"><tr><td valign="top" rowspan="2"><p align="right" style="line-height: 12px; margin-right: 2" mce_style="line-height: 12px; margin-right: 2">'; for(var i=1;i<d.length;i++) { title=''+title_pv+':'+d[i][2]+' '+Math.floor(d[i][2]/d_pv_all*1000)/10+'%/n'+title_ip+':'+d[i][1]+' '+Math.floor(d[i][1]/d_ip_all*1000)/10+'%'; l_d1+='<td align="center" valign="bottom" width="'+(b_w+b_s_w)+'" background="tu_back.gif" title="'+title+'"></td>'; l_d2+='<td width='+(b_w+b_s_w)+' title="'+title+'" id="x_'+sa+'_'+i+'">'+d[i][0]+'</td>'; from_x=base_x+i*w; to_x=base_x+(i+1)*w; if(i>1) { from_y=base_y-d[i-1][2]/d_pv_max*75; to_y=base_y-d[i][2]/d_pv_max*75; l_x+='<v:line strokecolor="red" style="Z-INDEX:100;LEFT:0;TOP:0" from="'+from_x+'pt,'+from_y+'pt" to="'+to_x+'pt,'+to_y+'pt" strokecolor="black" strokeweight="1px"/>'; from_y=base_y-d[i-1][1]/d_pv_max*75; to_y=base_y-d[i][1]/d_pv_max*75; l_x+='<v:line strokecolor="green" style="Z-INDEX:100;LEFT:0;TOP:0" from="'+from_x+'pt,'+from_y+'pt" to="'+to_x+'pt,'+to_y+'pt" strokecolor="black" strokeweight="1px"/>'; } l_y+='<v:line strokecolor="#eeeeee" style="Z-INDEX:10;LEFT:0;TOP:0" from="'+(from_x+w)+'pt,'+base_y+'pt" to="'+(from_x+w)+'pt,'+(base_y-75)+'pt" strokecolor="black" strokeweight="1px"/>'; } var d_per=d_pv_max%4==0?d_pv_max/4:Math.floor(d_pv_max/4+1); for(var i=4;i>0;i--) l+=d_per*i+'<br><br>'; l+='0</p></td>'; l+='<td width="10" valign="top"><img src="tu_back_left.gif" mce_src="tu_back_left.gif" width="10"></td>'; l+=l_d1; l+='<td width="10" valign="top"><img src="tu_back_right.gif" mce_src="tu_back_right.gif" width="10"></td></tr><tr height="20" align="center" style="letter-spacing:-2;font-family:Arial;font-size:12px" mce_style="letter-spacing:-2;font-family:Arial;font-size:12px"><td></td>'; l+=l_d2; l+='<td></td></tr></table><div align="center"><span style="font-size:1px;background-color:green;height:2px;width:'+b_w+';border:#000000 1px solid;"></span> '+title_ip+' '+d_ip_all+' <span style="font-size:1px;background-color:red;height:2;width:'+b_w+';border:#000000 1px solid;"></span> '+title_pv+' '+d_pv_all+'</div>'; sa_div.innerHTML=l+l_x+l_y; } function draw_pic()//画统计图 { var sa_obj=document.getElementsByName("sa"); for(var i=0;i<sa_obj.length;i++) draw_bar(i); } window.onload=function(){draw_pic();} /* document.onmouseover=function(){getXY();} function getXY() { window.status=(event.clientX+","+event.clientY); } */ // --></mce:script> </head> <body> <table width="98%" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="27" class="titlefont_02" align="center"> 访问统计图 </td> </tr> </table> <table width="100%" border="0" align="center" cellpadding="1" cellspacing="1" style="border-collapse: collapse" mce_style="border-collapse: collapse"> <tr align="center"> <td width="100%" class="back_font"> <div id="sa" data="本周访问统计,访问IP,访问量,20,25;星期日,31,48;星期一,50,455;星期二,67,478;星期三,60,531;星期四,59,310;星期五,57,329;星期六,0,0"></div> </td> </tr> <tr align="center"> <td width="100%" class="back_font"> <div id="sa" data="最近7天访问统计,访问IP,访问量,25,30;星期六,33,320;星期日,31,48;星期一,50,455;星期二,67,478;星期三,60,531;星期四,59,310;星期五,57,329"></div> </td> </tr> <tr align="center"> <td width="100%" class="back_font"> <div id="sa" data="时段访问统计图,IP,PV,15,10;00,11,22;01,19,32;02,19,32;03,11,20;04,21,42;05,32,42;06,77,95;07,57,75;08,21,55;09,55,56;10,23,56;11,59,87;12,55,92;13,11,22;14,9,25;15,1,2;16,2,2;17,7,15;18,21,55;19,5,56;20,23,56;21,15,87;22,25,52;23,15,87"></div> </td> </tr> <tr align="center"> <td width="100%" class="back_font"> <div id="sa" data="本月访问统计(2005年10月),访问IP,访问量,15,5;01,0,0;02,0,0;03,0,0;04,0,0;05,0,0;06,0,0;07,0,0;08,0,0;09,0,0;10,0,0;11,59,1190;12,41,373;13,60,460;14,59,529;15,33,320;16,31,48;17,50,455;18,67,478;19,60,531;20,59,310;21,61,354;22,1,1;23,0,0;24,0,0;25,0,0;26,0,0;27,0,0;28,0,0;29,0,0;30,0,0;31,0,0"></div> </td> </tr> <tr align="center"> <td width="100%" class="back_font"> <div id="sa" data="最近30天访问统计,访问IP,访问量,15,5;09.23,0,0;09.24,0,0;09.25,0,0;09.26,0,0;09.27,0,0;09.28,0,0;09.29,0,0;09.30,0,0;10.01,0,0;10.02,0,0;10.03,0,0;10.04,0,0;10.05,0,0;10.06,0,0;10.07,0,0;10.08,0,0;10.09,0,0;10.10,0,0;10.11,59,1190;10.12,41,373;10.13,60,460;10.14,59,529;10.15,33,320;10.16,31,48;10.17,50,455;10.18,67,478;10.19,60,531;10.20,59,310;10.21,61,354;10.22,1,1"></div> </td> </tr> <tr align="center"> <td width="100%" class="back_font"> <div id="sa" data="时段访问统计图,IP,PV,20,25;00,11,22;01,19,32;02,19,32;03,11,20;04,21,42;05,32,42;06,77,95;07,57,75;08,21,55;09,55,56;10,23,56;11,59,87;12,55,92;13,11,22;14,9,25;15,1,2;16,2,2;17,7,15;18,21,55;19,5,56;20,23,56;21,15,87;22,25,52;23,15,87"></div> </td> </tr> <tr align="center"> <td width="100%" class="back_font"> <div id="sa" data="时段访问统计图,IP,PV,15,20;00,11,22;01,19,32;02,19,32;03,11,20;04,21,42;05,32,42;06,77,95;07,57,75;08,21,55;09,55,56;10,23,56;11,59,87;12,55,92;13,11,22;14,9,25;15,1,2;16,2,2;17,7,15;18,21,55;19,5,56;20,23,56;21,15,87;22,25,52;23,15,87"></div> </td> </tr> <tr align="center"> <td width="100%" class="back_font"> <div id="sa" data="时段访问统计图,IP,PV,10,15;00,11,22;01,19,32;02,19,32;03,11,20;04,21,42;05,32,42;06,77,95;07,57,75;08,21,55;09,55,56;10,23,56;11,59,87;12,55,92;13,11,22;14,9,25;15,1,2;16,2,2;17,7,15;18,21,55;19,5,56;20,23,56;21,15,87;22,25,52;23,15,87"></div> </td> </tr> </table> </td> </tr> </table> <br><br> <div align="center"> 获取更多JavaScript代码，请登录JavaScript分享网 <a href="http://www.sharejs.com" mce_href="http://www.sharejs.com">http://www.sharejs.com</a> </div> </body> </html>