jQuery条形图插件

最近项目需要做条形图，我用jQuery写好后索性封装成插件。

目前实行简单进行调用，有options可选属性，可自定义动画，主题颜色，及动画速度。

如果有任何意见和建议请留言。

Sample截图：

(21)

/*!
 * 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();
   
};