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 相关文章推荐
html+css+js实现xp window界面及有关功能
Mar 26 Javascript
node.js中的http.request.end方法使用说明
Dec 10 Javascript
用原生JS对AJAX做简单封装的实例代码
Jul 13 Javascript
使用jquery给指定的table动态添加一行、删除一行
Oct 13 Javascript
微信小程序 Button 组件详解及简单实例
Jan 10 Javascript
JS实现PC手机端和嵌入式滑动拼图验证码三种效果
Feb 15 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
Apr 11 Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
Jul 04 Javascript
其实你可以少写点if else与switch(推荐)
Jan 10 Javascript
原来JS还可以这样拆箱转换详解
Feb 01 Javascript
vue实现select下拉显示隐藏功能
Sep 30 Javascript
详解JavaScript的this指向和绑定
Sep 08 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
PHP 分页类(模仿google)-面试题目解答
2009/09/13 PHP
PHP中unset,array_splice删除数组中元素的区别
2014/07/28 PHP
php+xml实现在线英文词典之添加词条的方法
2015/01/23 PHP
PHP 中 DOMDocument保存xml时中文出现乱码问题的解决方案
2016/09/19 PHP
详解PHP防止直接访问.php 文件的实现方法
2017/07/28 PHP
PHP通过调用新浪API生成t.cn格式短网址链接的方法详解
2019/02/20 PHP
laravel实现按月或天或小时统计mysql数据的方法
2019/10/09 PHP
firefo xml 读写实现js代码
2009/06/11 Javascript
jQuery的Ajax时无响应数据的解决方法
2010/05/25 Javascript
JavaScript中函数声明优先于变量声明的实例分析
2012/03/01 Javascript
Javascript的&amp;&amp;和||的另类用法
2014/07/23 Javascript
JavaScript中的console.dir()函数介绍
2014/12/29 Javascript
JavaScript中Math.SQRT2属性的使用详解
2015/06/14 Javascript
跟我学习javascript的垃圾回收机制与内存管理
2015/11/23 Javascript
jquery+json实现分页效果
2016/03/07 Javascript
jQuery实现用户输入自动完成功能
2017/02/13 Javascript
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
2017/03/23 jQuery
微信小程序五星评分效果实现代码
2017/04/06 Javascript
Vuejs 页面的区域化与组件封装的实现
2017/09/11 Javascript
element ui里dialog关闭后清除验证条件方法
2018/02/26 Javascript
Vue项目全局配置页面缓存之按需读取缓存的实现详解
2018/08/01 Javascript
layui使用及简单的三级联动实现教程
2020/12/01 Javascript
python实现字符串和日期相互转换的方法
2015/05/13 Python
pandas进行数据的交集与并集方式的数据合并方法
2018/06/27 Python
Python3爬虫之urllib携带cookie爬取网页的方法
2018/12/28 Python
Python函数调用追踪实现代码
2020/11/27 Python
html5中localStorage本地存储的简单使用
2017/06/16 HTML / CSS
阿玛瑞酒店中文官方网站:Amari.com
2018/02/13 全球购物
请解释在new与override的区别
2012/10/29 面试题
怎样填写就业意向
2014/04/02 职场文书
医院竞聘演讲稿
2014/05/16 职场文书
企业年度评优方案
2014/06/02 职场文书
民事授权委托书范文
2014/08/02 职场文书
关于感恩的作文
2019/08/26 职场文书
Python控制台输出俄罗斯方块的方法实例
2021/04/17 Python
python中pandas对多列进行分组统计的实现
2021/06/18 Python