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

本文介绍了如何在网页中模仿Excel/WPS的条件格式功能,动态改变表格背景颜色。通过Python的Flask和Pandas计算数据的最小值、最大值和平均值,对单元格进行归一化处理,然后使用HSL颜色模型在CSS中调整背景颜色。最终前端展示效果接近Excel的条件格式,实现了数据可视化的一种方式。
摘要由CSDN通过智能技术生成

在使用EXCEL或WPS的时候,有一个功能可以根据单元格数值的大小自动改变背景颜色,这样观看数据的时候可以非常清晰的进行对比。这个功能在工具栏:条件格式-色阶
EXCEL/WPS 条件格式
现在我需要在网页里模拟这个功能,实现网页表格内容根据数值大小自动显示不同的背景颜色。经过网上查询相关资料并对比不同的方法,最后选定了采用修改CSS 背景颜色属性值来实现,具体过程如下:

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

  2. CSS样式表里面有一个属性bgcolor来确定背景颜色,而颜色值又有几种方式,这是在w3school.com

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值