同一个单元格内实现正负进度条显示，且标签不被进度条覆盖

一、实现效果

二、实现思路

假设我们有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>&nbsp", 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>&nbsp", 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 + "", "&nbsp</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 + "", "&nbsp</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表示数字标签是贴着前面的进度条居左显示的，其中&nbsp会渲染成一个空格

  • 当数字比例小于1%时默认进度条宽度就占1%，所以会出现<td width=1%>，而不是像第一个一样通过计算得出

• 第三个when条件后面的代码解释如下：

  • 当数字的比例大于-1%且小于0%时默认进度条宽度就占1%，和整数显示方式一致

• 第四个when条件后面的代码解释如下：

  • <table align=left>表示负数部分占据单元格的左侧半边
  • 负数和正数不同的是，负数的数字标签是在进度条的左边，所以要先展示标签的td
  • <td align-right>表示标签的td是居右显示紧贴其右侧的进度条

2、将数据集的字段放到对应单元格中，其中进度条的单元格需要宽一些

3、配置进度条的单元格，将其设置为不自动调整，且显示内容设置为用HTML显示内容