Html to achieve dynamic display of color blocks report effect (example code)

Use HTML color blocks to dynamically display data

<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">Plan</div>
                <!--Where to store the planned span-->
                <div class="right plan"></div>
            </div>
            <div class="shiji">
                <div class="left">Actual</div>
                <!--Where the actual span is stored-->
                <div class="right act"></div>
            </div>
            <div class="riqi" id="day_id">
                <!--Where the date is stored-->
                <div class="right day"></div>
            </div>
        </div>
        <script type="text/javascript">
            var temp1="0-0.5-2-2-2-2-1-1"; //Planned time (unit width of block)
            var temp2="1-1-2-1-2-0-0-0"; //Actual time consumption (unit width of block)            
            var temp3="5/19-5/20-5/21-5/22-5/23-5/24-5/25-5/26-5/27-5/28";//comprehensive datevar 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; //How many grids to create load_first(temp);
            //Split data and add color blocks function load_first(temp){
                var demo=temp.split("~");
                var d1=demo[0].split("-");//Planned time (unit width of block) arrayvar d2=demo[1].split("-");////Actual time (unit width of block) arrayvar d3=demo[2].split("-");//Comprehensive date arrayfor(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"; 
            }            
            //Add a new color block, a is the planned color block width, b is the actual color block width function add_span(a,b,i){
                //Create span block var span1 = document.createElement("span");
                var span2 = document.createElement("span");
                //Define random background color var spa = "rgba(" + rnd(0,255)+ "," + rnd(0,255)+ ","+ rnd(0,255)+ ","+ rnd(0.5,1) +")"; //Each color comes out randomly if(i==0){
                    span1.style.backgroundColor = "000000";
                    //clientWidth is the width of the object (excluding borders)
                    span1.style.width = (plan.clientWidth/num*a) + "px"; //The width of each grid in the plan //Insert node span1 to plan
                    plan.appendChild(span1);
                    span2.style.backgroundColor = "000000";
                    span2.style.width = (plan.clientWidth/num*b) + "px"; //The actual width of each grid 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"; //The width of each grid in the plan //Insert node span1 to plan
                        plan.appendChild(span1);
                    }else{
                        span1.style.backgroundColor = spa;
                        //clientWidth is the width of the object (excluding borders)
                        span1.style.width = (plan.clientWidth/num*a) + "px"; //The width of each grid in the plan //Insert node span1 to plan
                        plan.appendChild(span1);
                    }
                    if(b=="0"){
                        span2.style.backgroundColor = "000000";
                        span2.style.width = (plan.clientWidth/num*b) + "px"; //The actual width of each grid act.appendChild(span2);                    
                    }else{
                        span2.style.backgroundColor = spa;
                        span2.style.width = (plan.clientWidth/num*b) + "px"; //The actual width of each grid act.appendChild(span2);
                    }                
                }
            }            
            //Date data insertion function time_span(time){
                //Create span block var span = document.createElement("span");                
                span.style.width = (plan.clientWidth/num*1) + "px"; //The width of each span span.innerHTML = "" + time;
                day.appendChild(span);
            }
            //Random function 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>

The above is the Html report effect (example code) that I introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!

<<: A detailed tutorial on master-slave replication and read-write separation of MySQL database

>>: JavaScript implements fireworks effects with sound effects