实例：Html 实现动态显示颜色块的报表效果

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

*{

padding: 0;

margin: 0;

}

.tubiao,.jihua,.shiji,.riqi{

width: 100%;

overflow: hidden;

margin-top: 10px;

}

.left{

width: 10%;

float: left;

text-align: center;

line-

}

.right{

width: 90%;

float: right;

}

span {

width: 5%;

height: 100%;

text-align: center;

display: inline-block;

}

计划

实际

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

time_span(d3[i]);

}

//alert("6:"+d1.length+"---"+"3:"+d2.length);

//alert("d3.length:"+d3.length);

for(vari=0;i

add_span(d1[i],d2[i],i);

}

document.getElementById("day_id").style.marginLeft="-30px";

}

//新增颜色块,a为计划颜色块宽度，b为实际颜色块宽度

function add_span(a,b,i){

//创建span块

varspan1=document.createElement("span");

varspan2=document.createElement("span");

//定义随机底色

varspa="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.px";//计划的每一格的宽度

//插入节点span1至plan

plan.appendChild(span1);

span2.style.backgroundColor="000000";

span2.style.px";//实际的每一格的宽度

act.appendChild(span2);

}else{

//alert("a:"+a+"b:"+b+"i:"+i);

if(a=="0"){

span1.style.backgroundColor="000000";

span1.style.px";//计划的每一格的宽度

//插入节点span1至plan

plan.appendChild(span1);

}else{

span1.style.backgroundColor= spa;

//clientWidth是对象看到的宽度（不含边线,即border）

span1.style.px";//计划的每一格的宽度

//插入节点span1至plan

plan.appendChild(span1);

}

if(b=="0"){

span2.style.backgroundColor="000000";

span2.style.px";//实际的每一格的宽度

act.appendChild(span2);

}else{

span2.style.backgroundColor= spa;

span2.style.px";//实际的每一格的宽度

act.appendChild(span2);

}

}

}

//日期的数据插入

function time_span(time){

//创建span块

varspan=document.createElement("span");

span.style.px";//每一个span的宽度

span.innerHTML=""+ time;

day.appendChild(span);

}

//随机函数

function rnd(min,max){

return Math.round(Math.random()*(max - min)+min);

}

function QueryData() {

vardisplayStyle="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();

以上所述是小编给大家介绍的Html 实现动态显示颜色块的报表效果(实例代码)，希望对大家有所帮助