JS 统计报表柱状图，折线图生成

zoukankan html css js c++ java

JS 统计报表柱状图，折线图生成

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

//添加图片存放路径
<base href="http://www.sharejs.com/code/image/stat/"></base>
<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;}
</style>
<script>
/******************************************************
* 统计图生成 Share JavaScript (http://www.ShareJS.com)
* 使用此脚本程序，请保留此声明
* 获取此脚本以及更多的JavaScript程序，请访问 http://www.ShareJS.com
******************************************************/

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+')">->切换到折线图</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">';
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="'+b_w+';height:'+d[i][2]/d_pv_max*100+'"><div class="gra" style="'+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" width="10"></td>';
b+=b_d1;
b+='<td width="10" valign="top"><img src="tu_back_right.gif" width="10"></td></tr><tr height="20" align="center" 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;'+b_w+';border:#000000 1px solid;"></span> '+title_ip+' '+d_ip_all+'  <span class="gra" style="height:10;'+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+')">->切换到柱状图</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">';
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" width="10"></td>';
l+=l_d1;
l+='<td width="10" valign="top"><img src="tu_back_right.gif" width="10"></td></tr><tr height="20" align="center" 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;'+b_w+';border:#000000 1px solid;"></span> '+title_ip+' '+d_ip_all+'  <span style="font-size:1px;background-color:red;height:2;'+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);
}
*/
</script>

<BODY>
   <div id="sa" data="本周访问统计,访问IP,访问量,20,25;星期日,31,48;星期一,50,455;星期二,67,478;星期三,60,531;星期四,59,310;星期五,57,329;星期六,0,0"></div>
   <br><br>
   <div id="sa" data="最近7天访问统计,访问IP,访问量,25,30;星期六,33,320;星期日,31,48;星期一,50,455;星期二,67,478;星期三,60,531;星期四,59,310;星期五,57,329"></div>
   <br><br>
   <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>

</BODY>
</HTML>

查看全文

相关阅读:
Git-远程版本库
 Git-Git分支
 Git-Git里程碑
 Git-冲突解决
 Git-Git库管理
 Git-Git克隆
 Git-改变历史
 Git-历史穿梭
 RHCE考试
 RHCSA考试

原文地址：https://www.cnblogs.com/liyuxin/p/2189448.html