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

互联网 18-6-5

本文通过实例代码讲解如何使用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>         <p class="tubiao">             <p class="jihua">                 <p class="left">计划</p>                 <!--计划span存放的地方-->                 <p class="right plan"></p>             </p>             <p class="shiji">                 <p class="left">实际</p>                 <!--实际span存放的地方-->                 <p class="right act"></p>             </p>             <p class="riqi" id="day_id">                 <!--日期存放的地方-->                 <p class="right day"></p>             </p>         </p>         <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 实现动态显示颜色块的报表效果(实例代码)的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签： html