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 相关文章推荐
在图片上显示左右箭头类似翻页的代码
Mar 04 Javascript
浅析js中取绝对值的2种方法
Jul 09 Javascript
从零学JSON之JSON数据结构
May 19 Javascript
javascript获取系统当前时间的方法
Nov 19 Javascript
使用jQuery判断浏览器滚动条位置的方法
May 30 Javascript
微信小程序 登陆流程详细介绍
Jan 17 Javascript
js实现简易垂直滚动条
Feb 22 Javascript
Vue列表循环从指定下标开始的多种解决方案
Apr 08 Javascript
Node.js API详解之 console模块用法详解
May 12 Javascript
Vue使用预渲染代替SSR的方法
Jul 02 Javascript
详解JavaScript 的执行机制
Sep 18 Javascript
前端JS获取URL参数的4种方法总结
Apr 05 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
ob_start(),ob_start('ob_gzhandler')使用
2006/12/25 PHP
功能齐全的PHP发送邮件类代码附详细说明
2008/07/10 PHP
thinkphp实现图片上传功能分享
2014/03/04 PHP
PHP实现生成唯一会员卡号
2015/08/24 PHP
php 获取文件行数的方法总结
2016/10/11 PHP
完美的php分页类
2017/10/24 PHP
node.js中的fs.createReadStream方法使用说明
2014/12/17 Javascript
webpack下实现动态引入文件方法
2018/02/22 Javascript
Vue2.0 实现移动端图片上传功能
2018/05/30 Javascript
nodejs 生成和导出 word的实例代码
2018/07/31 NodeJs
bootstrap里bootstrap动态加载下拉框的实例讲解
2018/08/10 Javascript
优雅的elementUI table单元格可编辑实现方法详解
2018/12/23 Javascript
echarts实现词云自定义形状的示例代码
2019/02/20 Javascript
Vue服务端渲染实践之Web应用首屏耗时最优化方案
2019/03/22 Javascript
JS定义函数的几种常用方法小结
2019/05/23 Javascript
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
2020/03/29 Javascript
vue 动态添加class,三个以上的条件做判断方式
2020/11/02 Javascript
[01:21]DOTA2 新英雄 森海飞霞
2020/12/18 DOTA
Python实现曲线拟合操作示例【基于numpy,scipy,matplotlib库】
2018/07/12 Python
Python 数值区间处理_对interval 库的快速入门详解
2018/11/16 Python
10款最好的Python开发编辑器
2019/07/03 Python
pytorch实现focal loss的两种方式小结
2020/01/02 Python
Python如何批量获取文件夹的大小并保存
2020/03/31 Python
opencv python 图片读取与显示图片窗口未响应问题的解决
2020/04/24 Python
django 数据库 get_or_create函数返回值是tuple的问题
2020/05/15 Python
python logging模块的使用详解
2020/10/23 Python
详解Python+Selenium+ChromeDriver的配置和问题解决
2021/01/19 Python
耐克巴西官方网站:Nike巴西
2016/08/14 全球购物
乐高积木玩具美国官网:LEGO Shop US
2016/09/16 全球购物
Weekendesk意大利:探索多种引人入胜的周末主题
2016/10/14 全球购物
澳大利亚领先的在线礼品网站:Gifts Australia
2020/08/15 全球购物
通用自荐信范文
2014/03/14 职场文书
供货协议书范本
2014/04/22 职场文书
清洁工岗位职责
2015/02/13 职场文书
保护校园环境倡议书
2015/04/28 职场文书
初二数学教学反思
2016/02/17 职场文书