上上周用FusionCharts做报表时,有个图是进度条的形式,其实在FusionCharts 3.0之后已经支持了(Linear Gauge),可惜现有系统用的还是1.2.3版本的,重新引入新版本有点不现实,所以只能采取另外的方式了。

后来采用了DIV的方式实现,用一个外层的DIV作为完整的进度框,然后再定义一个span放在DIV中,作为实际的进度框,获取到进度值之后,通过css去渲染这个span的宽度,实现进度条的效果。

1、首先定义一个空的DIV,做为容器使用,后面可以直接替换掉这个DIV里面的内容

<div id="chartdivCSJMDProgressLoad"></div>

2、通过dwr方式获取到进度值之后,渲染进度条

//渲染进度条
renderProgressInfo(data[0].MEASURE_TOTAL_VALUE,"chartdivCSJMDProgressLoad");
//渲染电压合格率类指标的进度条
function renderProgressInfo(MeasureTotalValue,SpanId){
var vProgressInfo = "";
if(MeasureTotalValue > 90){
vProgressInfo = "<div class='jindutiao_out'><span class='jindutiao_green' style='width:"+MeasureTotalValue*2+"px;font-size: 18px;font-weight: bold;font-family: 微软雅黑, Verdana, sans-serif, 宋体;color:#000;text-align:center;line-height:50px;'>"+MeasureTotalValue+"%</span></div>";
}else{
vProgressInfo = "<div class='jindutiao_out'><span class='jindutiao_red' style='width:"+MeasureTotalValue*2+"px;font-size: 18px;font-weight: bold;font-family: 微软雅黑, Verdana, sans-serif, 宋体;color:#000;text-align:center;line-height:50px;'>"+MeasureTotalValue+"%</span></div>";
}
document.getElementById(SpanId).innerHTML=vProgressInfo;
}

上面标红的地方是重点,第一个div的样式是外层边框,宽为200px,加一点边框;接下来是span,span的宽度通过进度值*2去计算后再确定,然后用背景图片去渲染span的颜色

.jindutiao_out{
width:200px;
height:48px;
border:solid 1px #dcdcdc;
text-align:left;
margin-top:2px;
}
.jindutiao_green{
height:48px;
display:inline-block;
background-image:url(../img/lorebg_27_1X48.png);
background-repeat:repeat-x;
}
.jindutiao_red{
height:48px;
display:inline-block;
background-image:url(../img/lorebg_32_1X48.png);
background-repeat:repeat-x;
}

最终的效果如下:

小结:

通过这种方式实现的话,其实有一点取巧,效果比较一般,也没有像FusionCharts那样的动画效果,如果要求没那么严格或者只是单独展示这种类似的进度条的话,这个方式还是有一定作用的。  

通过DIV+span方式模拟进度条的实现方法的更多相关文章

  1. C#模拟进度条

    自己看源码 using System; namespace ConsoleTest { class Program { static void Main(string[] args) { Consol ...

  2. MVC上传文件并模拟进度条

    进度条样式和JS <style type="text/css"> .spa { font-size: 12px; color: #0066ff; } .put { fo ...

  3. 环形进度条的实现方法总结和动态时钟绘制(CSS3、SVG、Canvas)

    缘由: 在某一个游戏公司的笔试中,最后一道大题是,“用CSS3实现根据动态显示时间和环形进度[效果如下图所示],且每个圆环的颜色不一样,不需要考虑IE6~8的兼容性”.当时第一想法是用SVG,因为SV ...

  4. Asp.Net 无刷新文件上传并显示进度条的实现方法及思路

    相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦苦来 实现呢?我并不否认”拿来主义“,只是我个人更喜欢凡是求个所以 ...

  5. ASP.Net 上传进度条的实现方法

    对于加载时间比较长的ASP.NET页面,我们可以在客户端浏览器中显示进度条来显示页面正在装载.下面就是具体的实现过程: 新建项目,名字为WebPortal,在项目类型中选择Visual C#项目或者V ...

  6. 关于C# WinForm中进度条的实现方法

    http://www.cnblogs.com/Sue_/articles/2024932.html 进度条是一个软件人性化考虑之一,他给用户的感觉就是程序内部在不停的动作,执行到了什么程度,而不是整个 ...

  7. matlab GUI之常用对话框(二)-- 进度条的使用方法

    常用对话框(二) 进度条   waitbar 调用格式: h = waitbar(x,'message')  waitbar(x,'message','CreateCancelBtn','button ...

  8. Python模拟进度条

    import time for i in range(0,101,2) time.sleep(0.2) num = i // 2 per = '\r %s %% : %s'%(i,'*'*num) p ...

  9. 自定义view的drawRoundRect模拟进度条

    主要方法发介绍 1:drawRoundRect参数介绍 drawRoundRect(l,t,r,b,rx,ry,paint)里面的参数可以有两种: 1:前四个参数(l,t,r,,b)分别是矩形左边距离 ...

随机推荐

  1. Ubuntu 16.04 安装ftp服务器传输文件

    最近在搞深度学习,老师比较宝贝他的服务器,要求我以后负责管理服务器.往后所有要使用服务器的人都必须向我申请账号,然后只允许客户端访问,使用文件传输软件传输文件.像我这样一个linux菜逼,这种要求不是 ...

  2. 【SharePoint学习笔记】第3章 SharePoint列表新特性以及数据访问

    第3章 SharePoint列表新特性以及数据访问   使用CAML查询语言     CAML:协作应用程序标记语言 Collaboration Application Markup Language ...

  3. An invalid character [32] was present in the Cookie value

    系统安装Tomcat版本为:tomcat8,登录时报错"An invalid character [32] was present in the Cookie value" 处理方 ...

  4. [转]编译安装libevent,memcache,以及php的memcached扩展

    一 安装libevent 1.去官网http://libevent.org/ 下载最新源码,我用的是libevent-2.0.20-stable.tar.gz 2.解压到/usr/src目录 ,执行命 ...

  5. jquery中ajax在firefox浏览器下“object XMLDocument”返回结果的解决办法

    asp.net中借助jquery的ajax处理功能,使用起来很方便.但是在firefox下获得的data报错object XMLDocument.这是因为默认的情况下把datatype用html来解析 ...

  6. Nginx -- Gzip 压缩功能作用

    1.对应的压缩参数说明# 开启gzip压缩功能gzip on; # 设置允许压缩的页面最小字节数,页面字节数从header头的Content-Length中获取.默认值是0,不管页面多大都进行压缩,建 ...

  7. Python 网络编程(二)

    Python 网络编程 上一篇博客介绍了socket的基本概念以及实现了简单的TCP和UDP的客户端.服务器程序,本篇博客主要对socket编程进行更深入的讲解 一.简化版ssh实现 这是一个极其简单 ...

  8. ubuntu14.04 python自带版本升级

    ubuntu14.04 python自带版本升级 sudo add-apt-repository ppa:fkrull/deadsnakes-python2. sudo apt-get update ...

  9. IO操作

    /// <summary> /// 文件读写操作/// </summary> public partial class TestIO : DevComponents.DotNe ...

  10. mac 设置 git 和github 告别命令行

    针对和我一样的新手,大虾们请轻拍. 很多小伙伴都想用git管理自己的代码,或者想在github上上传自己的项目.在网上找了几篇这方面的文章,都是用命令行设置的. 用命令行管理和安装太坑爹,这里有一个简 ...