jQuery制作简单柱状图实例

前端技术 2023/09/09 JavaScript

本文实例讲述了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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/24876

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案