HTML5

hyl198611

浏览: 228799 次
性别:
来自: 北京

最近访客更多访客>>

oswin7896

laughing_yang

programwb

guyong1018

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

HTML5 横向瀑布图

<!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>

<BODY style="margin:0px">
<canvas id="c" onmousemove="pop_alert(event)" style="border:1px solid #c3c3c3;"></canvas>
<div id="xycoordinates" style="float:right"></div>
<SCRIPT LANGUAGE="JavaScript">
// var data = [["58.68.228.104","GET /registerByUnameAjax?uname=2851047_51fanli&username=2851047&password=lekan_51fanli_&email=voeleov@sina.cn&validatecode=homeregister&type=5 HTTP/1.1","200","account","540","1.29","0"], ["58.68.228.104","GET /validateUnameAjax?uname=2881_51fanli HTTP/1.1","200","account","186","2.17","237"],["58.68.228.104","GET /validateUnameAjax?uname=37118534_51bi_com HTTP/1.1","200","account","186","3.13","264"],["58.68.228.104","GET /validateEmailAjax.action?email=13817678568@126.com HTTP/1.1","200","account","186","5.29","5"],["58.68.228.104","GET /validateUnameAjax?uname=2096921_51fanli HTTP/1.1","200","account","186","6.09","264"],["58.68.228.104","GET /registerByUnameAjax?uname=9356816_51fanli&username=9356816&password=lekan_51fanli_&email=liyangfangqq@126.com&validatecode=homeregister&type=5 HTTP/1.1","200","account","545","10.31","631"],["58.68.228.104","GET /registerByUnameAjax?uname=9356816_51fanli&username=9356816&password=lekan_51fanli_&email=liyangfangqq@126.com&validatecode=homeregister&type=5 HTTP/1.1","300","account","545","10.31","0"]];
var data = [ ["27.155.154.171","GET /queryVideoFiles?site=5&version=2.01&entranceId=9602&userId=-1&videoId=133344&videoType=1&idx=1&did=2&s=2 HTTP/1.1","200","account","1165","8.37","207"], ["27.155.154.171","GET /queryVideoFiles?site=5&version=2.01&entranceId=9602&userId=-1&videoId=133344&videoType=1&idx=2&did=2&s=2 HTTP/1.1","200","account","1165","8.38","224"], ["27.155.154.171","GET /queryVideoFiles?site=5&version=2.01&entranceId=9602&userId=-1&videoId=133344&videoType=1&idx=1&did=2&s=2 HTTP/1.1","200","account","1165","8.41","152"], ["27.155.154.171","GET /queryVideoFiles?site=5&version=2.01&entranceId=9602&userId=-1&videoId=133344&videoType=1&idx=2&did=2&s=2 HTTP/1.1","200","account","1165","8.41","155"], ["27.155.154.171","GET /queryVideoFiles?site=5&version=2.01&entranceId=9602&userId=-1&videoId=133344&videoType=1&idx=3&did=2&s=2 HTTP/1.1","200","account","1162","8.51","152"],["27.155.154.171","GET /queryVideoFiles?site=5&version=2.01&entranceId=9602&userId=-1&videoId=133344&videoType=1&idx=3&did=2&s=2 HTTP/1.1","200","account","1162","8.59","152"] ];
var at_time=[8];

var d_length = data.length;

//访问时间作为间隔点, 响应时长作为矩形图长度
var b_width = document.documentElement.clientWidth;
var b_height = document.documentElement.clientHeight;
var c=document.getElementById("c");
c.width = b_width - 60;
//alert(d_length);
c.width = c.width - 150;
c.height = d_length * 30 + 30;

var c_avg_width = (c.width) / at_time.length;
alert(c.width+","+c_avg_width);

