このトピックは、igPieChart™ コントロールをウェブ ページに追加し、それをデータにバインドする方法を説明します。
以下の表に、このトピックを理解するための前提条件として求められる素材をリストします。
概念
トピック
Ignite UI for jQuery の概要: Ignite UI for jQuery™ ライブラリにつぃての一般的情報
Ignite UI for jQuery で JavaScript リソースを使用: このトピックは、必要な JavaScript リソースを追加して Ignite UI for jQuery ライブラリからコントロールを使用する場合の全般的なガイダンスを提供します。
igPieChart の概要: このトピックでは、igPieChart コントロールについての概念情報を提供します。これには、その主な機能、チャートとユーザー機能を使用するための最低要件が含まれます。
このトピックは、以下のセクションで構成されます。
この手順は、凡例の付いた Pie Chart コントロールを Web ページに追加するプロセスを説明します。例にあるグラフのデータは JavaScript 配列に提供されています。
以下のスクリーンショットは最終結果のプレビューです。
この手順を実行するには、以下のリソースが必要です。
このトピックでは、円チャートを Web ページに追加する方法を順を追って説明します。以下はプロセスの概念的概要です。
igLoader を使用した JavaScript のリソースの参照igPieChart で必要な HTML マークアップを追加以下のステップは、igPieChart コントロールを Web ページに追加する方法を示します。
必要なリソースへの参照を追加します。
概要
必要なリソースを参照します。リソースの参照には以下のものがあります。
Web サイトまたは Web アプリケーションの Scripts/ig という名前のフォルダーへの Ignite UI for jQuery JavaScript ファイルの追加 (詳細は、Ignite UI for jQuery での JavaScript リソースの使用のトピックを参照してください)。
リソースは手動またはローダー (推奨) を使用して追加できます。
igLoader を使用した JavaScript のリソースの参照
Ignite UI for jQuery ライブラリのコントロールで必要な JavaScript および CSS リソースの読み込みには、igLoader™ コントロールを使用することをお勧めします。最初に、igLoader スクリプトをページに追加します。
HTML の場合:
<script type="text/javascript" src="Content/ig/infragistics.loader.js"></script>
HTML ビューでは、以下のように igLoader のインスタンスを作成する必要があります。
HTML の場合:
<script type="text/javascript">
$.ig.loader({
scriptPath: "Scripts/ig/",
cssPath: "Content/ig/",
resources: "igPieChart,igChartLegend"
});
<script>
resources オプションを igPieChart コントロールが描画されるように指定します。
MVC Loader を使用した MVC でのリソースの参照
Infragistics.Web.Mvc アセンブリを ASP.NET MVC プロジェクトで参照し、対応する名前空間をビューで参照する必要があります。詳細については、Ignite UI for jQuery で JavaScript リソースを使用をご覧ください。ただし、明確にするため、名前空間を参照するコードはここに記載します。
MVC ビューでは、Ignite UI for MVC Loader を使用する必要があります。
ASPX の場合:
<%@ Import Namespace="Infragistics.Web.Mvc" %>
<%= Html.Infragistics().Loader()
.ScriptPath(Url.Content("~/Scripts/ig/"))
.CssPath(Url.Content("~/Content/ig/"))
.Render()
%>
Ignite UI for MVC Loader は必要なリソースを自動的に検出するため、リソースを指定する必要はありません。
手動によるリソースの参照
手動で読み込む場合は、igPieChart の概要トピックの最低要件ブロックを参照し、円チャートを使用するにはどのリソース ファイルをリンクする必要があるか確認してください。
igPieChart で必要な HTML マークアップを追加
HTML の例
グラフの DIV 要素とグラフ インスタンス コードで参照される凡例を追加します。
HTML の場合:
<div id="chart" class="chartContainer"></div>
<div id="legend" class="chartContainer"></div>
ASP.NET の例
ASP.NET MVC の場合、Ignite UI for MVC は必要なマークアップを自動的に追加するため、コンテナー要素が必要です。
データ ソースを追加します。
HTML の例
HTML の例については、企業の予算データのデータ レコードによる配列を定義する JavaScript コードを追加する必要があります。他のデータ ソースへのバインドに関する情報を取得するには、データ バインディング (igPieChart)のトピックを参照してください。
以下のコードを HTML 文書の巻頭に組み込みます。
HTML の場合:
<script type="text/javascript">
var data = [
{ "Budget": 950000, "Department": "Accounting" },
{ "Budget": 1500000, "Department": "Sales" },
{ "Budget": 1400000, "Department": "Marketing" },
{ "Budget": 2000000, "Department": "Logistics" },
{ "Budget": 800000, "Department": "IT" }
];
</script>
ASP.NET の例
ASP.NET MVC ビューのデータは、Controller メソッドと適切なデータ モデル定義により提供されます。データ モデル部分を以下に示します。新しい空のクラスを ASP.NET MVC アプリケーションの Models フォルダーに作成し、以下のコードを追加します。
C# の場合:
public class DepartmentSpending
{
public string Department { get; set; }
public decimal Budget { get; set; }
}
Controllers フォルダーに空のコントローラー クラスを追加し、Index (または、ビューに付けられた任意の名前) メソッドの以下のコードを追加します。
C# の場合:
public ActionResult Index()
{
List<DepartmentSpending> companyBudget = new List<DepartmentSpending>
{
new DepartmentSpending { Budget = 950000, Department = "Accounting" },
new DepartmentSpending { Budget = 1500000, Department = "Sales" },
new DepartmentSpending { Budget = 1400000, Department = "Marketing" },
new DepartmentSpending { Budget = 2000000, Department = "Logistics" },
new DepartmentSpending { Budget = 500000, Department = "IT" }
};
return View(companyBudget.AsQueryable());
}
ASP.NET MVC ビューに以下のコードを追加して強く定型化し、上記で作成されたデータ モデル クラスをポイントします。
ASPX の場合:
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<IQueryable<PieChartSample.Models.DepartmentSpending>>" %>
円チャートのインスタンスを作成します。
HTML の例
ラップするチャートおよび凡例の DIV タグと描画されたグラフについて、igPieChart コントロールのインスタンスを作成し、そのメイン オプションを設定する必要があります。以下のコードを、データ配列定義について上記で使用された <script> タグの既存のコードに追加します。
JavaScript の場合:
$(function () {
$("#chart").igPieChart({
width: "450px",
height: "450px",
dataSource: data,
dataValue: "Budget",
dataLabel: "Department",
radiusFactor: 0.8,
explodedSlices: '0 1 2',
legend: { element: "legend", type: "item"}
});
});
幅と高さのオプションにより、グラフ コンテナーのサイズは明示的に設定されますが、省略できます。コントロールは自動的に適切なサイズを計算します。
radiusFactor オプションは、幅および高さで設定されたコンテナー要素のサイズに対する円のサイズを設定し、デフォルト値は 0.9 です。explodedSlices オプションは、スペースで区切られたスライスのインデックスの一覧で、主な円から切り離されたどのスライスを表示するか決定します。スライスは頭の中で思い描いた線を円の中央から右側に移動し、時計回りにカウントされます。
以前定義された配列 data がチャート コントロールの dataSource オプションにどのように割り当てられているか注意してください。入力データのどのメンバーがグラフに表示されるか構成するため、dataValue オプションと dataLabel オプションは必須です。dataValue オプションは、スライスという形で視覚化されています。たとえば、すべてのメンバーの合計に対するこのメンバーの相対値 (またはパーセンテージ) がスライスのサイズを決定します。dataLabel オプションは、各スライスを表すスライス ラベルという形、また凡例がある場合は凡例という形で視覚化されています。
凡例について重要な設定は、legend オブジェクトの type オプションで指定された凡例の型です。item 型は円チャートを使用するときは必ず指定する必要があります。示したデータ ソースの各データ項目について凡例項目が作成されるためです。
ASP.NET の例
以下のコードは、Infragistics.Web.Mvc アセンブリで提供された Ignite UI for MVC PieChart を使用して、igPieChart の主な機能のインスタンスを作成し、設定しています。データ モデル は、PieChart(Model) 呼び出しでコントロールに関連付けられ、残りの呼び出しは HTML の例と似た振る舞いをします。
ASPX の場合:
<%= Html.Infragistics().PieChart(Model)
.ID("chart")
.Height("450px")
.Width("450px")
.DataValue(item => item.Budget)
.DataLabel(item => item.Department)
.RadiusFactor(0.8)
.ExplodedSlices("0 1 2")
.Legend(legend => legend.ID("legend").LegendType(LegendType.Item))
.DataBind()
.Render()
%>
結果を検証するには、ページを保存し、Web ブラウザーで最終結果を確認します。円チャートはプレビューに示すように描画されます。
このトピックの追加情報については、以下のトピックも合わせてご参照ください。
データ バインディング (igPieChart): このトピックでは、さまざまなデータ ソースを igPieChart™ コントロールにバインドする方法を説明します。
jQuery および MVC API リファレンス リンク (igPieChart): このトピックは、igDataChart™ の jQuery および Ignite UI for MVC クラスのたえの API マニュアルへのリンクを提供します。
igPieChart にテーマを設定する: スタイルを用い、igPieChart™ にテーマを適用する方法を説明します。
このトピックについては、以下のサンプルも参照してください。
以下の資料 (Infragistics のコンテンツ ファミリー以外でもご利用いただけます) は、このトピックに関連する追加情報を提供します。
jQuery ホーム ページ: ライブラリのインストールと機能の詳細情報が記載された jQuery ライブラリのホーム ページです。
ASP.NET MVC ホーム ページ: ASP.NET MVC のインストールと使用についての詳細情報が記載された jQuery ライブラリのホーム ページです。
オンラインで表示: GitHub