jQuery制作簡(jiǎn)單柱狀圖實(shí)例
本文實(shí)例講述了jQuery制作簡(jiǎn)單柱狀圖的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下:
Html部分:
<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;/*控制單元格的高度及百分比的高度,使百分?jǐn)?shù)與線條對(duì)其*/}
Js部分:
$(function(){
var dataArr={
"data":[
{"id":1,"name":"百度","per":"10"},
{"id":2,"name":"騰訊","per":"20"},
{"id":3,"name":"新浪","per":"10"},
{"id":4,"name":"網(wǎng)易","per":"44"},
{"id":5,"name":"搜狐","per":"50"},
{"id":5,"name":"小蝦虎魚(yú)","per":"69"},
{"id":5,"name":"人人網(wǎng)","per":"72"},
{"id":5,"name":"愛(ài)奇藝","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中的問(wèn)題
}
}
Array.prototype.max = function(){//最大值
return Math.max.apply({},this)
}
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
- jQuery插件FusionCharts實(shí)現(xiàn)的2D餅狀圖效果【附demo源碼下載】
- jQuery插件FusionCharts繪制的3D餅狀圖效果實(shí)例【附demo源碼下載】
- 快速解決FusionCharts聯(lián)動(dòng)的中文亂碼問(wèn)題
- JSP FusionCharts Free顯示圖表 具體實(shí)現(xiàn)
- FusionCharts圖表顯示雙Y軸雙(多)曲線
- jQuery基于ajax實(shí)現(xiàn)帶動(dòng)畫(huà)效果無(wú)刷新柱狀圖投票代碼
- jQuery.Highcharts.js繪制柱狀圖餅狀圖曲線圖
- 使用jQuery jqPlot插件繪制柱狀圖
- JQUBAR1.1 jQuery 柱狀圖插件發(fā)布
- JQUBar 基于JQUERY的柱狀圖插件
- jqPlot jQuery繪圖插件的使用
- jQuery插件ImageDrawer.js實(shí)現(xiàn)動(dòng)態(tài)繪制圖片動(dòng)畫(huà)(附源碼下載)
- jQuery插件FusionCharts實(shí)現(xiàn)的3D柱狀圖效果實(shí)例【附demo源碼下載】
相關(guān)文章
jQuery使用EasyUi實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)下拉框效果
本篇文章主要介紹了jQuery使用EasyUi實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)效果,實(shí)例使用EasyUi實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下。2017-03-03jquery 模式對(duì)話框終極版實(shí)現(xiàn)代碼
今天終于有時(shí)間把我以前寫(xiě)的一個(gè)jQuery插件進(jìn)行整理,改進(jìn)。這是一個(gè)模擬“模式對(duì)話框”的插件,該模式對(duì)話框共有三種皮膚,紅、綠、藍(lán)。2009-09-09JQuery插件tablesorter表格排序?qū)崿F(xiàn)過(guò)程解析
這篇文章主要介紹了JQuery插件tablesorter表格排序?qū)崿F(xiàn)過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05jquery 實(shí)現(xiàn)復(fù)選框的全選操作實(shí)例代碼
這篇文章主要介紹了jquery 實(shí)現(xiàn)復(fù)選框的全選操作實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2017-01-01jQuery實(shí)現(xiàn)鼠標(biāo)跟隨提示層效果代碼(可顯示文本,Div,Table,Html等)
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)跟隨提示層效果代碼,具備顯示文本,Div,Table,Html等功能.涉及jQuery針對(duì)鼠標(biāo)事件及頁(yè)面元素的相關(guān)操作技巧,需要的朋友可以參考下2016-04-04擴(kuò)展jQuery 鍵盤(pán)事件的幾個(gè)基本方法
擴(kuò)展jQuery 鍵盤(pán)事件的幾個(gè)基本方法(練習(xí)jQuery插件擴(kuò)展)2009-10-10談?wù)凧query ajax中success和complete有哪些不同點(diǎn)
jquery ajax中success和complete有哪些不同點(diǎn)呢?大家都了解嗎,接下來(lái)通過(guò)本篇文章給大家介紹jquery ajax中success和complete的不同點(diǎn),感興趣的朋友一起學(xué)習(xí)吧2015-11-11jquery easyUI中ajax異步校驗(yàn)用戶名
這篇文章主要為大家詳細(xì)介紹了jquery easyUI中ajax異步校驗(yàn)用戶名,感興趣的小伙伴們可以參考一下2016-08-08jquery輪播的實(shí)現(xiàn)方式 附完整實(shí)例
這篇文章主要介紹了jquery輪播的實(shí)現(xiàn)方式,文中分享了jQuery輪播完整實(shí)例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-07-07