jQuery制作简单柱状图实例


Posted in Javascript onJanuary 28, 2015

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

Javascript 相关文章推荐
Javascript load Page,load css,load js实现代码
Mar 31 Javascript
用JavaScript修改CSS属性的代码
May 06 Javascript
js中继承的几种用法总结(apply,call,prototype)
Dec 26 Javascript
jQuery选择id属性带有点符号元素的方法
Mar 17 Javascript
JavaScript替换当前页面的方法
Apr 03 Javascript
jQuery实现鼠标滑过点击事件音效试听
Aug 31 Javascript
基于jQuery实现放大镜特效
Oct 19 Javascript
AngularJs 动态加载模块和依赖
Sep 15 Javascript
一个非常好用的文字滚动的案例,鼠标悬浮可暂停[两种方案任选]
Dec 01 Javascript
小试SVG之新手小白入门教程
Jan 08 Javascript
webpack的移动端适配方案小结
Jul 25 Javascript
js作用域及作用域链工作引擎
Jul 07 Javascript
js分页工具实例
Jan 28 #Javascript
js制作简易年历完整实例
Jan 28 #Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
Jan 28 #Javascript
调试JavaScript中正则表达式中遇到的问题
Jan 27 #Javascript
JavaScript插件化开发教程 (四)
Jan 27 #Javascript
JavaScript插件化开发教程 (三)
Jan 27 #Javascript
js实现简单随机抽奖的方法
Jan 27 #Javascript
You might like
怎么样可以把 phpinfo()屏蔽掉?
2006/11/24 PHP
使用php重新实现PHP脚本引擎内置函数
2007/03/06 PHP
php下使用无限生命期Session的方法
2007/03/16 PHP
PHP 线程安全与非线程安全版本的区别深入解析
2013/08/06 PHP
带密匙的php加密解密示例分享
2014/01/29 PHP
php实现telnet功能示例
2014/04/08 PHP
PHP输出日历表代码实例
2015/03/27 PHP
PHP图像裁剪缩略裁切类源码及使用方法
2016/01/07 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
Lumen timezone 时区设置方法(慢了8个小时)
2018/01/20 PHP
JavaScript Title、alt提示(Tips)实现源码解读
2010/12/12 Javascript
25个好玩的JavaScript小游戏分享
2011/04/22 Javascript
jquery 如何动态添加、删除class样式方法介绍
2012/11/07 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
2014/02/10 Javascript
JavaScript中split() 使用方法汇总
2015/04/17 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
2015/09/28 Javascript
JavaScript中数组slice和splice的对比小结
2016/09/22 Javascript
BootstrapTable请求数据时设置超时(timeout)的方法
2017/01/22 Javascript
利用pm2部署多个node.js项目的配置教程
2017/10/22 Javascript
Node.js上传文件功能之服务端如何获取文件上传进度
2018/02/05 Javascript
React native ListView 增加顶部下拉刷新和底下点击刷新示例
2018/04/27 Javascript
Vue 框架之键盘事件、健值修饰符、双向数据绑定
2018/11/14 Javascript
JavaScript中import用法总结
2019/01/20 Javascript
redux.js详解及基本使用
2019/05/24 Javascript
ES6对象操作实例详解
2020/05/23 Javascript
Python循环语句中else的用法总结
2016/09/11 Python
DRF跨域后端解决之django-cors-headers的使用
2019/01/27 Python
CSS3模块的目前的状况分析
2010/02/24 HTML / CSS
美国女鞋品牌:naturalizer(娜然)
2016/08/01 全球购物
校园文化建设方案
2014/02/03 职场文书
学生个人自我鉴定范文
2014/03/28 职场文书
社区服务标语
2014/07/01 职场文书
贫困证明模板(3篇)
2014/09/16 职场文书
个人党性分析材料
2014/12/19 职场文书
总经理司机岗位职责
2015/04/10 职场文书
面试官问我Mysql的存储引擎了解多少
2022/08/05 MySQL