在Web网页里面实现像Excel/WPS条件格式那样根据数据大小自动改变背景颜色（网页数据热力图实现方法）

在使用EXCEL或WPS的时候，有一个功能可以根据单元格数值的大小自动改变背景颜色，这样观看数据的时候可以非常清晰的进行对比。这个功能在工具栏：条件格式-色阶

现在我需要在网页里模拟这个功能，实现网页表格内容根据数值大小自动显示不同的背景颜色。经过网上查询相关资料并对比不同的方法，最后选定了采用修改CSS 背景颜色属性值来实现，具体过程如下：

后端Python在Flask里用Pandas计算好要显示的表格的某一行或者整个表格数据的的最小值、最大值和平均值，然后对每一个单元格的数据进行归一化处理，也就是要计算出每个单元格数值对整体数据的偏移量。比如说最大值显示红色，最小值显示绿色，计算出每个单元格的数据偏移后，就可以知道颜色改变化多少。做归一化处理的目的是为了让每一行的颜色不因为最大值和最小值的不同而改变，因为每一行的最大值和最小值是不同的，如果根据他们的绝对值来计算颜色值，那不同的行颜色就不一样。数据归一化可以查询相关具体文章，就算把数据集里的最大值映射为1，最小值映射为0，中间值映射为0-1. 这样不管每一行的数据大小是多少，都可以映射到0-1区间。
这个数据处理过程由Python Pandas在Flask程序里完成，然后通过模板渲染的方式将值传递到HTML网页里。
CSS样式

在Web网页里面实现像Excel/WPS条件格式那样根据数据大小自动改变背景颜色（网页数据热力图实现方法）相关推荐

WPS Excel表格条件格式在哪如何使用以大于500的数字飘红加粗为例
条件格式的功能是很强大的,可以实现很多的显示效果,可以满足某个条件的显示格式.它在软件中的位置与office有所不一样,在WPS表格中有两个位置可以找到它:格式-条件格式.下文以大于500的数字飘红, ...
Excel对整体数据定位相同的背景颜色单元格？
今天要和大家分享的是,Excel如何对整体数据定位相同的背景颜色单元格?我们听说过定位空值,定位错误值,那么就来看今天是如何定位背景颜色值的吧 (方方格子插件) 1.先看动图演示吧 2.开始之前我 ...
Excel——数据有效性+条件格式应用
一. 数据有效性在Excel中,使用数据有效性可以控制用户输入到单元格的数据或值的类型. 调出"数据有效性"对话框(Excel2010):单击菜单栏中的"数据" ...
今天带大家认识下excel的条件格式
Excel作为一款功能实用的电子表格软件,提供了许多有助于数据可视化和分析的工具和功能.其中,条件格式是一项十分实用的功能,它允许我们根据特定的条件自动对单元格进行格式化. 在[首页]选项卡上,点击[ ...
Excel中条件格式应用的探讨之突出显示！
在Excel中,所谓条件格式是指当指定条件为真时,Excel自动应用于单元格的格式,例如,单元格底纹或字体颜色.如果想为某些符合条件的单元格应用某种特殊格式,使用条件格式功能可以比较容易实现.如果再结 ...
excel 的条件格式（二）
数据条一.使用默认值使用条件格式中的数据条可以非常方便地对一定区域内的单元格的数值进行可视化.照着以下步骤执行,便可以添加数据条. 选择需要添加数据条的数据区域. 点击开始菜单,在样式组里点击条件 ...
Excel中条件格式
写文档时总是要使用Excel单元格条件格式突出显示单元格,下面给出个人的实现: 选择单元格数值时,可以定义以下类型的条件: 介于(定义两个数值) 未介于(定义两个数值) 等于(定义一个数值) 不等于( ...
Excel 设置表格备选项，以及根据值改变表格颜色
重复上边新建规则的操作,添加进行中和已完成的规则
excel用条件格式设置隔行变色
1.选中要设置隔行变色的区域 2.点击条件格式->新建规则->使用公式确定要设置格式额单元格 3.输入公式 =mod(row(),2) = 0,点击格式按钮,选择填充的颜色,点击确定.如 ...
EXCEL中条件格式中如果为真则停止的设置
iamlaosong文每天发布质量指标,对完成不太好的醒目显示,现在的要求是指标后3名高调显示,如果指标达到90%,则不用显示了. 因为单位数量恒定,所以只要设置值最小的20%高调显示就可以显示后3 ...

在Web网页里面实现像Excel/WPS条件格式那样根据数据大小自动改变背景颜色（网页数据热力图实现方法）

在Web网页里面实现像Excel/WPS条件格式那样根据数据大小自动改变背景颜色（网页数据热力图实现方法）相关推荐

最新文章

热门文章