jQuery制作简单柱状图实例

本文实例讲述了jQuery制作简单柱状图的方法。分享给大家供大家参考。具体实现方法如下：

Html部分：

复制代码代码如下:

	<head> 

	<title>柱状图</title> 

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

	<link href="css.css" type="text/css" rel="stylesheet" /> 

	<script src="jquery-1.8.2.min.js" type="text/javascript"></script> 

	<script src="histogram.js" type="text/javascript"></script> 

	</head> 

	<body> 

	<div class="histogram-container" id="histogram-container"></div> 

	</body>

CSS部分：

复制代码代码如下:

	/*以下为柱状图样式*/ 

	.histogram-container{position:relative;margin-left:60px;margin-top:10px;margin-bottom:25px;} 

	.histogram-bg-line{border:#999 solid;border-width:0 0px 1px 1px;border-right-color:#eee;overflow:hidden;width:99%;} 

	.histogram-bg-line ul{overflow:hidden;border:#eee solid;border-width:1px 0 0 0;clear:both;} 

	.histogram-bg-line li{float:left;overflow:hidden;background:#fff;} 

	.histogram-bg-line li div{border-right:1px #eee solid;} 

	.histogram-content{position:absolute;left:0px;top:0;width:99%;height:100%;} 

	.histogram-content ul{height:100%;} 

	.histogram-content li{float:left;height:100%;text-align:center;position:relative;} 

	.histogram-box{position:relative;display:inline-block;height:100%;width:20px;} 

	.histogram-content li a{position:absolute;bottom:0;right:0;display:block;width:20px;font-size:0;line-height:0;} 

	.histogram-content li .histogram-name{position:absolute;bottom:-20px;left:0px;white-space:nowrap;display:inline-block;width:100%;font-size:12px;overflow:hidden;} 

	.histogram-y{position:absolute;left:-60px;top:-10px;font:12px/1.8 verdana,arial;} 

	.histogram-y li{text-align:right;width:55px;padding-right:5px;color:#333;} 

	.histogram-bg-line li div,.histogram-y li{height:30px;/*控制单元格的高度及百分比的高度，使百分数与线条对其*/}

Js部分：

复制代码代码如下:

	
	$(function(){ 

	var dataArr={ 

	    "data":[ 

	        {"id":1,"name":"百度","per":"10"}, 

	        {"id":2,"name":"腾讯","per":"20"}, 

	        {"id":3,"name":"新浪","per":"10"}, 

	        {"id":4,"name":"网易","per":"44"}, 

	        {"id":5,"name":"搜狐","per":"50"}, 

	        {"id":5,"name":"小虾虎鱼","per":"69"}, 

	        {"id":5,"name":"人人网","per":"72"}, 

	        {"id":5,"name":"爱奇艺","per":"88"}, 

	        {"id":5,"name":"奇虎360","per":"92"}, 

	        {"id":5,"name":"阿里巴巴","per":"15"}, 

	        {"id":5,"name":"阿里巴巴","per":"10"} 

	    ] 

	}; 

	new histogram().init(dataArr.data); 

	}); 

	function histogram(){ 

	    var controls={}; 

	    var bgColor=new Array("#666666","#21AA7C","#2277BB","#dc7644","#BBAA22","#AA22AA","#338800","#1099EE","#ffcc33","#ED3810"); 

	    this.init=function(data,y){ 

	        setControls(); 

	        buildHtml(data,y); 

	    } 

	    function setControls(){ 

	        controls.histogramContainer=$("#histogram-container"); 

	        controls.histogramBgLineUL=controls.histogramContainer.children("div.histogram-bg-line"); 

	        controls.histogramContentUL=controls.histogramContainer.children("div.histogram-content"); 

	        controls.histogramY=controls.histogramContainer.children("div.histogram-y"); 

	    } 

	    function buildHtml(data,y){ 

	        var len=data.length,perArr=new Array(),maxNum,maxTotal,yStr=''; 

	        var contentStr='',bgLineStr='',bgLineAll=''; 

	        var widthPer=Math.floor(100/len); 

	        minWidth=len*21+60; 

	        controls.histogramContainer.css("min-width",minWidth+"px"); 

	        for(var a=0;a<len;a++){ 

	            perArr[a]=parseInt(data[a]['per']);      

	        } 

	        maxNum=String(perArr.max()); 

	        if(maxNum.length>2){ 

	            var x=parseInt(maxNum.substr(maxNum.length-2,1))+1; 

	            maxTotal=Math.floor(parseInt(maxNum/100))*100+x*10; 

	        }else{ 

	            maxTotal=Math.floor(parseInt(maxNum/10))*10+10; 

	        } 

	        //y轴部分 

	        if(y=="%"){ 

	            yStr+='<li>100%</li><li>80%</li><li>60%</li><li>40%</li><li>20%</li><li>0%</li>';            

	        }else{ 

	            var avg=maxTotal/5; 

	            for(i=5;i>=0;i--){ 

	                yStr+='<li>'+avg*i+'</li>'; 

	            } 

	        } 

	        //柱状条部分 

	        for(var i=0;i<len;i++){ 

	            var per=Math.floor(parseInt(data[i]['per'])/maxTotal*100); 

	            var n=Math.floor(parseInt(per)/10); 

	            contentStr+='<li style="width:'+widthPer+'%">'; 

	            contentStr+='<span class="histogram-box"><a style="height:'+per+'%'+';background:'+bgColor[n]+';" title="'+data[i]['per']+'"></a></span><span class="histogram-name">'+data[i]['name']+'</span>'; 

	            contentStr+='</li>'; 

	            bgLineStr+='<li style="width:'+widthPer+'%;"><div></div></li>'; 

	        } 

	        //背景方格部分 

	        for(var j=0;j<5;j++){ 

	            bgLineAll+='<ul>'+bgLineStr+'</ul>'; 

	        } 

	        bgLineAll='<div class="histogram-bg-line">'+bgLineAll+'</div>'; 

	        contentStr='<div class="histogram-content"><ul>'+contentStr+'</ul></div>'; 

	        yStr='<div class="histogram-y"><ul>'+yStr+'</ul></div>'; 

	        controls.histogramContainer.html(bgLineAll+contentStr+yStr); 

	        controls.histogramContainer.css("height",controls.histogramContainer.height()+"px");//主要是解决IE6中的问题       

	    } 

	} 

	Array.prototype.max = function(){//最大值 

	 return Math.max.apply({},this)  

	}

希望本文所述对大家的jQuery程序设计有所帮助。

jQuery制作简单柱状图实例

相关文章

热门资讯