一、jqubar（v1.0）jquery插件简介
1.支持.net、java、php等平台。
2.用户可以通过鼠标拖拽柱状图从而改变每根柱子的高度，最终达到通过鼠标拖拽图形界面来修改服务器数据的目的。
3.支持柱状图缩放。
4.目前支持浏览器：ie7、 ie8、 firefox、chrome。
二、html
复制代码 代码如下:
缩放
拖拽
姓名模糊查询：
截图如下:
三、javascript及css 文件引入
复制代码 代码如下:
注：以上文件请引入至html 内。
四、加入javascript 代码
复制代码 代码如下:
注：以上js脚本同样请加入html 内。
五、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 数据库。
六、程序运行截图
缩放：
移动：
最后：由于时间仓促未能对jqubar1.0插件系统测试，如果您感兴趣可以在这里下载jqubar1.0插件。
衷心的感谢各位园友对该插件提出您的宝贵意见，根据大家的意见我将抽出时间对jqubar1.0插件进行升级。
同时也希望本篇文章可以帮您解决开发中碰到的问题。
作者：ryanding
出处：http://www.cnblogs.com/ryanding/