如何通过html实现动态显示颜色块的报表效果?

如何通过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 实现动态显示颜色块的报表效果(实例代码),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对路饭网站的支持!