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


Posted in Javascript onApril 10, 2017

利用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>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
Apr 13 Javascript
文本框中,回车键触发事件的js代码[多浏览器兼容]
Jun 07 Javascript
js实现索引图片切换效果
Nov 21 Javascript
深入探秘jquery瀑布流的实现
Jan 30 Javascript
AngularJS HTML DOM详解及示例代码
Aug 17 Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
Aug 18 Javascript
jQuery实现的瀑布流加载效果示例
Sep 13 Javascript
JS日程管理插件FullCalendar简单实例
Feb 07 Javascript
js+html制作简单验证码
Feb 16 Javascript
webpack学习教程之publicPath路径问题详解
Jun 17 Javascript
通过源码分析Vue的双向数据绑定详解
Sep 24 Javascript
基于Swiper实现移动端页面图片轮播效果
Dec 28 Javascript
bootstrap如何让dropdown menu按钮式下拉框长度一致
Apr 10 #Javascript
ES6生成器用法实例分析
Apr 10 #Javascript
基于javascript的异步编程实例详解
Apr 10 #Javascript
浅谈js-FCC算法Friendly Date Ranges(详解)
Apr 10 #Javascript
javascript实现table单元格点击展开隐藏效果(实例代码)
Apr 10 #Javascript
js实现适配不同的屏幕大小
Apr 10 #Javascript
JS闭包可被利用的常见场景小结
Apr 09 #Javascript
You might like
模拟xcopy的函数
2006/10/09 PHP
PHP+iFrame实现页面无需刷新的异步文件上传
2014/09/16 PHP
php画图实例
2014/11/05 PHP
javascript得到XML某节点的子节点个数的脚本
2008/10/11 Javascript
javascript 匿名函数的理解(透彻版)
2010/01/28 Javascript
背景图跟随鼠标移动的Mootools插件实现代码
2011/12/12 Javascript
使用javascipt---实现二分查找法
2013/04/10 Javascript
jQuery中animate动画第二次点击事件没反应
2015/05/07 Javascript
跟我学习javascript的浮点数精度
2015/11/16 Javascript
JavaScript原生节点操作小结
2017/01/17 Javascript
ionic2屏幕适配实现适配手机、平板等设备的示例代码
2017/08/11 Javascript
JavaScript编写棋盘覆盖代码详解
2017/08/28 Javascript
通过jquery toggleClass()属性制作文章段落更改背景颜色
2018/05/21 jQuery
angular 未登录状态拦截路由跳转的方法
2018/10/09 Javascript
基于JavaScript获取base64图片大小
2019/10/18 Javascript
vue自定义switch开关组件,实现样式可自行更改
2019/11/01 Javascript
js实现特别简单的钟表效果
2020/09/14 Javascript
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
2021/01/22 Vue.js
nestjs返回给前端数据格式的封装实现
2021/02/22 Javascript
[01:15:36]加油刀塔第二期网络版
2014/08/09 DOTA
python解析发往本机的数据包示例 (解析数据包)
2014/01/16 Python
python根据文件大小打log日志
2014/10/09 Python
Python、PyCharm安装及使用方法(Mac版)详解
2017/04/28 Python
python输入多行字符串的方法总结
2019/07/02 Python
马来西亚网上美容店:Hermo.my
2017/11/25 全球购物
南京某软件公司的.net面试题
2015/11/30 面试题
在浏览器端如何得到服务器端响应的XML数据
2012/11/24 面试题
会计实习自我鉴定
2013/12/04 职场文书
十佳教师事迹材料
2014/01/11 职场文书
委托书范本
2014/09/13 职场文书
和谐拯救危机观后感
2015/06/15 职场文书
新教师2015年度工作总结
2015/07/22 职场文书
超级实用!五步法则,教你写好年终工作总结
2019/12/05 职场文书
Python Numpy之linspace用法说明
2021/04/17 Python
mysql5.6主从搭建以及不同步问题详解
2021/12/04 MySQL
MySQL数据库表约束讲解
2022/06/21 MySQL