提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

jQuery制作简单柱状图实例

jQuery实例 简单 制作 柱状图
2023-06-13 09:15:42 时间

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

Html部分：

复制代码代码如下:

<head> 
<title>柱状图</title> 
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> 
<linkhref="css.css"type="text/css"rel="stylesheet"/> 
<scriptsrc="jquery-1.8.2.min.js"type="text/javascript"></script> 
<scriptsrc="histogram.js"type="text/javascript"></script> 
</head> 
<body> 
<divclass="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:#999solid;border-width:00px1px1px;border-right-color:#eee;overflow:hidden;width:99%;} 
.histogram-bg-lineul{overflow:hidden;border:#eeesolid;border-width:1px000;clear:both;} 
.histogram-bg-lineli{float:left;overflow:hidden;background:#fff;} 
.histogram-bg-linelidiv{border-right:1px#eeesolid;} 
.histogram-content{position:absolute;left:0px;top:0;width:99%;height:100%;} 
.histogram-contentul{height:100%;} 
.histogram-contentli{float:left;height:100%;text-align:center;position:relative;} 
.histogram-box{position:relative;display:inline-block;height:100%;width:20px;} 
.histogram-contentlia{position:absolute;bottom:0;right:0;display:block;width:20px;font-size:0;line-height:0;} 
.histogram-contentli.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.8verdana,arial;} 
.histogram-yli{text-align:right;width:55px;padding-right:5px;color:#333;} 
.histogram-bg-linelidiv,.histogram-yli{height:30px;/*控制单元格的高度及百分比的高度，使百分数与线条对其*/}

Js部分：

复制代码代码如下:
$(function(){ 
vardataArr={ 
   "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"} 
   ] 
}; 
newhistogram().init(dataArr.data); 
}); 
 
functionhistogram(){ 
   varcontrols={}; 
   varbgColor=newArray("#666666","#21AA7C","#2277BB","#dc7644","#BBAA22","#AA22AA","#338800","#1099EE","#ffcc33","#ED3810"); 
   this.init=function(data,y){ 
       setControls(); 
       buildHtml(data,y); 
   } 
   functionsetControls(){ 
       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"); 
   } 
   functionbuildHtml(data,y){ 
       varlen=data.length,perArr=newArray(),maxNum,maxTotal,yStr=""; 
       varcontentStr="",bgLineStr="",bgLineAll=""; 
       varwidthPer=Math.floor(100/len); 
       minWidth=len*21+60; 
       controls.histogramContainer.css("min-width",minWidth+"px"); 
         
       for(vara=0;a<len;a++){ 
           perArr[a]=parseInt(data[a]["per"]);      
       } 
       maxNum=String(perArr.max()); 
       if(maxNum.length>2){ 
           varx=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{ 
           varavg=maxTotal/5; 
           for(i=5;i>=0;i--){ 
               yStr+="<li>"+avg*i+"</li>"; 
           } 
       } 
         
       //柱状条部分 
       for(vari=0;i<len;i++){ 
           varper=Math.floor(parseInt(data[i]["per"])/maxTotal*100); 
           varn=Math.floor(parseInt(per)/10); 
           contentStr+="<listyle="width:"+widthPer+"%">"; 
           contentStr+="<spanclass="histogram-box"><astyle="height:"+per+"%"+";background:"+bgColor[n]+";"title=""+data[i]["per"]+""></a></span><spanclass="histogram-name">"+data[i]["name"]+"</span>"; 
           contentStr+="</li>"; 
           bgLineStr+="<listyle="width:"+widthPer+"%;"><div></div></li>"; 
       } 
         
       //背景方格部分 
       for(varj=0;j<5;j++){ 
           bgLineAll+="<ul>"+bgLineStr+"</ul>"; 
       } 
       bgLineAll="<divclass="histogram-bg-line">"+bgLineAll+"</div>"; 
       contentStr="<divclass="histogram-content"><ul>"+contentStr+"</ul></div>"; 
       yStr="<divclass="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(){//最大值 
 returnMath.max.apply({},this)  
}

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

相关文章