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 相关文章推荐
javascript flash下fromCharCode和charCodeAt方法使用说明
Jan 12 Javascript
jquery easyui combobox模糊过滤(示例代码)
Nov 30 Javascript
javascript闭包入门示例
Apr 30 Javascript
jQuery事件绑定和委托实例
Nov 25 Javascript
jQuery获得子元素个数的方法
Apr 14 Javascript
浅谈jQuery中setInterval()方法
Jul 07 Javascript
jQuery绑定事件on()与弹窗的简要概述
Apr 27 Javascript
总结AngularJS开发者最常犯的十个错误
Aug 31 Javascript
谈谈jQuery之Deferred源码剖析
Dec 19 Javascript
详解RequireJs官方使用教程
Oct 31 Javascript
vue微信分享出来的链接点开是首页问题的解决方法
Nov 28 Javascript
websocket4.0+typescript 实现热更新的方法
Aug 14 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
在Windows中安装Apache2和PHP4的权威指南
2006/10/09 PHP
php下intval()和(int)转换使用与区别
2008/07/18 PHP
php 需要掌握的东西 不做浮躁的人
2009/12/28 PHP
YII2.0之Activeform表单组件用法实例
2016/01/09 PHP
PHP array_reduce()函数的应用解析
2018/10/28 PHP
PHP使用openssl扩展实现加解密方法示例
2020/02/20 PHP
一段多浏览器的&quot;复制到剪贴板&quot;javascript代码
2007/03/27 Javascript
javascript 写类方式之二
2009/07/05 Javascript
window.onload 加载完毕的问题及解决方案(上)
2009/07/09 Javascript
利用js(jquery)操作Cookie的方法说明
2013/12/19 Javascript
js实现的GridView即表头固定表体有滚动条且可滚动
2014/02/19 Javascript
不间断循环滚动效果的实例代码(必看篇)
2016/10/08 Javascript
JS前向后瞻正则表达式定义与用法示例
2016/12/27 Javascript
angular2倒计时组件使用详解
2017/01/12 Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
2017/08/18 Javascript
vue组件表单数据回显验证及提交的实例代码
2018/08/30 Javascript
使用localStorage替代cookie做本地存储
2019/09/25 Javascript
微信小程序全选多选效果实现代码解析
2020/01/21 Javascript
js实现列表按字母排序
2020/08/11 Javascript
Vue+axios封装请求实现前后端分离
2020/10/23 Javascript
实例讲解python函数式编程
2014/06/09 Python
python 对给定可迭代集合统计出现频率,并排序的方法
2018/10/18 Python
tensorflow tf.train.batch之数据批量读取方式
2020/01/20 Python
python使用python-pptx删除ppt某页实例
2020/02/14 Python
Python实现清理微信僵尸粉功能示例【基于itchat模块】
2020/05/29 Python
Python enumerate() 函数如何实现索引功能
2020/06/29 Python
Anaconda使用IDLE的实现示例
2020/09/23 Python
CSS3改变浏览器滚动条样式
2019/01/04 HTML / CSS
H5调用相机拍照并压缩图片的实例代码
2017/07/20 HTML / CSS
BrandAlley英国:法国折扣奢侈品网上零售商
2017/07/03 全球购物
英国领先的露营和露营车品牌之一:OLPRO
2019/08/06 全球购物
《池塘边的叫声》教学反思
2014/04/12 职场文书
领导班子作风建设年个人整改措施
2014/09/29 职场文书
正风肃纪剖析材料
2014/09/30 职场文书
歌剧魅影观后感
2015/06/05 职场文书
超级礼物观后感
2015/06/15 职场文书