wabacus中通过format将百分比数据显示成进度条样式-优快云博客

本文链接：https://blog.youkuaiyun.com/cuiyushan/article/details/84271638

本文介绍了一种使用HTML和CSS将数据表中的百分比数值转换为可视化的进度条的方法。通过SQL语句生成数据，并利用格式化工具将百分比转换成不同颜色的进度条，实现了直观的数据展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如题,通过format将百分比形式的数据改成进度条样式,实际就是把原数据替换成拼凑的html代码

其中的progress_rate列要求是百分比形式,并且其所在的col要求配置align="left".
css中还提供了其他颜色,可以根据需要更换
(注:sql语句是sql server的语法,union拼凑的)
效果如图
[img]http://dl.iteye.com/upload/attachment/0072/0901/3b128824-00e8-334b-9994-a0588d12fd95.png[/img]

page配置文件如下

<!-- 百分比用css进度条显示2012-8-9 -->
<page xmlns="http://www.wabacus.com" id="progress_bar" css="/css/test.css">
	<report id="report1" title="百分比进度条显示" pagesize="10">
		<display>
			<col column="{sequence:0}" label="序号"></col>
			<col column="name" label="名称"></col>
			<col column="progress_rate" label="进度" align="left"></col>
		</display>
		<sql>
			<value>
				<![CDATA[
					select 'a' as name ,'20%' as progress_rate union
					select 'b' as name ,'40%' as progress_rate union
					select 'c' as name ,'50%' as progress_rate union
					select 'd' as name ,'80%' as progress_rate union
					select 'e' as name ,'100%' as progress_rate order by name
				]]>
			</value>
		</sql>
		<format>
			<value>
			<![CDATA[
				progress_rate=progress_rate==null?"0":progress_rate.trim();
				if(Double.parseDouble(progress_rate.substring(0, progress_rate.indexOf('%')))>50)//如果大于50% 显示skin-green
				progress_rate="<div class=\"process-bar skin-green\"><div class=\"pb-wrapper\"><div class=\"pb-highlight\"></div><div class=\"pb-container\"><div class=\"pb-text\">"+progress_rate+"</div><div class=\"pb-value\" style=\"width:"+progress_rate+"\" ></div></div></div></div>";
				//小于50%显示skin-orange
				else progress_rate="<div class=\"process-bar skin-orange\"><div class=\"pb-wrapper\"><div class=\"pb-highlight\"></div><div class=\"pb-container\"><div class=\"pb-text\">"+progress_rate+"</div><div class=\"pb-value\" style=\"width:"+progress_rate+"\" ></div></div></div></div>";
				//System.out.println(progress_rate);
			]]>
		  </value>
		</format>
	</report>
</page>

其中的css内容为

@CHARSET "UTF-8";
/* progress_bar begin */
.process-bar {
        width: 100%;
        display: inline-block;
        *zoom: 1;
}

.pb-wrapper {
        border: 0px solid gray;
        border-style: solid none;
        position: relative;
        background: #cfd0d2;
}

.pb-container {
        border: 0px solid gray;
        border-style: none solid;
        height: 18px;
        position: relative;
        left: 0px;
        margin-right: 0px;
        padding: 1px;
}

.pb-highlight {
        position: absolute;
        left: 0;
        top: 0;
        _top: 1px;
        width: 100%;
        opacity: 0.6;
        filter: alpha(opacity = 60);
        height: 6px;
        background: white;
        line-height: 0;
        z-index: 1
}

.pb-text {
        width: 100%;
        position: absolute;
        left: 0;
        top: 2;
        text-align: center;
}

.pb-value {
        height: 100%;
        background: #19d73d;
}

.pb-text {
        color: black;
}

.skin-green .pb-wrapper {
        border-color: #666;
        border-top-color: #628c2d;
}

.skin-green .pb-container {
        border-color: #666;
        border-left-color: #628c2d;
}

.skin-green .pb-text {
        color: black
}

.skin-blue .pb-wrapper {
        border-color: #0e7c78;
        border-top-color: #41beb9;
}

.skin-blue .pb-container {
        border-color: #0e7c78;
        border-left-color: #41beb9;
}

.skin-blue .pb-text {
        color: white
}

.skin-blue .pb-value {
        background: #159b96;
}

.skin-red .pb-wrapper {
        border-color: #8e1411;
        border-top-color: #cb3d3a;
}

.skin-red .pb-container {
        border-color: #8e1411;
        border-left-color: #cb3d3a;
}

.skin-red .pb-text {
        color: #470200;
}

.skin-red .pb-value {
        background: #d70500
}

.skin-orange .pb-wrapper,.skin-orange .pb-container {
        border-color: #d55110;
}

.skin-orange .pb-text {
        color: #250f00;
}

.skin-orange .pb-value {
        background: #d75a00;
}

.skin-purple .pb-wrapper,.skin-purple .pb-container {
        border-color: #a90561;
}

.skin-purple .pb-text {
        color: #720040;
}

.skin-purple .pb-value {
        background: #9d118e
}

.skin-black .pb-wrapper,.skin-black .pb-container {
        border-color: black
}

.skin-black .pb-text {
        color: gray;
}

.skin-black .pb-value {
        background: #111111;
}

/* progress_bar end */