このトピックでは、igFunnelChart™ コントロールを異なるデータ ソースへバインドする方法を説明します。
以下の表は、このトピックを理解するための前提条件として必要な概念とトピックの一覧です。
igDataSource™ コンポーネントの概要を提供し、HTML ページへの追加方法をコードを説明します。igFunnelChart コントロールに関する概念的な情報を提供します。igFunnelChart コントロールを HTML ページに追加しデータへバインドする方法を説明します。このトピックは、以下のセクションで構成されます。
その他のコントロールを Ignite UI for jQuery® ライブラリへバインドするのと同じやり方で igFunnelChart へデータをバインドします。データのバインドは、dataSource オプションにデータ ソースを割り当てるという形で行い、Web または Windows Communication Foundation (WCF) サービスによって提供されるデータについては dataSourceUrl に URL を指定するという形で行います。igFunnelChart コントロールは igDataSource オブジェクトを作成および使用してデータを処理します。
igFunnelChart コントロールは以下のデータ ソースをサポートしています。
各データ ソースには、igFunnelChart コントロールへのデータ バインディングの異なる要件があります。以下の表に、各要件カテゴリを示します。
| 要件のカテゴリ | 要件の一覧 |
|---|---|
| データ構造 |
|
| データ型 |
|
以下の表は、このトピックで使用したコード例をまとめたものです。
| 例 | 説明 |
|---|---|
| JavaScript 配列へのバインド | この例は、igFunnelChart コントロールを JavaScript データ配列にバインドする際の手順を示します。 |
| igFunnelChart の XML データへのバインディング | この例は、igFunnelChart コントロールを XML 構造にバインドする際の手順を示します。 |
| igFunnelChart の厳密に型指定された MVC ビューへのバインド | この例は、厳密に型指定された ASP.NET MVC ビューでモデル オブジェクトにigFunnelChart コントロールをバインドする方法をデモします。 |
| igFunnelChart のリモート サービスからの JSON へのバインド | この例は、リモート データを要求して JSON 応答にバインドするために igFunnelChart コントロールを構成する方法をデモします。 |
もっとも一般的なデータ バインディング シナリオの 1 つは、Web ページ上でデータ オブジェクトの JavaScript 配列からデータを可視化することです。この例は、2 つのフィールドを持つオブジェクトのサンプル配列を定義し、データ ソースとして配列を使用するファンネル チャートを構成します。
以下のスニペットは、JavaScript 配列を定義するものです。ページにおいてスニペットをスクリプト ブロックに起きます。
JavaScript の場合:
var data = [
{ Budget: 30, Department: "Administration" },
{ Budget: 50, Department: "Sales" },
{ Budget: 60, Department: "IT" },
{ Budget: 50, Department: "Marketing" },
{ Budget: 100, Department: "Development" },
{ Budget: 20, Department: "Support" }
];
以下のスニペットはファンネル チャートをインスタンス化し、上記に定義された配列にチャートをバインドします。この例は、その他のすべてのインスタンス化の詳細を省略する基本的なデータ バインディング コードを示すのみです。
JavaScript の場合:
$("#funnel").igFunnelChart({
. . .
dataSource: data,
valueMemberPath: "Budget",
innerLabelMemberPath: "Budget",
outerLabelMemberPath: "Department"
});
igFunnelChart は、igDataSource コンポーネントの助けを得てデータ ソースとして XML 構造をサポートします。このコード例は、XML 構造を igDataSource オブジェクトに渡し、データ ソース オブジェクトをファンネル チャート コントロールにバインドする方法を示します。
以下のコード スニペットは、JavaScript 文字列で XML 構造を定義します。構造には、2 つのデータ属性を持つノードが含まれます。Department と Budget です。
JavaScript の場合:
var xmlDoc =
'<CompanyBudget>' +
'<BudgetEntry Department="Development" Budget="100" />' +
'<BudgetEntry Department="IT" Budget="60" />' +
'<BudgetEntry Department="Sales" Budget="60" />' +
'<BudgetEntry Department="Marketing" Budget="50" />' +
'<BudgetEntry Department="Administration" Budget="30" />' +
'<BudgetEntry Department="Support" Budget="20" />' +
'</CompanyBudget>';
以下のコード スニペットは、XML データの構造を igDataSource で認識可能な igDataSchema オブジェクトへ宣言する方法を示します。
JavaScript の場合:
var xmlSchema = new $.ig.DataSchema("xml",
{
searchField: "//BudgetEntry",
fields: [
{ name: "Department", xpath: "./@Department" },
{ name: "Budget", xpath: "./@Budget", type: "number" }
]
}
);
以下のコード スニペットは、XML データとスキーマ オブジェクトを使用して igDataSource をインスタンス化する方法を示します。
JavaScript の場合:
var ds = new $.ig.DataSource({
type: "xml",
dataSource: xmlDoc,
schema: xmlSchema
});
以下のコード スニペットは、上記で作成されたデータ ソースにバインドする igFunnelChart コントロールのインスタンス化コードを示します。データ ソース オブジェクトは、データを XML 構造から処理し、適切なフォームでファンネル チャート コントロールに提供します。
JavaScript の場合:
$("#chartNormal").igFunnelChart({
. . .
dataSource: ds,
valueMemberPath: "Budget",
innerLabelMemberPath: "Budget",
outerLabelMemberPath: "Department"
});
このサンプルは、igFunnelChart を XML 構造のデータにバインドする方法を紹介します。そのために、XML データはデータをファンネル チャートに提供する igDataSource に渡されます。
MVC アプリケーションでは、通常、厳密に型指定されたビューを持ち、アプリケーションのビジネス ロジック レイヤーからデータ オブジェクトを渡します。このサンプルは、サンプル データ クラスを定義し、モデル オブジェクトをファンネル チャートをインスタンス化する Ignite UI for MVC FunnelChart に渡す基本的なコードを提供します。データ モデル オブジェクトは、データ クラスの IQueryable である必要があります。
次のコード スニペットは、2 つのデータ フィールドから構成されるサンプル クラスを宣言します。
C# の場合:
public class BudgetData
{
public decimal Budget { get; set; }
public string Department { get; set; }
}
以下のコード スニペットは、最初に厳密に型指定された MVC ビューを指定します。次に、ビューのモデル オブジェクトにバインドするために Ignite UI for MVC FunnelChart を使用する方法を示します。
ASPX の場合:
@model IQueryable<MvcApp.Models.BudgetData>
. . .
@(Html.Infragistics().FunnelChart(Model)
.ID("funnel")
. . .
.ValueMemberPath("Budget")
.InnerLabelMemberPath("Budget")
.OuterLabelMemberPath("Department")
.DataBind()
.Render()
)
このコード例は、要求からリモート サービス (この場合は MVC コントローラー アクション) への JSON データを igFunnelChart コントロールへバインドする方法を示します。
次のコード スニペットは、2 つのデータ フィールドから構成されるサンプル クラスを宣言します。
C# の場合:
public class BudgetData
{
public decimal Budget { get; set; }
public string Department { get; set; }
}
以下のコード スニペットは、リモート要求にサービスを提供するコントローラー アクション メソッドを定義します。このメソッドは getData() メソッドを使用して実際のデータ取得ロジックを実装し、ここには表示されません。
C# の場合:
[ActionName("getBudget")]
public JsonResult GetBudget()
{
var data = getData();
return new JsonResult
{
Data = data,
JsonRequestBehavior = JsonRequestBehavior.AllowGet
};
}
以下のコード スニペットは、リモート データ サービスのための URL を構成する igFunnelChart コントロールに対してインスタンス化コードを含みます。コード スニペットは、その他のすべてのインスタンス化オプションを省略する基本的なデータ バインディング コードを示すのみです。
JavaScript の場合:
$("#chartRemote").igFunnelChart({
. . .
dataSourceUrl: "/businessLogic/getBudget",
valueMemberPath: "Budget",
innerLabelMemberPath: "Budget",
outerLabelMemberPath: "Department"
});
このトピックの追加情報については、以下のトピックも合わせてご参照ください。
igFunnelChart の構成: このトピックは、igFunnelChart コントロールの異なる可視機能とビヘイビアーの構成方法を説明します。
igFunnelChart のスタイル設定: このトピックでは、igFunnelChart コントロールのルックアンドフィールをカスタマイズする方法を説明します。
アクセシビリティ準拠 (igFunnelChart): このトピックでは、igFunnelChart コントロールのユーザー補助機能について説明し、チャートを含むページのアクセシビリティの遵守を実現する方法に関してアドバイスを提供します。
既知の問題と制限 (igFunnelChart): このトピックでは、igFunnelChart コントロールに関連する既知の問題点に関する情報を提供します。
jQuery と MVC API リンク (igFunnelChart): このトピックでは、igFunnelChart コントロールのための API リファレンスのドキュメントへのリンクの一覧を示します。
このトピックについては、以下のサンプルも参照してください。
オンラインで表示: GitHub