JS实现H5显示动态进度条
1. 问题描述
很多用户可能会想要在H5的方式下用进度条的方式显示数据，且想要有图表里条形动态显示的效果。
因为在H5下用条形图，预览性能很差，由于数据量很大，一个数据对应一个图表，图表加载不是同时加载，顺序显示，而且速度很慢。
注：该效果只能在H5页面实现，需下载移动端h5插件
2. 解决方法
这里提供一个方法：在单元格里用html元素来显示条形图，然后用js实现加载后的动画效果
3. 示例
3.1 模板样式修改
打开模板%FR_HOME%\WebReport\WEB-INF\reportlets\demo\analytics\sales\Sign.frm
修改单元格F3里的HTML代码，使初始条形宽度为0%
<table width=0% border=0 cellspacing=0 cellpadding=0 height='3'> <tr> <td bgcolor='#54b7e8'><div color=#ffffff align=right></div></td> </tr> </table>
F列后插入一列，在单元格G3设置条形图长度百分比的值，然后将G列隐藏
K和L列的修改方法同上
3.2 动态效果JS设置
当前控件选择form，添加初始化后事件，实现动态加载的效果：
function myan(obj, mywidth, interval, sp) {
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var flag = true;
var icur=0;
icur = parseFloat(obj.width());
var speed = (mywidth - icur) * sp;
if(icur < mywidth){
flag = false;
}
obj.width(icur+speed);
if(flag){
clearInterval(obj.timer);
}
},interval);
}
setTimeout(function() {
$("td div table").each(function () {
$width=$(this).parent().parent().next().find("span").text()*$(this).parent().parent().width()/100;
myan($(this),$width,10, 0.1);
})},50)
保存模板，预览时在报表路径后面加上参数op=h5即可看到如上效果
附件列表
主题： 二次开发
标签：
已验证