在使用EXCEL或WPS的时候,有一个功能可以根据单元格数值的大小自动改变背景颜色,这样观看数据的时候可以非常清晰的进行对比。这个功能在工具栏:条件格式-色阶
现在我需要在网页里模拟这个功能,实现网页表格内容根据数值大小自动显示不同的背景颜色。经过网上查询相关资料并对比不同的方法,最后选定了采用修改CSS 背景颜色属性值来实现,具体过程如下:
-
后端Python在Flask里用Pandas计算好要显示的表格的某一行或者整个表格数据的的最小值、最大值和平均值,然后对每一个单元格的数据进行归一化处理,也就是要计算出每个单元格数值对整体数据的偏移量。比如说最大值显示红色,最小值显示绿色,计算出每个单元格的数据偏移后,就可以知道颜色改变化多少。做归一化处理的目的是为了让每一行的颜色不因为最大值和最小值的不同而改变,因为每一行的最大值和最小值是不同的,如果根据他们的绝对值来计算颜色值,那不同的行颜色就不一样。数据归一化可以查询相关具体文章,就算把数据集里的最大值映射为1,最小值映射为0,中间值映射为0-1. 这样不管每一行的数据大小是多少,都可以映射到0-1区间。
这个数据处理过程由Python Pandas在Flask程序里完成,然后通过模板渲染的方式将值传递到HTML网页里。 -
CSS样式表里面有一个属性bgcolor来确定背景颜色,而颜色值又有几种方式,这是在w3school.com