JQUBAR1.1 jQuery 柱状图插件发布


Posted in Javascript onNovember 28, 2010

1.1版本修复了部分bug,同时新增以下功能:

1.可自定义坐标颜色

2.可自定义X,Y轴坐标名称

3.Y轴动态坐标自动建立

4.Y轴动态坐标值自动计算

5.插件样式升级

JQUBAR1.1使用方法:

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

(在html<head></head>加入以下代码,以ASP.NET MVC 2.0 为例)

<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代码:
<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轴标题,默认为“X轴” 
xAxis: "人员", 
//Y轴标题,默认为“Y轴” 
yAxis: "金额", 
//坐标颜色,默认为“Black” 
axisColor: "#0476BB", 
//提供JSON数据,方便 .net、 java、 php 调用。本例在Asp.net MVC2.0下演示 
url: '<%=Url.Action("LoadData") %>/?name=' + $("#txtName").val() 
}).reload(); 
}); 
}); 
</script>

3.加入HTML代码:
<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#代码:
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:

JQUBAR1.1 jQuery 柱状图插件发布

   图2:

JQUBAR1.1 jQuery 柱状图插件发布
注意事项
显示JQUBAR插件页面的html标准请使用 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> ,MVC2.0 C#代码使用NORTHWIND数据库。JQUBar1.1插件在这里下载。

Javascript 相关文章推荐
JavaScript 数组详解
Oct 10 Javascript
node.js中的socket.io入门实例
Apr 26 Javascript
jQuery根据元素值删除数组元素的方法
Jun 24 Javascript
jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)
Jun 08 Javascript
BootStrap3使用错误记录及解决办法
Dec 22 Javascript
js+html制作简单验证码
Feb 16 Javascript
JS数组中对象去重操作示例
Jun 04 Javascript
微信小程序利用云函数获取手机号码
Dec 17 Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
Dec 25 Javascript
使用Angular9和TypeScript开发RPG游戏的方法
Mar 25 Javascript
vue跳转页面的几种方法(推荐)
Mar 26 Javascript
JavaScript实现九宫格拖拽效果
Jun 28 Javascript
为jQuery增加join方法的实现代码
Nov 28 #Javascript
Jquery拖拽并简单保存的实现代码
Nov 28 #Javascript
jquery下将选择的checkbox的id组成字符串的方法
Nov 28 #Javascript
用jquery设置按钮的disabled属性的实现代码
Nov 28 #Javascript
IE6弹出“已终止操作”的解决办法
Nov 27 #Javascript
javascript 获取所有id中包含某关键字的控件的实现代码
Nov 25 #Javascript
javascript中substr,substring,slice.splice的区别说明
Nov 25 #Javascript
You might like
php获取301跳转URL简单实例
2013/12/16 PHP
php中字符串和整数比较的操作方法
2019/06/06 PHP
javascript之ESC(第二类混淆)
2007/05/06 Javascript
JQuery AJAX 中文乱码问题解决
2013/06/05 Javascript
类似天猫商品详情随浏览器移动的示例代码
2014/02/27 Javascript
js在指定位置增加节点函数insertBefore()用法实例
2015/01/12 Javascript
javascript实现rgb颜色转换成16进制格式
2015/07/10 Javascript
JS输出空格的简单实现方法
2016/09/08 Javascript
JS实现的RGB网页颜色在线取色器完整实例
2016/12/21 Javascript
移动端利用H5实现压缩图片上传功能
2017/03/29 Javascript
Bootstrap响应式导航由768px变成992px的实现代码
2017/06/15 Javascript
js脚本编写简单刷票投票系统
2017/06/27 Javascript
详谈JS中数组的迭代方法和归并方法
2017/08/11 Javascript
VueJS事件处理器v-on的使用方法
2017/09/27 Javascript
Grunt针对静态文件的压缩,版本控制打包的实例讲解
2017/09/29 Javascript
微信小程序实现页面下拉刷新和上拉加载功能详解
2018/12/03 Javascript
jquery获取file表单选择文件的路径、名字、大小、类型
2019/01/18 jQuery
微信提示 在浏览器打开 效果实现过程解析
2019/09/10 Javascript
JavaScript 如何计算文本的行数的实现
2020/09/14 Javascript
python+selenium实现京东自动登录及秒杀功能
2017/11/18 Python
使用TensorFlow实现二分类的方法示例
2019/02/05 Python
详解用Python练习画个美队盾牌
2019/03/23 Python
python算法与数据结构之冒泡排序实例详解
2019/06/22 Python
python opencv将表格图片按照表格框线分割和识别
2019/10/30 Python
django中间键重定向实例方法
2019/11/10 Python
打印tensorflow恢复模型中所有变量与操作节点方式
2020/05/26 Python
通过实例了解python__slots__使用方法
2020/09/14 Python
使用canvas压缩图片上传的方法示例
2020/02/07 HTML / CSS
英国经典球衣网站:Classic Football Shirts
2017/05/20 全球购物
ColourPop美国官网:卡拉泡泡,洛杉矶彩妆品牌
2019/04/28 全球购物
土木工程专业个人求职信
2013/12/05 职场文书
技术入股合作协议书
2014/10/07 职场文书
宾馆前台接待岗位职责
2015/04/02 职场文书
2015年机关党建工作总结
2015/05/22 职场文书
Python各协议下socket黏包问题原理
2022/04/12 Python
Nginx代理Redis哨兵主从配置的实现
2022/07/15 Servers