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

html动态显示颜色块报表

html

201 浏览量 2020-09-28 04:30:35 上传评论收藏 45KB PDF 举报

资源推荐

资源详情

资源评论

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

本文通过实例代码讲解如何使用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;

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>

</div>

</div>

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";

}

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

评论收藏

内容反馈

weixin_38714162

粉丝: 2
资源: 937

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

最新资源

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

html5本地存储web sql数据库操作增删查找实例

js 特效 html 特效 半透明的表格

javascript实现动态显示颜色块的报表效果

jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)

Qt5开发及实例-CH2005.rar,用组合动画实现照片的动态显示的代码

JAVA上百实例源码以及开源项目源代码

明日科技《C#示例源代码》（13-16）

明日科技C#示例源码.part03

明日科技《C#示例源代码》（17-20）

纯jsp实现的倒计时动态显示效果完整代码

明日科技《C#示例源代码》（5-8）

明日科技《C#示例源代码》（9-12）

Delphi开发范例宝典目录

java源码包---java 源码 大量 实例

明日科技C#示例源码.part04

明日科技C#示例源码.part02

JAVA上百实例源码以及开源项目

明日科技C#示例源码.part01

明日科技C#示例源码

java源码包2

html网页做的动态爱心（超好看）

ECharts+html大数据可视化大屏展示模板，共整合了30多套源码+效果图，做大屏效果的不容错过

最新资源

js 特效 html 特效半透明的表格

java源码包---java 源码大量实例