鍥2:
鍥1锛
娉ㄦ剰浜嬮」 鏄剧ずJQUBAR鎻掍欢椤甸潰鐨刪tml鏍囧噯璇蜂娇鐢 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 锛孧VC2.0 C#浠ｇ爜浣跨敤NORTHWIND鏁版嵁搴撱侸QUBar1.1鎻掍欢鍦ㄨ繖閲屼笅杞姐绋嬪簭鎴浘
1.1鐗堟湰淇浜嗛儴鍒哹ug锛屽悓鏃舵柊澧炰互涓嬪姛鑳斤細 1.鍙嚜瀹氫箟鍧愭爣棰滆壊 2.鍙嚜瀹氫箟X,Y杞村潗鏍囧悕绉 3.Y杞村姩鎬佸潗鏍囪嚜鍔ㄥ缓绔 4.Y杞村姩鎬佸潗鏍囧艰嚜鍔ㄨ绠 5.鎻掍欢鏍峰紡鍗囩骇 JQUBAR1.1浣跨敤鏂规硶锛 1.寮曞叆Javascript鏂囦欢鍙奀SS鏂囦欢锛 锛堝湪html<head></head>鍔犲叆浠ヤ笅浠ｇ爜锛屼互ASP.NET MVC 2.0 涓轰緥锛 鏂囩珷鏉ヨ嚜 codego.net 璇风湅婧愪唬鐮: <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="<,--codego.net--;%=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.鍦╤tml<head></head>鍔犲叆浠ヤ笅javascript浠ｇ爜: 鏂囩珷鏉ヨ嚜 codego.net 璇风湅婧愪唬鐮: <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杞存爣棰橈紝榛樿涓衡淴杞粹 xAxis: "浜哄憳", //Y杞存爣棰橈紝榛樿涓衡淵杞粹 yAxis: "閲戦", //鍧愭爣棰滆壊锛岄粯璁や负鈥淏lack鈥 axisColor: "#0476BB", //鎻愪緵JSON鏁版嵁锛屾柟渚 .net銆 java銆 php 璋冪敤銆傛湰渚嬪湪Asp.net MVC2.0涓嬫紨绀 url: '<%=Url.Action("LoadData") %>/?name=' + $("#txtName").val() }).reload(); }); }); </script> 3.鍔犲叆HTML浠ｇ爜锛 鏂囩珷鏉ヨ嚜 codego.net 璇风湅婧愪唬鐮: <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#浠ｇ爜锛 鏂囩珷鏉ヨ嚜 codego.net 璇风湅婧愪唬鐮: 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); }