打造自己的JQUBAR柱状图插件【JQUBar】

 一、JQUBAR(V1.0)JQUERY插件简介

     (目前最新版本是V1.1)

     1.支持.net、java、php等平台。

     2.用户可以通过鼠标拖拽柱状图从而改变每根柱子的高度,最终达到通过鼠标拖拽图形界面来修改服务器数据的目的。

     3.支持柱状图缩放。

     4.目前支持浏览器:IE7、 IE8、 Firefox、Chrome。

 

  二、HTML       

1 < div id ="con" > <% -- JQUBAR容器 -- %>
2   </ div >
3 < input type ="checkbox" id ="cbZoom" checked ="checked" />
4   < label for ="cbZoom" > 缩放 </ label >
5 < input type ="checkbox" id ="cbDragable" checked ="checked" />
6 < label for ="cbDragable" > 拖拽 </ label >
7   < br />
8 姓名模糊查询: < input type ="text" id ="txtName" />
9 < br />
10 < input type ="button" id ="btnReloadBar" value ="重新加载" />

 

截图如下:

 

三、javascript及CSS 文件引入

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

注:以上文件请引入至html <head></head>内。

 

四、加入Javascript 代码       

1 < script type = " text/javascript " >
2 $( function () {
3 $( " #con " ).jQUBar({
4 zoom: true ,
5 drag: true ,
6 url: ' <%=Url.Action("LoadData") %> '
7 });
8
9 $( " #btnReloadBar " ).click( function () {
10 $( " #con " ).setBarParam({
11 zoom: $( " #cbZoom " ).attr( " checked " ),
12 drag: $( " #cbDragable " ).attr( " checked " ),
13 // 提供json数据,方便 .net java php 调用。本例在Asp.net MVC2.0下演示
14   url: ' <%=Url.Action("LoadData") %>/?name= ' + $( " #txtName " ).val()
15 }).reload();
16 });
17 });
18 < / script>

 

 

注:以上js脚本同样请加入html <head></head>内。

 

五、ASP.NET MVC2.0 服务端代码

1 private decimal [] GetPricesByEmployeeId( int employeeId)
2 {
3 decimal [] result = null ;
4 result = _Context.Orders.Where(o => o.EmployeeID == employeeId)
5 .Take( 5 )
6 .Select(oo => ( decimal )oo.ShipVia).ToArray();
7 return result;
8 }
9
10   public JsonResult LoadData( string name)
11 {
12
13 var data = (from e in _Context.Employees.Take( 10 ).ToList()
14 select new
15 {
16 EmployeeID = e.EmployeeID,
17 Orders = GetPricesByEmployeeId(e.EmployeeID),
18 Name = e.FirstName,
19 }).Distinct();
20
21 if ( ! string .IsNullOrEmpty(name))
22 {
23 data = data.Where(d => d.Name.IndexOf(name) >= );
24 }
25
26 return Json( new { Success = true , Msg = data }, JsonRequestBehavior.AllowGet);
27 }

 

注:为方便阅读使用NORTHWIND 数据库。

 

六、程序运行截图

打造自己的JQUBAR柱状图插件【JQUBar】_第1张图片

打造自己的JQUBAR柱状图插件【JQUBar】_第2张图片

打造自己的JQUBAR柱状图插件【JQUBar】_第3张图片

缩放:

打造自己的JQUBAR柱状图插件【JQUBar】_第4张图片

 

移动:

打造自己的JQUBAR柱状图插件【JQUBar】_第5张图片

打造自己的JQUBAR柱状图插件【JQUBar】_第6张图片

    最后:由于时间仓促未能对JQUBAR1.0插件系统测试,如果您感兴趣可以在这里下载JQUBAR1.0插件。

    衷心的感谢各位园友对该插件提出您的宝贵意见,根据大家的意见我将抽出时间对JQUBAR1.0插件进行升级。

    同时也希望本篇文章可以帮您解决开发中碰到的问题。


原文链接: http://www.cnblogs.com/ryanding/archive/2010/11/22/1884334.html

你可能感兴趣的:(打造自己的JQUBAR柱状图插件【JQUBar】)