JQUBar 基于JQUERY的柱状图插件


Posted in Javascript onNovember 23, 2010

一、JQUBAR(V1.0)JQUERY插件简介
1.支持.net、java、php等平台。
2.用户可以通过鼠标拖拽柱状图从而改变每根柱子的高度,最终达到通过鼠标拖拽图形界面来修改服务器数据的目的。
3.支持柱状图缩放。
4.目前支持浏览器:IE7、 IE8、 Firefox、Chrome。

二、HTML

<div id="con"><%--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="重新加载" />

截图如下:

JQUBar 基于JQUERY的柱状图插件


三、javascript及CSS 文件引入
<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/JQUBar.js")%>" type="text/javascript"></script> 
<link href="<%=Url.Content("~/Scripts/JQUBar/JQUBar.css")%>" rel="stylesheet" type="text/css" />

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

四、加入Javascript 代码

<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"), 
//提供json数据,方便 .net java php 调用。本例在Asp.net MVC2.0下演示 
url: '<%=Url.Action("LoadData") %>/?name=' + $("#txtName").val() 
}).reload(); 
}); 
}); 
</script>

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

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

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); 
}

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

六、程序运行截图

JQUBar 基于JQUERY的柱状图插件

JQUBar 基于JQUERY的柱状图插件

JQUBar 基于JQUERY的柱状图插件

缩放:

JQUBar 基于JQUERY的柱状图插件

 

移动:

JQUBar 基于JQUERY的柱状图插件

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

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

同时也希望本篇文章可以帮您解决开发中碰到的问题。
作者:RyanDing
出处:http://www.cnblogs.com/ryanding/

Javascript 相关文章推荐
jQuery Selector选择器小结
May 06 Javascript
JQuery里选择超链接的实现代码
May 22 Javascript
一些有用的JavaScript和jQuery的片段分享
Aug 23 Javascript
jQuery News Ticker 基于jQuery的即时新闻行情展示插件
Nov 05 Javascript
jQuery中setTimeout的几种使用方法小结
Apr 07 Javascript
Javascript setInterval的两种调用方法(实例讲解)
Nov 29 Javascript
JSON与XML优缺点对比分析
Jul 17 Javascript
prototype框架中美元符号$用法分析
Jan 22 Javascript
Angular 中 select指令用法详解
Sep 29 Javascript
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
Feb 22 Javascript
简单谈谈CommonsChunkPlugin抽取公共模块
Dec 31 Javascript
一篇文章让你搞懂JavaScript 原型和原型链
Nov 23 Javascript
jquery 学习之二 属性相关
Nov 23 #Javascript
jquery 学习之一 对象访问
Nov 23 #Javascript
boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
Nov 21 #Javascript
IE6下出现JavaScript未结束的字符串常量错误的解决方法
Nov 21 #Javascript
基于jquery的滑动样例代码
Nov 20 #Javascript
jquery $.ajax()取xml数据的小问题解决方法
Nov 20 #Javascript
简单实用的js调试logger组件实现代码
Nov 20 #Javascript
You might like
php GD绘制24小时柱状图
2008/06/28 PHP
PHP 用数组降低程序的时间复杂度
2009/12/04 PHP
ExtJs GridPanel简单的增删改实现代码
2010/08/26 Javascript
基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
2011/09/02 Javascript
window.location.reload()方法刷新页面弹出要再次显示该网页对话框
2013/04/24 Javascript
Ext JS添加子组件的误区探讨
2013/06/28 Javascript
Firefox和IE兼容性问题及解决方法总结
2013/10/08 Javascript
javascript中的Base64、UTF8编码与解码详解
2015/03/18 Javascript
jQuery插件echarts去掉垂直网格线用法示例
2017/03/03 Javascript
微信扫码支付零云插件版实例详解
2017/04/26 Javascript
详解JS数组Reduce()方法详解及高级技巧
2017/08/18 Javascript
vuex学习之Actions的用法详解
2017/08/29 Javascript
如何理解Vue的render函数的具体用法
2017/08/30 Javascript
集合Bootstrap自定义confirm提示效果
2017/09/19 Javascript
jQuery动态添加li标签并添加属性和绑定事件方法
2018/02/24 jQuery
解决iview多表头动态更改列元素发生的错误的方法
2018/11/02 Javascript
详解JavaScript对数组操作(添加/删除/截取/排序/倒序)
2019/04/28 Javascript
解决使用layui对select append元素无效或者未及时更新的问题
2019/09/18 Javascript
基于vue和websocket的多人在线聊天室
2020/02/01 Javascript
Quasar Input:type=&quot;number&quot; 去掉上下小箭头 实现加减按钮样式功能
2020/04/09 Javascript
Vue使用预渲染代替SSR的方法
2020/07/02 Javascript
浅析JavaScript 函数防抖和节流
2020/07/13 Javascript
[02:57]2014DOTA2国际邀请赛-观众采访
2014/07/19 DOTA
Python实现各种排序算法的代码示例总结
2015/12/11 Python
在centos7中分布式部署pyspider
2017/05/03 Python
python实现递归查找某个路径下所有文件中的中文字符
2019/08/31 Python
Python生成器next方法和send方法区别详解
2020/05/30 Python
python自动从arxiv下载paper的示例代码
2020/12/05 Python
python lambda的使用详解
2021/02/26 Python
采用冷却技术的超自然舒适度:GhostBed床垫
2018/09/18 全球购物
应届生财务管理求职信
2013/11/06 职场文书
幼儿园运动会入场词
2014/02/10 职场文书
《沉香救母》教学反思
2014/04/19 职场文书
2015年教务处干事工作总结
2015/07/22 职场文书
2016年猴年新春致辞
2015/08/01 职场文书
JavaScript实现外溢动态爱心的效果的示例代码
2022/03/21 Javascript