最近项目需要做条形图,我用jQuery写好后索性封装成插件。
目前实行简单进行调用,有options可选属性,可自定义动画,主题颜色,及动画速度。
如果有任何意见和建议请留言。
Sample截图:
/*! * jQuery bar chart v1.0 * jQuery条形图1.0 * Copyright 2010, Longlongago * * http://long1986.com/ * * 时间:2010-08-13 23:26:00. */ /* builtBarChart(proportion,options) ----------------------------------- 参数 proportion 条形图比例; options (可选)width:条形图宽度;theme:设置样式;duration:动画速度设定(毫秒)。 */ $(function(){ //简单调用,当前比例为80% $("#simpleBar").builtBarChart(0.8); //调用及加入文字 $("#bar").builtBarChart(0.2,{theme:'black'}); //扩展条形图样式,outter:外边框颜色,inner:内侧关泽颜色,background:条形图颜色 extendTheme={black:{outter:"#404d6d",inner:"#dfdfdf",background:"black"}} jQuery.extend(theme, extendTheme);//theme为原始定义的样式集合 $("#barCustomer").builtBarChart(0.2,{theme:'black',width:300});//对扩展样式进行调用 //各种条形图的样式示例 var k=[0.5,0.33,0.3,0.8,0.4,0.96,1,0.45]; //各种条形图的样式数组 var tmp=["blue","lightBlue","darkYellow","lightGreen","red","green","pink","yellow"]; $.each(k,function(i,n){ $("#barCharts").builtBarChart(k[i],{theme:tmp[i],width:200,duration:1000}); $("#barCharts").append("<br/>"); }); });
下载地址:jQuery条形图插件1.0 (压缩版) 点击下载源码
var theme={
blue:{outter:”#404d6d”,inner:”#b5c0da”,background:”#6c81b6″}
,lightBlue:{outter:”#637a80″,inner:”#d2e5ea”,background:”#a5cbd6″}
,darkYellow:{outter:”#8a6641″,inner:”#f3d5b5″,background:”#e7ab6d”}
,lightGreen:{outter:”#74923b”,inner:”#e0f9b0″,background:”#c2f363″}
,red:{outter:”#8f1e39″,inner:”#f698ae”,background:”#ee325f”}
,green:{outter:”#377136″,inner:”#adddac”,background:”#5dbc5b”}
,pink:{outter:”#81286b”,inner:”#eba0d9″,background:”#d843b3″}
,yellow:{outter:”#99761f”,inner:”#ffe299″,background:”#ffc534″}
};
jQuery.fn.builtBarChart=function(percentage,option)
{
option=option||{};
option.width=option.width||200,option.theme=option.theme||’blue’,option.easing=option.easing||’swing’,option.duration=option.duration||1000;
percentage=percentage>1&&1||percentage<0&&Math.abs(percentage)>1?1:Math.abs(percentage)||percentage||0;
var grayLayer=$(“<div/>”, {
“style”: “width:”+(option.width+2)+”px; height:14px; overflow:hidden;background-color:#f0efef;”
});
var outter=$(“<div/>”, {
“style”: “border:1px #404d6d solid; width:0px; height:12px;overflow:hidden;”
});
var inner=$(“<div/>”, {
“style”: “height:11px;background-color:#6c81b6; border-left:#b5c0da 1px solid; border-top:#b5c0da 1px solid;border-right:#b5c0da 1px solid; width:0px;”
});
inner.appendTo(outter);
outter.appendTo(grayLayer);
grayLayer.appendTo(this);
var currPx=parseInt(percentage*option.width);
theme[option.theme]&&outter.css({“border-color”:theme[option.theme].outter}).children().css({“border-color”:theme[option.theme].inner,”background-color”:theme[option.theme].background});
currPx&&outter.animate({“width”:currPx},{duration:option.duration,easing:option.easing,queue:false})
.children().animate({“width”:(currPx-2)},{duration:option.duration,easing:option.easing,queue:false})||outter.hide();
};