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 相关文章推荐
BOM与DOM的区别分析
Oct 26 Javascript
导航跟随滚动条置顶移动示例代码
Sep 11 Javascript
jquery实现模拟百分比进度条渐变效果代码
Oct 29 Javascript
详解基于Bootstrap扁平化的后台框架Ace
Nov 27 Javascript
一道关于JavaScript变量作用域的面试题
Mar 08 Javascript
jQuery插件扩展操作入门示例
Jan 16 Javascript
详解angularjs中的隔离作用域理解以及绑定策略
May 31 Javascript
JavaScript注册时密码强度校验代码
Jun 30 Javascript
vue项目动态设置页面title及是否缓存页面的问题
Nov 08 Javascript
vue中datepicker的使用教程实例代码详解
Jul 08 Javascript
vue使用自定义指令实现拖拽
Jan 29 Javascript
js实现删除json中指定的元素
Sep 22 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
overlord人气高涨,却被菲利普频繁举报,第四季很难在国内上映
2020/05/06 日漫
PHP多进程之pcntl_fork的实例详解
2017/10/15 PHP
js直接编辑当前cookie的脚本
2008/09/14 Javascript
javascript RadioButtonList获取选中值
2009/04/09 Javascript
深入理解JavaScript系列(9) 根本没有“JSON对象”这回事!
2012/01/15 Javascript
JS格式化数字保留两位小数点示例代码
2013/10/15 Javascript
用JavaScript实现使用鼠标画线的示例代码
2014/08/19 Javascript
JS+CSS实现表格高亮的方法
2015/08/05 Javascript
jQuery中的siblings用法实例分析
2015/12/24 Javascript
jQuery动态生成表格及右键菜单功能示例
2017/01/13 Javascript
AngularJS入门教程一:路由用法初探
2017/05/27 Javascript
JavaScript原型继承_动力节点Java学院整理
2017/06/30 Javascript
详解如何使用webpack在vue项目中写jsx语法
2017/11/08 Javascript
vue2.0 资源文件assets和static的区别详解
2018/04/08 Javascript
Angular6 正则表达式允许输入部分中文字符
2018/09/10 Javascript
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
2018/10/12 Javascript
vue-router传递参数的几种方式实例详解
2018/11/13 Javascript
9102年webpack4搭建vue项目的方法步骤
2019/02/20 Javascript
vue实现页面滚动到底部刷新
2019/08/16 Javascript
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
2019/10/23 Javascript
解决Nuxt使用axios跨域问题
2020/07/06 Javascript
[02:23]2014DOTA2国际邀请赛中国战队回顾
2014/08/01 DOTA
浅谈Scrapy框架普通反爬虫机制的应对策略
2017/12/28 Python
python安装教程
2018/02/28 Python
通过Py2exe将自己的python程序打包成.exe/.app的方法
2018/05/26 Python
python3 http提交json参数并获取返回值的方法
2018/12/19 Python
浅析Python __name__ 是什么
2020/07/07 Python
html5中监听canvas内部元素点击事件的三种方法
2019/04/28 HTML / CSS
法国亚马逊官方网站:Amazon.fr
2020/12/19 全球购物
《锄禾》教学反思
2014/04/08 职场文书
教师个人自我评价
2015/03/04 职场文书
刑事辩护词范文
2015/05/21 职场文书
2015年惩防体系建设工作总结
2015/05/22 职场文书
2015年信息中心工作总结
2015/05/25 职场文书
大学生安全教育心得体会
2016/01/15 职场文书
vue-element-admin项目导入和导出的实现
2021/05/21 Vue.js