快捷導(dǎo)航

JQUBAR1.1 jQuery 柱狀圖插件發(fā)布

更新時(shí)間：2010年11月28日 18:43:20 作者：

在博客園發(fā)布了柱狀圖JQUBar1.0 jQuery 插件?，F(xiàn)將該插件升級(jí)為1.1版本。

1.1版本修復(fù)了部分bug，同時(shí)新增以下功能：

1.可自定義坐標(biāo)顏色

2.可自定義X,Y軸坐標(biāo)名稱

3.Y軸動(dòng)態(tài)坐標(biāo)自動(dòng)建立

4.Y軸動(dòng)態(tài)坐標(biāo)值自動(dòng)計(jì)算

5.插件樣式升級(jí)

JQUBAR1.1使用方法：

1.引入Javascript文件及CSS文件：

（在html<head></head>加入以下代碼，以ASP.NET MVC 2.0 為例）

復(fù)制代碼代碼如下:

 
<script src="<%=Url.Content("~/Scripts/jquery-1.4.1.js")%>" type="text/javascript" 
charset="utf-8"></script> 
<script src="<%=Url.Content("~/Scripts/JQUBar/wz_jsgraphics.js")%>" type="text/javascript"></script> 
<script src="<%=Url.Content("~/Scripts/JQUBar/jquery-ui.min.js")%>" type="text/javascript"></script> 
<script src="<%=Url.Content("~/Scripts/JQUBar/Utility.js")%>" type="text/javascript"></script> 
<script src="<%=Url.Content("~/Scripts/JQUBar/JQUBar.js")%>" type="text/javascript"></script> 
<link href="<%=Url.Content("~/Scripts/JQUBar/JQUBar.css")%>" rel="stylesheet" type="text/css" /> 

2.在html<head></head>加入以下javascript代碼:

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
$(function () { 
$("#con").jQUBar({ 
zoom: true, 
drag: true, 
url: '<%=Url.Action("LoadData") %>' 
}); 

$("#btnReloadBar").click(function () { 
$("#con").setBarParam({ 
//是否縮放 
zoom: $("#cbZoom").attr("checked"), 
//是否可拖拽 
drag: $("#cbDragable").attr("checked"), 
//X軸標(biāo)題，默認(rèn)為“X軸” 
xAxis: "人員", 
//Y軸標(biāo)題，默認(rèn)為“Y軸” 
yAxis: "金額", 
//坐標(biāo)顏色，默認(rèn)為“Black” 
axisColor: "#0476BB", 
//提供JSON數(shù)據(jù)，方便 .net、 java、 php 調(diào)用。本例在Asp.net MVC2.0下演示 
url: '<%=Url.Action("LoadData") %>/?name=' + $("#txtName").val() 
}).reload(); 
}); 
}); 
</script> 

3.加入HTML代碼：

復(fù)制代碼代碼如下:

 
<div id="con" style="position: relative"> 
<%--JQUBAR容器--%> 
</div> 
<input type="checkbox" id="cbZoom" checked="checked" /> 
<label for="cbZoom"> 
縮放</label> 
<input type="checkbox" id="cbDragable" checked="checked" /> 
<label for="cbDragable"> 
拖拽</label> 
<br /> 
姓名模糊查詢：<input type="text" id="txtName" /> 
<br /> 
<input type="button" id="btnReloadBar" value="重新加載" /> 

4.MVC2.0 C#代碼：

復(fù)制代碼代碼如下:

 
private NORTHWINDDataContext _Context = new NORTHWINDDataContext(); 
private decimal[] GetPricesByEmployeeId(int employeeId) 
{ 
decimal[] result = null; 
result = _Context.Orders.Where(o => o.EmployeeID == employeeId).Take(5) 
.Select(oo => (decimal)oo.ShipVia).ToArray(); 
return result; 
} 

public JsonResult LoadData(string name) 
{ 
var data = (from e in _Context.Employees.Take(10).ToList() 
select new 
{ 
EmployeeID = e.EmployeeID, 
Orders = GetPricesByEmployeeId(e.EmployeeID), 
Name = e.FirstName, 
}).Distinct(); 

if (!string.IsNullOrEmpty(name)) 
{ 
data = data.Where(d => d.Name.IndexOf(name) >= 0); 
} 

return Json(new { Success = true, Msg = data }, JsonRequestBehavior.AllowGet); 
} 

程序截圖

圖1：

圖2:

注意事項(xiàng)
顯示JQUBAR插件頁面的html標(biāo)準(zhǔn)請(qǐng)使用 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> ，MVC2.0 C#代碼使用NORTHWIND數(shù)據(jù)庫。JQUBar1.1插件在這里下載。