同一个单元格内实现正负进度条显示,且标签不被进度条覆盖
一、实现效果
二、实现思路
假设我们有mysql
数据库表temp_namescore
,其结构和数据如下:
如果我们要实现上述功能,需要将数据转换成可以在前端页面展现的HTML代码,然后在FR中进行HTML渲染,具体步骤如下:
1、写SQL,根据数据和最大值,获取对应的比例,然后拼接成HTML文件
代码如下:
SELECT NAME
,score
,CASE WHEN score / 10000 > 0.01 THEN
CONCAT( "<table width=50% border=0 cellspacing=0 cellpadding=0 align=right> <tr> <td width=", round( score / 10000, 2 )* 80+ "", "% bgcolor=#1fade5><div style='width:1px'></div></td><td align=left> ", score + "", "</td> </tr> </table>" )
WHEN score / 10000 >= 0 AND score / 10000 <= 0.01 THEN
CONCAT( "<table width=50% border=0 cellspacing=0 cellpadding=0 align=right> <tr> <td width=1% bgcolor=#1fade5><div style='width:1px'></div></td><td align=left> ", score + "", "</td> </tr> </table>" )
WHEN score / 10000 < 0 AND score / 10000 >=- 0.01 THEN
CONCAT( "<table width=50% border=0 cellspacing=0 cellpadding=0 align=left> <tr> <td align=right>", score + "", " </td><td width=1% bgcolor=#ea4431><div style='width:1px'></div></td> </tr> </table>" )
WHEN score / 10000 < 0.01 THEN
CONCAT( "<table width=50% border=0 cellspacing=0 cellpadding=0 align=left> <tr> <td align=right>", score + "", " </td><td width=", round( abs( score )/ 10000, 2 )* 80+ "", "% bgcolor=#ea4431><div style='width:1px'></div></td> </tr> </table>" )
END AS '成绩'
FROM
`temp_namescore`
ORDER BY
score DESC
代码解释:
-
score/10000 可以得出当前成绩与最高成绩的比例,这个10000可以写死成一个数,也可以提前通过max获取到。
-
四个when条件分别代表,比例大于1%的,比例大于0小于1%的,比例大于-1%小于0%的,比例小于-1%的。
-
第一个when条件后面的代码解释如下:
<table width=50%>
表示table
元素占据整个单元格的一半,这一步是为了方便同一个单元格中正负数对半显示<table align=right>
表示当前的table元素在单元格中居右显示,即下图右侧红框选中的区域<table><tr><tr/><table/>
表示当前table元素中存在且仅存在一行<td width=10% >
表示第一个td占据该行的10%,即下图中绿框选中的区域bgcolor=#1fade5
表示进度条的颜色为蓝色,等号后面是色值<td><div style='width:1px'><td>
在td中放入一个宽度为1px
的元素,为的是撑起整个td元素
-
第二个td中包含的内容为数字,其中
align=left
表示数字标签是贴着前面的进度条居左显示的,其中 
会渲染成一个空格- 当数字比例小于
1%
时默认进度条宽度就占1%
,所以会出现<td width=1%>
,而不是像第一个一样通过计算得出
- 当数字比例小于
-
第三个when条件后面的代码解释如下:
- 当数字的比例大于
-1%
且小于0%
时默认进度条宽度就占1%
,和整数显示方式一致
- 当数字的比例大于
-
第四个when条件后面的代码解释如下:
<table align=left>
表示负数部分占据单元格的左侧半边- 负数和正数不同的是,负数的数字标签是在进度条的左边,所以要先展示标签的td
<td align-right>
表示标签的td是居右显示紧贴其右侧的进度条
2、将数据集的字段放到对应单元格中,其中进度条的单元格需要宽一些
3、配置进度条的单元格,将其设置为不自动调整,且显示内容设置为用HTML显示内容
模板下载
标签:
Finereport
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· .NET10 - 预览版1新功能体验(一)