`
weitao1026
  • 浏览: 1053737 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

html中化柱状图,折线图

 
阅读更多

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0070)http://qbit.100steps.net/javascript/%B7%C3%CE%CA%CD%B3%BC%C6%CD%BC.htm -->
<HTML xmlns:v = "urn:schemas-microsoft-com:vml"><HEAD><TITLE>本周报表</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312"><LINK 
href="本周报表.files/admin.css" type=text/css rel=stylesheet>
<STYLE>v:* {
    BEHAVIOR
: url(#default#VML); POSITION: absolute
}
DIV 
{
    FONT-SIZE
: 12px
}
TD 
{
    FONT-SIZE
: 12px
}
.gra 
{
    FONT-SIZE
: 1px; BORDER-BOTTOM: #000000 1px solid; BACKGROUND-COLOR: #cedbff
}
.gra2 
{
    FONT-SIZE
: 1px; BORDER-BOTTOM: #000000 1px solid; BACKGROUND-COLOR: #003399
}
</STYLE>

<SCRIPT>
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+'% '+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="pic/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="pic/tu_back_left.gif" width="10"></td>';
    b
+=b_d1;
    b
+='<td width="10" valign="top"><img src="pic/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;width:'+b_w+';border:#000000 1px solid;"></span>&nbsp;'+title_ip+' '+d_ip_all+'&nbsp;&nbsp;<span class="gra" style="height:10;width:'+b_w+';border:#000000 1px solid;"></span>&nbsp;'+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+'% '+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="pic/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="pic/tu_back_left.gif" width="10"></td>';
    l
+=l_d1;
    l
+='<td width="10" valign="top"><img src="pic/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;width:'+b_w+';border:#000000 1px solid;"></span>&nbsp;'+title_ip+' '+d_ip_all+'&nbsp;&nbsp;<span style="font-size:1px;background-color:red;height:2;width:'+b_w+';border:#000000 1px solid;"></span>&nbsp;'+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>

<META content="MSHTML 6.00.2900.3132" name=GENERATOR></HEAD>
<BODY>
<TABLE cellSpacing=0 cellPadding=0 width="98%" align=center border=0>
  
<TBODY>
  
<TR>
    
<TD>
      
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
        
<TBODY>
        
<TR>
          
<TD class=titlefont_02 align=middle height=27>访问统计图 
      
</TD></TR></TBODY></TABLE>
      
<TABLE style="BORDER-COLLAPSE: collapse" cellSpacing=1 cellPadding=1 
      
width="100%" align=center border=0>
        
<TBODY>
        
<TR align=middle>
          
<TD class=back_font width="100%">
            
<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=middle>
          
<TD class=back_font width="100%">
            
<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=middle>
          
<TD class=back_font width="100%">
            
<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=middle>
          
<TD class=back_font width="100%">
            
<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=middle>
          
<TD class=back_font width="100%">
            
<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=middle>
          
<TD class=back_font width="100%">
            
<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=middle>
          
<TD class=back_font width="100%">
            
<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=middle>
          
<TD class=back_font width="100%">
            
<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></TBODY></TABLE></TD></TR></TBODY></TABLE></BODY></HTML>

分享到:
评论

相关推荐

    中化集团面试经验

    在探讨“中化集团面试经验”这一主题时,我们不仅要关注面试本身,还要深入了解中化集团的企业文化、招聘流程以及面试者可能遇到的各种挑战。以下是从标题、描述、标签和部分内容中提炼出的关键知识点。 ### 关键...

    18中化Y1:中国中化股份有限公司2019年半年报.PDF

    中国中化股份有限公司2019年半年报 本报告从中国中化股份有限公司2019年半年报的内容中,提炼出以下知识点: 1. 重大风险提示 中国中化股份有限公司在报告中披露了五项重大风险提示,包括利率风险、流动性风险、...

    IBM 与中化携手创辉煌

    中化公司选用2台RS/6000 J30(4CPU,128MB)作为主服务器,构成双机热备份,并各配有一台共享磁盘阵列(48G),23台IBM RS/6000 C10作为部门服务器,形成面向应用的两级服务器管理。全公司1000多台IBM586 PC工作...

    19能源03:中化能源股份有限公司2019年年度报告.PDF

    中化能源股份有限公司作为石油化工行业的龙头企业,其在2019年的年度报告无疑成为了洞察该行业发展趋势的重要窗口。这份详尽的年度报告不仅披露了公司一年来的运营状况,同时也深刻揭示了企业面临的多重风险,为企业...

    中化泉州 100 万吨年乙烯及炼油改扩建项目环境影响报告书 .pdf

    中化泉州100万吨/年乙烯及炼油改扩建项目环境影响报告书详细阐述了该石化工程项目的环境评估过程、现状调查、预测评价以及环保措施等多个方面的内容。在环境保护越来越受到重视的当下,此类环境影响报告书对于审批、...

    中化国际再融资建议书.ppt

    【中化国际再融资建议书】是一份由中信证券股份有限公司在2002年5月编写的关于中化国际持续融资策略的报告。报告详细分析了当时的中国证券市场环境,探讨了适合中化国际的再融资方式,并提出了具体的时间进度安排、...

    中化岩土:首次公开发行股票招股说明书.PDF

    【中化岩土工程股份有限公司首次公开发行股票招股说明书】详细解析: 中化岩土工程股份有限公司是中国一家专注于岩土工程领域的公司,总部位于北京市大兴工业开发区。此份招股说明书详细列出了公司首次公开发行股票...

    中化集团HSE管理体系.pdf

    在众多中国企业中,中化集团以其全面而系统的HSE管理体系,成为行业内的佼佼者。本文将深入解读中化集团HSE管理体系的构建与实施,阐述其如何在确保企业运营安全的同时,促进环境保护和员工健康,以及其对社会责任的...

    中化公司营销培训.ppt

    在中化公司的营销培训中,首先会介绍营销环境的变化,这涉及到消费者行为、竞争对手动态、政策法规以及经济状况等多个方面。理解这些变化对于制定适应市场的策略至关重要。 【市场细分战略】 市场细分是指将广泛的...

    中化企业云计算案例介绍

    ### 中化企业云计算案例介绍 #### 一、背景与挑战 在全球经济形势多变的背景下,“中化”作为一家国有大型企业,在国内外市场都取得了快速的发展。为了支持其不断扩张的业务需求,中化进行了多次的企业并购活动。...

    中化集团风险管理.doc

    中化集团风险管理.doc

    中化公司营销培训gltp.pptx

    中化公司营销培训gltp.pptx

    中化国际持续融资项目建议书.ppt

    【中化国际持续融资项目建议书】 中化国际的发展战略与资金需求紧密相连,其核心目标是成为国内领先的化工品分销服务商、专业物流服务商及化工品细分行业的领导者。这一目标始于1998年公司成立,经过多次战略调整,...

    中化国际物流服务战略定位与实施计划.doc

    中化国际物流服务战略定位与实施计划主要探讨的是在全球化背景下,中化国际如何利用市场机遇,通过合理的战略定位和实施策略,提升其在物流服务领域的竞争力,特别是聚焦于高端化学品物流市场。以下是对该文档内容的...

    中化公司消防安全培训.pptx

    中化公司消防安全培训.pptx

    中化天脊高平化肥厂集散控制系统.PDF

    中化天脊高平化肥厂采用了集散控制系统,具体的技术细节和系统架构是本文档的关注焦点。 中化天脊高平化肥厂是一个位于中国山西省高平市的大型化肥生产基地,由中化集团旗下的天津煤化工公司(SINOCHEM–Tianjin ...

    中化集团HSE管理体系.doc

    中化集团的HSE管理体系是一个全面且严谨的安全、健康和环境管理框架,旨在确保企业的运营过程中实现零重伤、零职业安康事故和零环保事件的目标。这个体系以HSE的方针、理念、作业准那么、管理机构设置、管理流程和...

Global site tag (gtag.js) - Google Analytics