jQuery制作简单柱状图实例

更新时间：2015年01月28日 09:34:37 投稿：shichen2014

这篇文章主要介绍了jQuery制作简单柱状图的方法,实例分析了html与css布局以及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 fadeTo方法调整图片的透明度使用介绍
利用jquery的fadeTo方法可以简单的制作一些很不错的动画效果.可以使图片或者文字或者区块以不同的透明度效果出现.例如以下练习实例，感兴趣的朋友可以参考下哈
2013-05-05
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
这篇文章主要介绍了jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法,实例分析了jquery.nicescroll插件实现图片拖拽效果的方法,需要的朋友可以参考下
2015-08-08
jquery实现简单的表单验证
这篇文章主要介绍了jquery实现简单的表单验证，思路大概是先为每一个required添加必填的标记，用each()方法来实现，感兴趣的小伙伴们可以参考一下
2015-11-11
jQuery的图片轮播插件PgwSlideshow使用详解
这篇文章主要介绍了jQuery的图片轮播插件PgwSlideshow使用详解的相关资料,需要的朋友可以参考下
2016-08-08
jQuery简单实现对数组去重及排序操作实例
这篇文章主要介绍了jQuery简单实现对数组去重及排序操作,结合实例形式分析了jQuery中unique方法进行数组去重及sort方法排序的相关操作技巧,需要的朋友可以参考下
2017-10-10
基于Jquery代码实现手风琴菜单
这篇文章主要介绍了基于Jquery代码实现手风琴菜单，代码简单易懂，需要的朋友参考下
2015-11-11
JQuery使用数组遍历跳出each循环
这篇文章主要介绍了JQuery使用数组遍历跳出each循环,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-09-09
jQuery选择器用法实例详解
这篇文章主要介绍了jQuery选择器用法,结合实例分析了jQuery选择器的具体使用技巧与注意事项,需要的朋友可以参考下
2015-12-12
jQuery cdn使用介绍
如果您不希望下载并存放jQuery，那么也可以通过 CDN（内容分发网络）引用它，下面是具体实现，有类似需求的各位可以参考下哈，希望对你有所帮助
2013-05-05
jQuery 事件的命名空间简单了解
用 jQuery 绑定和解绑事件监听器都是非常简单的，怎样精确地解绑其中一个监听器？我们需要了解一下事件的命名空间，感兴趣的朋友不要错过
2013-11-11

jQuery制作简单柱状图实例

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具