バージョン 1.1 では、いくつかのバグが修正され、次の機能が追加されました。 1. カスタマイズ可能な座標の色 2. カスタマイズ可能な X 軸および Y 軸の座標名 3 .Y 軸の動的座標が自動的に確立されます4.Y 軸の動的座標値が自動的に計算されます5. プラグイン スタイルのアップグレードJQUBAR1 の使用方法。 1: 1. Javascript ファイルと CSS ファイルを導入します: (ASP.NET MVC を使用して、html に次のコードを追加します)例として 2.0) コードをコピー コードは次のとおりです: < ;script src="<%= Url.Content("~/Scripts/jquery-1.4.1.js")%>" type="text/javascript" charset="utf-8"> < ;script src="<%=Url.Content("~/Scripts/JQUBar/wz_jsgraphics.js")%>"スクリプト><スクリプトsrc ="<%=Url.Content("~/Scripts/JQUBar/jquery-ui.min.js")%>" type="text/javascript"< /script>" type="text/javascript"> " type="text/javascript"> " rel="stylesheet" type="text/css" /> > 2. 次の JavaScript コードを html に追加します: コードをコピーします コードは次のとおりです: </div>$(function () { <div class="codebody" id="code48058">$("#con" ).jQUBar({ <br>zoom: true, <br>drag: true, <br>url: '<%=Url.Action("LoadData") %>' <br>}); <br>$("#btnReloadBar").click(function () { <br>$("#con").setBarParam({ <br>//ズームするかどうか<br>zoom: $("#cbZoom" ).attr("checked"), <br>//ドラッグ可能かどうか<br>ドラッグ: $("#cbDragable").attr("checked"), <br>//X 軸のタイトル、デフォルトは " X 軸" <br>xAxis: "人事", <br> //Y 軸のタイトル、デフォルトは "Y 軸" <br>yAxis: "金額"、<br>//座標の色、デフォルトは " Black" <br>axisColor: "#0476BB", <br>//提供される JSON データは、.net、java、および php の呼び出しに便利です。この例は、Asp.net MVC2.0 <br>url: '<%=Url.Action("LoadData") %>/?name=' $("#txtName").val() <BR> での例を示しています。 }).reload(); <BR>}); <BR><BR> <BR><BR>3. ><BR><BR><BR></div>コードをコピーします<BR><STRONG></STRONG> コードは次のとおりです:<BR><div class="codetitle"> <span><div id="con" style="位置: 相対"> <a style="CURSOR: pointer" data="26032" class="copybut" id="copybut26032" onclick="doCopy('code26032')"><%--JQUBAR コンテナ--%> <u></div> </u><input type="checkbox" id="cbZoom" selected="チェック済み" /> </a><label for="cbZoom"> Zoom</label></div><input type="checkbox" id="cbDragable" /> > <label for="cbDragable"> <div class="codebody" id="code26032">ドラッグ</label> <br>名前あいまいクエリ: <input type="text" id="txtName" / > ; <br><br /> <br><input type="button" id="btnReloadBar" value="リロード" /> <br><br> <br><br>4. 0 C# コード: <br><br><br><br><br><br>コードをコピー <br> </div> <br> コードは次のとおりです: <strong><br> </strong>private NORTHWINDDataContext _Context = new NORTHWINDDataContext(); <div class="codetitle">プライベート 10 進数 [] GetPricesByEmployeeId(int 従業員 ID) <span>{ <a style="CURSOR: pointer" data="65552" class="copybut" id="copybut65552" onclick="doCopy('code65552')">10 進数 [] 結果 = null; <u>結果 = _Context.Orders.Where(o => o. EmployeeID ==employeeId).Take(5) </u>.Select(oo => (10 進数)oo.ShipVia).ToArray(); </a>return result; </span> </div>public JsonResult LoadData (文字列名) <div class="codebody" id="code65552">{ <br>var data = (from e in _Context.Employees.Take(10).ToList() <br>select new <br>{ <br>EmployeeID = e.EmployeeID, <br>Orders = GetPricesByEmployeeId(e.EmployeeID), <br>Name = e.FirstName, <br>}).Distinct(); <br><br>if (!string.IsNullOrEmpty(name)) <br>{ <br>data = data.Where(d => d.Name.IndexOf(name) >= 0); <br>} <br><br>return Json(new { Success = true, Msg = data } 、JsonRequestBehavior.AllowGet); <br>} <br><br><br> <p><strong><span style="FONT-SIZE: 14pt">プログラムのスクリーンショット</span></strong></p> <hr> <p> 図 1: </p> <p><img alt="" src="http://files.jb51.net/upload/201011/20101128184259199.jpg"></p> <p> 図 2:</p> <p><img alt="" src="http://files.jb51.net/upload/201011/20101128184259237.jpg"><br>注意事項<br>JQUBAR プラグイン ページの HTML 標準を表示するには、<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> を使用してください。 ; 、MVC2.0 C# コードは NORTHWIND データベースを使用します。 JQUBar1.1 プラグインはここから<a href="http://xiazai.jb51.net/201011/yuanma/JQUBar.rar" target="_blank">ダウンロード</a>します。 </p> </div>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
