ReportStudio入门教程(七十二) - 显示时间进度(进度条版)

上一次， 我们只是使用一个文字显示出了进度，这回呢， 我们使用一个像进度条一样的图形来显示

像这样：

1. CSS样式

这是为了控制样式

<style type="text/css"> 
body{ 
text-align:center; 
vertical-align:middle; 
} 
.graph{ 
width:100px; 
border:1px solid #4A76C7; 
height:15px; 
vertical-align:middle; 
} 
#bar{ 
display:block; 
background:#4A76C7; 
float:left; 
height:100%; 
text-align:center; 
vertical-align:middle; 
} 
</style> 

2. 时间进度显示

我们使用这3个HTMl项目

第1个HTML项目:

第2个HTML项目：

注意这个我们要修改源类型为“报表表达式”

这里，我们用一个Table，存放文本的信息

3. JS控制图形展示

我们需要在“页尾”，添加JS控制图形的显示

4.总体思想

我们使用HTML项目，控制文本，使用DIV,SPAN，使用JS控制SPAN的所占的百分比，就这样而已，个人对于样式不太擅长，大家可以再优化下。