[FineReport]图形化显示数据(进度条/等级)CSS

官方帮助文档给出了非常明确解决办法：

地址：http://help.finereport.com/doc-view-366.html

在项目中测试：

1.插入公式并设置显示内容为HTML



2.效果预览



这边有个BUG,比例不协调，因为把字符显示到背景色中，网友海南-cherishdqy 给出了优化建议：

"<table width=100% border=0 cellspacing=0 cellpadding=0> <tr> " + if(ROUND(F3 / E3 * 100, 2)  > 50, "<td bgcolor=orange width=" + ROUND(F3 / E3 * 100, 2)  + "%>
<div align=right>" + ROUND(F3 / E3 * 100, 2)  + "%" + "</div>
</td>
<td width=" + ROUND(100 - ROUND(F3 / E3 * 100, 2) , 2) + "%>
</td>
", "<td bgcolor=orange width=" + ROUND(F3 / E3 * 100, 2) + "%>
</td>
<td width=" + ROUND(100 - ROUND(F3 / E3 * 100, 2) , 2) + "%>
<div align=left>" + ROUND(F3 / E3 * 100, 2)  + "%" + "</div>
</td>") + "</tr></table>"

我想既然最终可以通过HTML解析，而且CPT也支持引入CSS。自定义一个bar.css，(如果有时间可以做好美化),存放到CSS目录中，后续设计模板的时候可以反复调用。

bar.css

body {
font-size: 12px;
}
.ProgressBar {
position: absolute;
width: 100px;    /* 宽度 */
border: 0px solid #B1D632;
padding: 0px;
}
.ProgressBar div {
display: block;
position: absolute;
background: #B1D632;
color: #333333;
height: 15px; /* 高度 */
line-height: 15px;  /* 必须和高度一致，文本才能垂直居中 */
}
.ProgressBar div span {
position: absolute;
width: 100px; /* 宽度 */
text-align: center;
font-weight: bold;
}

由于在家无数据库，就做一个简单DEMO：

插入公式：”
” + 50 + “%”



演示效果：