我这个是JavaScript构建的,它不是个柱状图,而是一个百分比示意条,它可以定义三种颜色,当百分比小于33%的时候显示红色,表示警告,适中的时候显示黄色,表示适中,大于67%的时候显示绿色表示通畅
而且可以动态改变百分比数值,数值改变时,百分比条是用动画方式表现的,
如下图所示:
动态效果可以看我的一个演示demo:http://www.beiju123.cn/ajax-weibo.html
js代码如下:
1 var PercentBar=function(){
2
3 }
4 PercentBar.prototype={
5 /**
6 *这是一个百分比显示条,可以显示现在的数值状况,而且有三种颜色,不同的值的时候有不同的颜色,平滑变化
7 */
8 value:0,
9 inner_ele:null,
10 outer_ele:null,
11 text_ele:null,
12 init:function(config){
13 this.options={
14 color_arr:["#FF4A4A","#FFFF4A","#3FDB3F"],//三种颜色,分别表示低中高三种状态
15 text_arr:["网络信号差","网络信号一般","网络信号好"],
16 back_color:"#fff",//背景颜色
17 width:150,
18 height:12,
19 border_color:"#ddd",
20 container_id:"percent",
21 id:"percentbar",//生成的结构的id
22 max_value:150
23 }
24 mixin(this.options,config);
25 this.createHtml();
26 },
27 createHtml:function(){
28
29 var outer=document.createElement("div");
30 outer.id=this.options.id;
31 var inner=document.createElement("div");
32 inner.style.height=this.options.height+"px",
33 inner.style.width="0px",
34 inner.style.backgroundColor=this.options.color_arr[0]
35 outer.appendChild(inner);
36 this.inner_ele=inner;
37 Dom.get(this.options.container_id).appendChild(outer);
38 outer.style.height=this.options.height+"px",
39 outer.style.width=this.options.width+"px",
40 outer.style.backgroundColor=this.options.back_color,
41 outer.style.border= "1px "+this.options.border_color+" solid"
42 this.outer_ele=outer;
43 var text=document.createElement("div");
44 text.style.height=(this.options.height+10)+"px",
45 text.style.width=this.options.width+"px",
46 text.style.backgroundColor=this.options.back_color,
47 text.style.border= "1px "+this.options.border_color+" solid"
48 text.style.textAlign="center";
49 text.style.lineHeight=(this.options.height+10)+"px"
50 this.text_ele=text;
51 Dom.get(this.options.container_id).appendChild(text);
52 },
53 update:function(num){
54 var ani=new YAHOO.util.Anim(this.inner_ele, {width:{to:(num/this.options.max_value)*this.options.width}},1);
55 ani.onTween.subscribe(function(s, o,handle) {
56 handle.value=handle.inner_ele.style.width.replace("px","")*1
57 var color=""
58 var text=""
59 var num=handle.value;
60 var num2=handle.options.width/3;
61 if(num<=num2){
62 color=handle.options.color_arr[0]
63 text=handle.options.text_arr[0]
64 }else if(num>num2&&num<=num2*2){
65 color=handle.options.color_arr[1]
66 text=handle.options.text_arr[1]
67 }else{
68 color=handle.options.color_arr[2]
69 text=handle.options.text_arr[2]
70 }
71 handle.text_ele.innerHTML=text;
72 handle.inner_ele.style.backgroundColor=color;
73 },this)
74 ani.animate();
75 }
76 }
当然也有css
1 .percent{
2 height:12px;
3 width:150px;
4 background-color: #fff;
5 border: 1px #ddd solid;
6 }
7 .inner{
8 height:12px;
9 width:100px;
10 background-color: #00CC00;
11 }
原理就是动态改变里面那个层的宽度,原理很简单,代码用了yui,呵呵
本文作者:未知
相关实时动态变动的css百分比示意条