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 相关文章推荐
jQuery 前的按键判断代码
Mar 19 Javascript
jquery的键盘事件修改代码
Feb 24 Javascript
Node.js实战 建立简单的Web服务器
Mar 08 Javascript
jquery实现在光标位置插入内容的方法
Feb 05 Javascript
理解AngularJs指令
Dec 10 Javascript
理解Javascript的call、apply
Dec 16 Javascript
jQuery中使用animate自定义动画的方法
May 29 Javascript
AngularJS表格详解及示例代码
Aug 17 Javascript
使用jquery实现的循环连续可停顿滚动实例
Nov 23 Javascript
JavaScript反弹动画效果的实现代码
Jul 13 Javascript
vue如何解决循环引用组件报错的问题
Sep 22 Javascript
Jquery使用each函数实现遍历及数组处理
Jul 14 jQuery
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
PHP调用Linux的命令行执行文件压缩命令
2013/01/27 PHP
用php实现选择排序的解决方法
2013/05/04 PHP
CodeIgniter启用缓存和清除缓存的方法
2014/06/12 PHP
php返回相对时间(如:20分钟前,3天前)的方法
2015/04/14 PHP
PHP SPL标准库之文件操作(SplFileInfo和SplFileObject)实例
2015/05/11 PHP
PHP实现在线阅读PDF文件的方法
2015/06/23 PHP
PHP实现的统计数据功能详解
2016/12/06 PHP
解决thinkphp5未定义变量会抛出异常,页面错误,请稍后再试的问题
2019/10/16 PHP
浅析PHP中json_encode与json_decode的区别
2020/07/15 PHP
js技巧--转义符&quot;\&quot;的妙用
2007/01/09 Javascript
如何在Web页面上直接打开、编辑、创建Office文档
2007/03/12 Javascript
DOM_window对象属性之--clipboardData对象操作代码
2011/02/03 Javascript
常用js字符串判断方法整理
2013/10/18 Javascript
jQuery对于显示和隐藏等常用状态的判断方法
2014/12/13 Javascript
JS是按值传递还是按引用传递
2015/01/30 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
2015/05/09 Javascript
浅析JavaScript中的事件机制
2015/06/04 Javascript
特殊日期提示功能的实现方法
2016/06/16 Javascript
JavaScript 最佳实践:帮你提升代码质量
2016/12/03 Javascript
AngularJS 打开新的标签页实现代码
2017/09/07 Javascript
Node.js中使用mongoose操作mongodb数据库的方法
2017/09/12 Javascript
浅谈vue-cli 3.0.x 初体验
2018/04/11 Javascript
jQuery中将json数据显示到页面表格的方法
2018/05/27 jQuery
vue服务端渲染缓存应用详解
2018/09/12 Javascript
python+matplotlib实现动态绘制图片实例代码(交互式绘图)
2018/01/20 Python
python生成以及打开json、csv和txt文件的实例
2018/11/16 Python
Python-Flask:动态创建表的示例详解
2019/11/22 Python
Django REST Swagger实现指定api参数
2020/07/07 Python
Python爬虫设置Cookie解决网站拦截并爬取蚂蚁短租的问题
2021/02/22 Python
HTML5实现Notification API桌面通知功能
2016/03/02 HTML / CSS
户外活动策划方案
2014/03/12 职场文书
毕业证明书
2015/06/19 职场文书
MySQL基础(二)
2021/04/05 MySQL
Python基础之元组与文件知识总结
2021/05/19 Python
日本官方排名前10的动漫,名侦探柯南上榜,第一是一部创造历史的动漫
2022/03/18 日漫
Win11自动黑屏怎么办 Win11自动黑屏设置教程
2022/07/15 数码科技