首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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程序设计有所帮助。

jQuery制作简单柱状图实例

- Author -

shichen2014

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
解javascript 混淆加密收藏
Jan 16 Javascript
jQuery学习笔记之jQuery的事件
Dec 22 Javascript
js实现商品抛物线加入购物车特效
Nov 18 Javascript
js 获取经纬度的实现方法
Jun 20 Javascript
使用openSpeDiv方法实现Ecshop登录弹窗框效果
Mar 13 Javascript
JS实现留言板功能
Jun 17 Javascript
React利用插件和不用插件实现双向绑定的方法详解
Jul 03 Javascript
浅谈angularJS的$watch失效问题的解决方案
Aug 11 Javascript
基于js 字符串indexof与search方法的区别(详解)
Dec 04 Javascript
vue-cli安装使用流程步骤详解
Nov 08 Javascript
Vue2 添加数据可视化支持的方法步骤
Jan 02 Javascript
JavaScript实现刮刮乐效果
Nov 01 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
埃及购物网站(2) 挪威购物网站(7) 肯尼亚购物网站(2) 意大利购物网站(128) 丹麦购物网站(22) 法国购物网站(144) 印尼购物网站(37) 澳大利亚购物网站(309) 台湾购物网站(77) 阿根廷购物网站(9)
You might like
用php+mysql一个名片库程序
2006/10/09 PHP
PHP 文件上传功能实现代码
2009/06/24 PHP
PHP学习之正则表达式
2011/04/17 PHP
phpadmin如何导入导出大数据文件及php.ini参数修改
2013/02/18 PHP
(PHP实现)只使用++运算实现加法,减法,乘法,除法
2013/06/27 PHP
Yii实现多数据库主从读写分离的方法
2014/12/29 PHP
PHP递归调用数组值并用其执行指定函数的方法
2015/04/01 PHP
PHP命名空间namespace用法实例分析
2016/09/27 PHP
php正确输出json数据的实例讲解
2018/08/21 PHP
javascript 计算两个整数的百分比值
2009/12/26 Javascript
jQuery实战之品牌展示列表效果
2011/04/10 Javascript
用户代理字符串userAgent可实现的四个识别
2015/09/20 Javascript
深入浅析Vue组件开发
2016/11/25 Javascript
Bootstrap基本组件学习笔记之下拉菜单(7)
2016/12/07 Javascript
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
2017/01/20 Javascript
angular.JS实现网页禁用调试、复制和剪切
2017/03/31 Javascript
解决webpack无法通过IP地址访问localhost的问题
2018/02/22 Javascript
JS数组去重常用方法实例小结【4种方法】
2018/05/28 Javascript
layui使用数据表格实现购物车功能
2019/07/26 Javascript
js 计算月/周的第一天和最后一天代码
2020/02/01 Javascript
VUE Elemen-ui之穿梭框使用方法详解
2021/01/19 Javascript
js正则表达式简单校验方法
2021/01/03 Javascript
[01:54]TI4西雅图DOTA2选手欢迎晚宴 现场报道
2014/07/08 DOTA
python中 ? : 三元表达式的使用介绍
2013/10/09 Python
跨平台python异步回调机制实现和使用方法
2013/11/26 Python
python实现根据ip地址反向查找主机名称的方法
2015/04/29 Python
Python调用命令行进度条的方法
2015/05/05 Python
用C++封装MySQL的API的教程
2015/05/06 Python
python实现爬虫统计学校BBS男女比例之多线程爬虫（二）
2015/12/31 Python
Python处理文本文件中控制字符的方法
2017/02/07 Python
Python中顺序表的实现简单代码分享
2018/01/09 Python
Python实现修改IE注册表功能示例
2018/05/10 Python
使用Python爬虫库requests发送请求、传递URL参数、定制headers
2020/01/25 Python
pandas中ix的使用详细讲解
2020/03/09 Python
当文件系统受到破坏时，如何检查和修复系统？
2012/03/09 面试题
运动会广播稿50字
2014/01/26 职场文书