Html 实现动态显示颜色块的报表效果(实例代码)

利用html的颜色块动态展示数据

<style type="text/css">            *{                padding: 0;                margin: 0;            }            .tubiao,.jihua,.shiji,.riqi{                width: 100%;                overflow: hidden;                margin-top: 10px;            }            .left{                width: 10%;                float: left;                text-align: center;                height: 25px;                line-height: 25px;            }            .right{                width: 90%;                float: right;                height: 25px;            }            span {                width: 5%;                height: 100%;                text-align: center;                display: inline-block;            }        </style>

<body>        <div class="tubiao">            <div class="jihua">                <div class="left">计划</div>                <!--计划span存放的地方-->                <div class="right plan"></div>            </div>            <div class="shiji">                <div class="left">实际</div>                <!--实际span存放的地方-->                <div class="right act"></div>            </div>            <div class="riqi" id="day_id">                <!--日期存放的地方-->                <div class="right day"></div>            </div>        </div>        <script type="text/javascript">            var temp1="0-0.5-2-2-2-2-1-1";//计划耗时（块的单位宽度）            var temp2="1-1-2-1-2-0-0-0";//实际耗时（块的单位宽度）                        var temp3="5/19-5/20-5/21-5/22-5/23-5/24-5/25-5/26-5/27-5/28";//综合日期            var temp=temp1+"~"+temp2+"~"+temp3;                            var plan = document.getElementsByClassName("plan")[0];            var act = document.getElementsByClassName("act")[0];            var day = document.getElementsByClassName("day")[0];            var num = 20;//创建多少个格            load_first(temp);            //分割数据和添加色块操作            function load_first(temp){                var demo=temp.split("~");                var d1=demo[0].split("-");//计划耗时（块的单位宽度）数组                var d2=demo[1].split("-");////实际耗时（块的单位宽度）数组                var d3=demo[2].split("-");//综合日期数组                for(var i=0;i<d3.length;i++){                    time_span(d3[i]);                }                //alert("6:"+d1.length+"---"+"3:"+d2.length);                //alert("d3.length:"+d3.length);                for(var i=0;i<d1.length;i++){                                    add_span(d1[i],d2[i],i);                }                document.getElementById("day_id").style.marginLeft="-30px";             }                        //新增颜色块,a为计划颜色块宽度，b为实际颜色块宽度            function add_span(a,b,i){                //创建span块                var span1 = document.createElement("span");                var span2 = document.createElement("span");                //定义随机底色                var spa = "rgba(" + rnd(0,255)+ "," + rnd(0,255)+ ","+ rnd(0,255)+ ","+ rnd(0.5,1) +")";//每一个颜色随机出来                if(i==0){                    span1.style.backgroundColor = "000000";                    //clientWidth是对象看到的宽度（不含边线,即border）                    span1.style.width = (plan.clientWidth/num*a) + "px";//计划的每一格的宽度                    //插入节点span1至plan                    plan.appendChild(span1);                    span2.style.backgroundColor = "000000";                    span2.style.width = (plan.clientWidth/num*b) + "px";//实际的每一格的宽度                    act.appendChild(span2);                }else{                    //alert("a:"+a+"b:"+b+"i:"+i);                    if(a=="0"){                        span1.style.backgroundColor = "000000";                            span1.style.width = (plan.clientWidth/num*a) + "px";//计划的每一格的宽度                        //插入节点span1至plan                        plan.appendChild(span1);                    }else{                        span1.style.backgroundColor = spa;                        //clientWidth是对象看到的宽度（不含边线,即border）                        span1.style.width = (plan.clientWidth/num*a) + "px";//计划的每一格的宽度                        //插入节点span1至plan                        plan.appendChild(span1);                    }                    if(b=="0"){                        span2.style.backgroundColor = "000000";                        span2.style.width = (plan.clientWidth/num*b) + "px";//实际的每一格的宽度                        act.appendChild(span2);                                        }else{                        span2.style.backgroundColor = spa;                        span2.style.width = (plan.clientWidth/num*b) + "px";//实际的每一格的宽度                        act.appendChild(span2);                    }                                }            }                        //日期的数据插入            function time_span(time){                //创建span块                var span = document.createElement("span");                                span.style.width = (plan.clientWidth/num*1) + "px";//每一个span的宽度                                span.innerHTML = "" + time;                day.appendChild(span);            }            //随机函数            function rnd(min,max){                return Math.round(Math.random()*(max - min)+min);                            }            function QueryData() {                var displayStyle = "1";                $.ajax({                    type: "post",                    url: "Test.aspx",                    dataType: "text",                    data: { "DispalyStyle": displayStyle },                    error: function (XMLHttpRequest, textStatus, errorThrown) {                        alert(errorThrown + XMLHttpRequest.responseText);                    },                    success: function (json) {                        try {                            load_first(json);                        }                        catch (e) { }                    }                });            }            //QueryData();        </script>    </body>

以上所述是小编给大家介绍的Html 实现动态显示颜色块的报表效果(实例代码)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

Html 实现动态显示颜色块的报表效果(实例代码)