如何把表格做成热点图

来源:互联网 发布:tensorflow cuda9.0 编辑:程序博客网 时间:2024/03/29 18:03

第一次写博客,因为刚开始出来工作实习,老大布置了几个小任务,可自己完全是小白一只,遇到了很多问题,一直在到处请教同学帮忙,上网查资料。决定把这些问题是怎么解决的记录下来以供自己后面学习。
问题描述1:一张数字表格数字越大颜色越深,然后数字比它小的颜色也变浅,能过一眼看出数字大的分布在哪里
我的思路就是首先要找到表格里的最大数,下面是我的代码

var max=document.getElementById("example").rows[2].cells[1].innerHTML;     var mytable = document.getElementById("example");        for(var i=2;i<mytable.rows.length;i++){            for(var j=1;j<mytable.rows[i].cells.length;j++){                var b=mytable.rows[i].cells[j].innerHTML;             if(b>max){                 max=b;                 }            }        }

可是出来的结果始终不是最大数,但是我觉得自己的逻辑没有问题啊,一直找不到原因,后来问了一个同学才发现问题,下面是正确的代码:

var max=document.getElementById("example").rows[2].cells[1].innerHTML;     var mytable = document.getElementById("example");        for(var i=2;i<mytable.rows.length;i++){            for(var j=1;j<mytable.rows[i].cells.length;j++){                var b=Number(mytable.rows[i].cells[j].innerHTML);            if(b==null||b==''){                continue;                }             if(b>max){                 max=b;                 }            }        }

现在找到最大数了,然后就是给每个单元格添加样式,用rgba添加背景色,改变a的值,a的值等于当前单元格的值除以最大值,下面是代码:

for(var i=2;i<mytable.rows.length;i++){            for(var j=1;j<mytable.rows[i].cells.length;j++){                var b=Number(mytable.rows[i].cells[j].innerHTML);                mytable.rows[i].cells[j].style.background=('rgba(155,59,51,' + ((b) ? (b/max) : '0.1') + ')');            }        }

这样就把表格做成热点图了,下面是完整的代码

 $(document).ready(function (){   var max=document.getElementById("example").rows[2].cells[1].innerHTML;     var mytable = document.getElementById("example");        for(var i=2;i<mytable.rows.length;i++){            for(var j=1;j<mytable.rows[i].cells.length;j++){                var b=Number(mytable.rows[i].cells[j].innerHTML);            if(b==null||b==''){                continue;                }             if(b>max){                 max=b;                 }            }        }        for(var i=2;i<mytable.rows.length;i++){            for(var j=1;j<mytable.rows[i].cells.length;j++){                var b=Number(mytable.rows[i].cells[j].innerHTML);                mytable.rows[i].cells[j].style.background=('rgba(155,59,51,' + ((b) ? (b/max) : '0.1') + ')');            }        }});

效果图
热点图

2 0