製品版のみの機能
ファンネル チャート - ASP.NET MVC の使用
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
サーバー側コレクションへのバインド
リモート データへのバインド
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
このサンプルは、ASP.NET MVC で igFunnelChart を描画する方法を紹介します。2 つのファンネル チャートを表示します。1 つ目は厳密に型指定された Razor ビューに渡したモデル オブジェクトとサーバー側にバインドされます。2 つ目はリモート データ サービスにバインドされます。
コード ビュー
クリップボードへコピー
@using Infragistics.Web.Mvc;
@model IQueryable<IgniteUI.SamplesBrowser.Controllers.BudgetData>
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/infragistics.css" rel="stylesheet" />
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.dv.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.lob.js"></script>
</head>
<body>
<link href='@Url.Content("~/css/charts/chart-samples.css")' type="text/css" rel="stylesheet" />
<script type="text/javascript">
$(function () {
$("#remoteData").igFunnelChart({
width: "100%",
height: "450px",
leftMargin: 20,
dataSourceUrl: "@Url.Action("getBudget")",
valueMemberPath: "Budget",
innerLabelMemberPath: "Budget",
innerLabelVisibility: "visible"
});
});
</script>
<div class="sampleContent">
<div class="chartContainer">
<h4>サーバー側コレクションへのバインド</h4>
@(Html.Infragistics().FunnelChart<IgniteUI.SamplesBrowser.Controllers.BudgetData>(Model)
.ID("funnel")
.Width("100%")
.Height("450px")
.ValueMemberPath("Budget")
.InnerLabelMemberPath("Budget")
.OuterLabelMemberPath("Department")
.InnerLabelVisibility(Visibility.Visible)
.OuterLabelVisibility(Visibility.Visible)
.DataBind()
.Render()
)
</div>
<div class="chartContainer">
<h4>リモート データへのバインド</h4>
<div id="remoteData"></div>
</div>
</div>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace IgniteUI.SamplesBrowser.Controllers
{
public class FunnelChartController : Controller
{
//
// GET: /FunnelChart/
[ActionName("server-binding")]
public ActionResult BindCollection()
{
var data = new List<BudgetData>()
{
new BudgetData { Budget = 30, Department = "事務" },
new BudgetData { Budget = 50, Department = "セールス" },
new BudgetData { Budget = 60, Department = "IT" },
new BudgetData { Budget = 50, Department = "マーケティング" },
new BudgetData { Budget = 100, Department = "開発" },
new BudgetData { Budget = 20, Department = "サポート" }
};
return View("server-binding", data.AsQueryable());
}
[ActionName("getBudget")]
public JsonResult GetBudget()
{
var data = new List<BudgetData>()
{
new BudgetData { Budget = 30, Department = "事務" },
new BudgetData { Budget = 50, Department = "セールス" },
new BudgetData { Budget = 60, Department = "IT" },
new BudgetData { Budget = 50, Department = "マーケティング" },
new BudgetData { Budget = 100, Department = "開発" },
new BudgetData { Budget = 20, Department = "サポート" }
};
return new JsonResult { Data = data, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}
}
public class BudgetData
{
public decimal Budget { get; set; }
public string Department { get; set; }
}
}