var cxt=c.getContext("2d");
//X轴名称
for (var m = 0; m<= at_time.length; m++ )
{
    cxt.fillText(at_time[m],c_avg_width * m + 150,20);
}
//画横坐标
cxt.moveTo(150, 25);
cxt.lineTo(c.width, 25);
cxt.strokeStyle = "#000";
cxt.stroke();

var bb = new Array();

for (var y =0; y< d_length ;y++ )
{
    var a = data[y][5].split(".");
    //alert(a[0]+","+a[1]);
    for (var u=0 ; u< at_time.length ; u++)
    {
        if (a[0] == at_time[u])
        {
            bb.push(u+"."+a[1]);
        }
    }
}


var p_array = new Array();

for (var x=0 ; x < d_length ; x++)
{
    try {
        document.body.removeChild(document.getElementById("d1"));
    } catch (e) {}

    var a_array = new Array();
    a_array[0] = parseInt(bb[x] * c_avg_width + 150);
    a_array[1] = (30 * (x+1)+10);
    a_array[2] = data[x][1];
    a_array[3] = data[x][2];
    a_array[4] = data[x][3];
    a_array[5] = data[x][4];
    a_array[6] = data[x][5];
    a_array[7] = data[x][6];
    p_array.push(a_array);


    if(data[x][2] == 200){
        cxt.fillStyle = "#00FF00";
    }else{
        cxt.fillStyle = "#FF0000";
    }
    cxt.fillText(data[x][1],0,30 * (x+1)+15);
    //alert(parseInt(bb[x] * c_avg_width +5)+","+(30 * (x+1)+20));
    cxt.fillRect(bb[x] * c_avg_width + 150,30 * (x+1),5,20);
}
//alert(p_array)

function pop_alert(e){
    try {
        document.body.removeChild(document.getElementById("d1"));
    } catch (e) {}
    var x=e.clientX;
    var y=e.clientY + window.pageYOffset;
    var show_info_array = new Array();
    //alert((e.clientY + window.pageYOffset)+",y="+y);
    document.getElementById("xycoordinates").innerHTML="xy:(" + x + "," + y + ")";
    document.getElementById("xycoordinates").style.cssText="position:absolute;top:"+y+"px;left:"+(x+20)+"px";
    //alert((parseInt(p_array[0][0])+5)+","+(parseInt(p_array[0][0])+10));
    //alert((parseInt(p_array[0][1]) + 11)+","+(parseInt(p_array[0][1]) + 19));
    for (var n=0; n< p_array.length ; n++){
        // x y轴 +7为X和Y起始点 ,x最大加 7+5 y最大加7+4 为X和Y轴最大点
        if (x >= (parseInt(p_array[n][0])) && x <= (parseInt(p_array[n][0])+10) && y >= (parseInt(p_array[n][1])-22) && y <= (parseInt(p_array[n][1]) + 8)){
            //alert( "x="+x+" y="+y);
            var array_b = new Array();
            array_b[0] = p_array[n][2];
            array_b[1] = p_array[n][3];
            array_b[2] = p_array[n][4];
            array_b[3] = p_array[n][5];
            array_b[4] = p_array[n][6];
            array_b[5] = p_array[n][7]+"ms";
            show_info_array.push(array_b);
        }
    }
    show_info(show_info_array,x,y);
}

function show_info(show_info_array,x,y){
    var d = document.createElement("div");
    d.style.cssText = "position:absolute;top:"+y+"px;left:"+(x+20)+"px";
    d.id = "d1";
    var content = "";
    for (var p=0 ; p < show_info_array.length ; p++ )
    {
        content += "URL:"+show_info_array[p][0]+"<br/>状态:"+show_info_array[p][1]+"<br/>类型:"+show_info_array[p][2]+"<br/>大小:"+show_info_array[p][3]+"<br/>访问时间:"+show_info_array[p][4]+"<br/>响应时间:"+show_info_array[p][5]+"<br/>";
    }
    d.innerHTML = content;
    document.body.appendChild(d);
}

</SCRIPT>
</BODY>
</HTML>