JQUBar基于框架的柱状图插件

一、JQUBAR(V1.0)JQUERY插件简介1.支持. net、java、php等平台。 2.用户可以通过鼠标拖拽柱状图从而改变每根柱子的高度，最终达到通过鼠标拖拽图形界面来修改服务器数据的目的。 3.支持柱状图缩放。 4.目前支持浏览器：IE7、IE8、火狐、铬合金.二、超文本标记语言复制代码代码如下： div id='con'% - JQUBAR容器- % /div输入类型='checkbox' id='cbZoom '选中='选中'/标签为='cbZoom '缩放/标签输入类型=' checkbox ' id=' cbdraggable '选中=' checked '/标签为=' cbdraggable '拖拽/标签br /姓名模糊查询：输入类型='text' id='txtName'/br /输入类型=' button ' id=' btnReloadBar ' value='重新加载'/截图如下：

三、javascript及半铸钢钢性铸铁(铸造半钢)文件引入复制代码代码如下：脚本src='http:%=Url .内容(' ~/Scripts/jquery-1。4 .1 .js ')% ' type=' text/JAVAScript ' charset=' utf-8 '/script script src=' http :%=URl .内容(' ~/Scripts/JQUBar/wz _ jsgraphics。js()% ' type=' text/JAVAScript '/script script src=' http :%=URl .内容(' ~/Scripts/JQUBar/jquery-ui。量滴js()% ' type=' text/JAVAScript '/script script src=' http :%=URl .内容(' ~/Scripts/JQUBar/JQUBar。js()% ' type=' text/JAVAScript '/script link href=' %=URl .内容(' ~/Scripts/JQUBar/JQUBar。CSS ')% ' rel='样式表type='text/css' /注：以上文件请引入至超文本标记语言标题/头部内。四、加入爪哇岛描述语言代码复制代码代码如下：脚本类型=' text/JavaScript ' $(function(){ $(' # con ')).jQUBar({ zoom: true，drag: true，url: ' %=Url .操作(' LoadDATa ')% ' })；$('#btnReloadBar ').单击(函数(){ $('#con ')).setBarParam({ zoom : $(' # cbZoom ')).attr('checked ')，drag: $('#cbDragable ').attr('选中'),//提供数据数据，方便net java php调用。本例在Asp.net MVC 2.0下演示URl :"%=URl .操作(' LoadData') %/？名称=' $('#txtName ').val() }).重载();});});/script注：以上射流研究…脚本同样请加入超文本标记语言标题/头部内。五、ASP。NET MVC 2.0服务端代码复制代码代码如下：私有十进制[]GetPricesByEmployeeId(int employeeId){ decimal[]结果=null结果=_上下文。订单。其中(o=o .员工编号==员工编号)。以(5)为例。选择(oo=(十进制)oo .ShipVia).ToArray()；返回结果；}公共JsonResult LoadData(字符串名称){ var data=(来自在上下文中.员工。拿(10)来说ToList()选择新的{ EmployeeID=e.EmployeeID，Orders=getpricesbyeemployeeid(e . EmployeeID)，Name=e.FirstName，}).distinct()；if(！字符串IsNullOrEmpty(name)) { data=data .其中(d=d .名称。index of(name)=0)；}返回Json(new { Success=true，Msg=data }，JsonRequestBehavior .允许get)；} 注：为方便阅读使用NORTHWIND数据库。六、程序运行截图

缩放

移动

最后：由于时间仓促未能对JQUBAR1.0插件系统测试，如果您感兴趣可以在这里下载JQUBAR1.0插件。衷心的感谢各位园友对该插件提出您的宝贵意见，根据大家的意见我将抽出时间对JQUBAR1.0插件进行升级。同时也希望本篇文章可以帮您解决开发中碰到的问题。作者：RyanDing出处：http://www.cnblogs.com/ryanding/