このトピックでは、Ignite UI for MVC を使用して ASP.NET MVC アプリケーションに igDoughnutChart™ のインスタンスを作成する方法を紹介します。
以下の表は、このトピックを理解するための前提条件として必要な概念とトピックの一覧です。
このトピックは、以下のセクションで構成されます。
Ignite UI for MVC を使用して ASP.NET MVC アプリケーションに igDoughnutChart を追加するには、height オプションと width オプションの値を指定して少なくとも 1 つの series を追加し、サイズを調整する必要があります。
事前構成されたデータ ソース インスタンスを提供する、またはシリーズのためにそれを内部的に作成することが必要です。dataSource オプションは別として、コントロールを表示するには、name オプションと valueMemberPath オプションの値が必要です。valueMemberPath パラメーターは、シリーズのスライスの作成で使用される値を含みます。この例は、シリーズの dataSource オプションのインスタンスを作成するために、ProductItemCollection モデルで使用されます。シリーズの valueMemberPath はIndex に設定され、スライスを作成するためにその値を使用します。
「コントロールの MVC プロジェクトへの追加」トピックで説明されるとおり、必要な JavaScript ファイル、CSS ファイルおよび ASP.NET MVC アセンブリで構成される ASP.NET MVC アプリケーション
このトピックでは、Ignite UI for MVC を使用して ASP.NET MVC アプリケーションに igDoughnutChart のインスタンスを作成する方法を紹介します。
以下のスクリーンショットは結果のプレビューです。
この手順を実行するには、以下のリソースが必要です。
以下はプロセスの概念的概要です。
このトピックでは、Ignite UI for MVC を使用して ASP.NET MVC アプリケーションに igDoughnutChart のインスタンスを作成する方法を紹介します。
Infragistics.Web.Mvc.dll への参照を追加します
ASP.NET アプリケーション に Infragistics.Web.Mvc.dll への参照を追加します。このアセンブリを追加する作業の詳細は、「コントロールを MVC プロジェクトに追加」トピックを参照してください。
ビューの依存関係を構成します。
1.*Infragistics.Web.Mvc* 名前空間をインポートします
Ignite UI for MVC を使用するには、Infragistics.Web.Mvc 名前空間をビューにインポートする必要があります。
ASPX の場合:
<%@ Import Namespace="Infragistics.Web.Mvc" %>
2.すべてのデータ ビジュアライゼーション コントロールに対して結合したファイルに参照を追加します
ASP.NET MVC ビューの HEAD タグに以下のファイル参照を追加します (igLoader を使用する、または HTML ページへの igDoughnutChart の追加のトピックで説明するように、すべての Doughnut チャート関係のファイルを明示的に含めます)。
ASPX の場合:
<link href="<%=Url.Content("~/Scripts/css/structure/modules/infragistics.ui.chart.css")%>" rel="stylesheet"></link>
<link href="<%=Url.Content("~/Scripts/css/themes/infragistics/infragistics.theme.css")%>" rel="stylesheet"></link>
<script src="<%=Url.Content("~/Scripts/jquery.min.js")%>" type="text/javascript"></script>
<script src="<%=Url.Content("~/Scripts/jquery-ui.min.js")%>" type="text/javascript"></script>
<script src="<%=Url.Content("~/Scripts/js/infragistics.core.js")%>" type="text/javascript"></script>
<script src="<%=Url.Content("~/Scripts/js/infragistics.dv.js")%>" type="text/javascript"></script>
データ収集を定義します。
1.モデル オブジェクト ProductItem を定義します
データ収集のために使用するアプリケーションで 基本的な ProductItem オブジェクトを定義します。
C# の場合:
public class ProductItem
{
public string ProductCategory { get; set; }
public int Index { get; set; }
}
2.ProductItem オブジェクトのコレクションを作成します
C# の場合:
using System.Collections.Generic;
namespace DoughnutChartMVC
{
public class ProductItemCollection : List<ProductItem>
{
public ProductItemCollection()
{
this.Add(new ProductItem { ProductCategory = "Footwear", Index = 1498 });
this.Add(new ProductItem { ProductCategory = "Clothing", Index = 1389 });
this.Add(new ProductItem { ProductCategory = "Books", Index = 352 });
this.Add(new ProductItem { ProductCategory = "Accessories", Index = 273 });
this.Add(new ProductItem { ProductCategory = "Equipment", Index = 100 });
}
}
}
3.コントローラーの操作メソッドでビュー モデルとしてコレクションを返します。
C# の場合:
using System.Web.Mvc;
namespace DoughnutChartMVC.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
var products = new ProductItemCollection();
return View("Index", new ProductItemCollection());
}
}
}
ビューのモデルとして ProductItemCollection を追加します。
ASPX の場合:
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<DoughnutChartMVC.ProductItemCollection>" %>
igDoughnutChart のインスタンスを作成します。
igDoughnutChart のインスタンスを作成するために、Ignite UI for MVC を使用し基本的なオプションを設定します。igDoughnutChart のインスタンスを作成するには、ASP.NET ページの本文内で Ignite UI for MVC を使用します。コントロールのインスタンスを作成する場合、基本的な描画のために、以下に示すような複数のヘルパー メソッドを設定する必要があります。
| ヘルパー メソッド | 目的 |
|---|---|
| Width() |
igDoughnutChart の文字列の幅を設定します。
|
| Height() |
igDoughnutChart の文字列の高さを設定します。
|
| Series() |
igDoughnutChart のシリーズのインスタンスを作成します。その dataSource は別として、name をシリーズに割り当て、その valueMemberPath プロパティにスライスのサイズ決定に使用される値を設定する必要があります。
|
最終的に、すべての Ignite UI for MVC コントロールと同様に、Render メソッドを呼び出して HTML と JavaScript をビューに描画します。
ASPX の場合:
<body>
<%= Html.Infragistics().DoughnutChart()
.Width("300px")
.Height("300px")
.Series(s =>
{
s.Ring("flatSeries", Model.AsQueryable())
.ValueMemberPath(o => o.Index);
})
.Render()%>
</body>
完全なアプリケーション コードのリスト
ASPX の場合:
<%@Page Language="C#" Inherits="System.Web.Mvc.ViewPage<DoughnutChartMVC.ProductItemCollection>" %>
<%@ Import Namespace="Infragistics.Web.Mvc" %>
<!DOCTYPE html>
<html>
<head>
<title>DoughnutChart</title>
<link href="<%=Url.Content("~/Scripts/css/structure/modules/infragistics.ui.chart.css")%>" rel="stylesheet"></link>
<link href="<%=Url.Content("~/Scripts/css/themes/infragistics/infragistics.theme.css")%>" rel="stylesheet"></link>
<script src="<%=Url.Content("~/Scripts/jquery.min.js")%>" type="text/javascript"></script>
<script src="<%=Url.Content("~/Scripts/jquery-ui.min.js")%>" type="text/javascript"></script>
<script src="<%=Url.Content("~/Scripts/js/infragistics.core.js")%>" type="text/javascript"></script>
<script src="<%=Url.Content("~/Scripts/js/infragistics.dv.js")%>" type="text/javascript"></script>
</head>
<body>
<%= Html.Infragistics().DoughnutChart()
.Width("300px")
.Height("300px")
.Series(s =>
{
s.Ring("flatSeries", Model.AsQueryable())
.ValueMemberPath(o => o.Index);
})
.Render()%>
</body>
</html>
このトピックの追加情報については、以下のトピックも合わせてご参照ください。
igDoughnutChart の HTML ページへの追加: このトピックは、igDoughnutChart を HTML ページに追加する方法を説明します。
jQuery および MVC API リファレンス リンク (igDoughnutChart): このトピックでは、igDoughnutChart コントロールと Ignite UI for MVC に関する API ドキュメントへのリンクを提供します。
以下のサンプルでは、このトピックに関連する情報を提供しています。
igDoughnutChart を描画する方法を紹介します。ヘルパーはサーバーのオブジェクトのコレクションにバインドし、そのコレクションを JSON オブジェクトにシリアル化し、必要な igDoughnutChart HTML および JavaScript を描画します。オンラインで表示: GitHub