JQUBar 基于基于JQUERY的柱状图插件的柱状图插件
一、一、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=”重新加载” />
截图如下:
三、三、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)