このトピックでは、igFunnelChart
コントロールを HTML ページに追加しデータへバインドする方法を示します。
以下の表は、このトピックを理解するための前提条件として必要な概念とトピックの一覧です。
igFunnelChart
コントロールに関する概念的な情報を提供します。このトピックは、以下のセクションで構成されます。
igFunnelChart を HTML ページに追加する場合、内部で作成できるように、事前に構成されたデータ ソース インスタンスを提供するか、必要なオプションを指定する必要があります。データ ソース候補の詳細については、「データへのバインド」トピックを参照してください。
データ ソースは、igFunnelChart
の dataSource
プロパティを介して指定されます。データ ソースと高さの設定は、igFunnelChart の初期化時に設定しなければならない唯一の必須オプションです。
igFunnelChart を HTML ページに追加すると、以下にリストされるリソースを参照する必要があります。これらのリソースは、JavaScript と ASP.NET MVC の両方が必要です。(JavaScript の固有要件および MVC 固有の要件は、「JavaScript を使用した igFunnelChart の HTML ページへの追加」と「 ASP.NET MVC を使用した igFunnelChart の HTML ページへの追加」のそれぞれのセクションで一覧になっています。)
要件 | 説明 | ||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
HTML5 キャンバス API | チャート用ライブラリの機能は、HTML5 Canvas タグとそれに関する API に基づきます。これらをサポートする Web ブラウザーは、igFunnelChart コントロールにより生成されたチャートを描画および表示できます。その他の HTML5 機能は、igFunnelChart コントロールの操作に必要です。HTML5 Canvas API をサポートするもっとも人気のあるデスクトップおよび携帯電話の Web ブラウザーのバージョンに関する詳細は、「キャンバス要素」を参照してください。 | ||||||||||||||||||||||||||||
jQuery および jQuery UI JavaScript リソース | Ignite UI for jQuery は、これらのフレームワークの最上位にビルドされます。 | ||||||||||||||||||||||||||||
Modernizr | Modernizr ライブラリは、ブラウザとデバイス機能を検出するために igFunnelChart で使用されます。これは必須ではなく、含まれていない場合、コントロールは HTML5 をサポートするブラウザーが動作する通常のデスクトップ環境であるように動作します。 | ||||||||||||||||||||||||||||
JavaScript リソースのチャート表示 |
Ignite UI for jQuery ライブラリのチャート表示機能は、シリーズ タイプに応じて複数のファイルに渡って配布されます。また、HTML または MVC のビューにリンクする必要のある別個のファンネル チャート JavaScript ファイルもあります。
手動でリソースを含めたい場合には、次の表に示された依存関係を使用する必要があります。
|
||||||||||||||||||||||||||||
IG テーマ | このテーマには、Ignite UI for jQuery ライブラリ向けに作成されたカスタム ビジュアル スタイルが含まれます。これは次のファイルに含まれます。 <IG CSS ルート>/themes/Infragistics/infragistics.theme.css | ||||||||||||||||||||||||||||
チャート構造 | この CSS リソースは、コントロールのさまざまな要素を描画するためにチャート コンポーネントによって使用されます。 <IG CSS root>/structure/modules/infragistics.ui.chart.css |
注: JavaScript と CSS リソースを読み込むためには igLoader コンポーネントを使うことを推奨します。その方法の詳細については、「Infragistics ローダーの使用」トピックを参照してください。さらに、オンラインの Ignite UI for jQuery サンプル ブラウザー では、
igFunnelChart
コンポーネントでigLoader
を使用する方法について特有の例が示されています。
この手順は、基本的な機能を持つファンネル チャートを Web ページに追加する手順を示します。例は、実際の HTML/JavaScript の実装を示します。igFunnelChart
コントロールによって必要とされるすべての Ignite UI for jQuery リソースをロードするための適切な Loader 構成が含まれます。
プロシージャにより、325x450 ピクセルのファンネル チャートをインスタンス化し構成します。並べ替え順序はデフォルト (一番高い値が一番上) で、加重スライスおよび利得曲線で会社の部門の予算を表します。データは JSON 配列の形式で igFunnelChart
コントロールに供給されます (プロシージャでも構成されます)。基本的な調整に加え、パスおよび igFunnelChart
ラベルのビジュアル ステートは、表示されるデータに関し記述的な情報を有するために構成されます。
以下のスクリーンショットは結果のプレビューです。
以下はプロセスの概念的概要です。
以下のステップは、基本的なファンネル チャート コントロールを Web ページに追加する方法を示します。
igLoader* スクリプト ファイルへの参照を追加します。
以下は、ページに igLoader
スクリプトを読み込むためのサンプル <script>
タグです。
HTML の場合:
<script src="/Scripts/ig/js/infragistics.loader.js"></script>
igFunnelChart のための igLoader 構成を追加します 。
以下のコードをページ上の <script>
要素に追加します。
JavaScript の場合:
$.ig.loader({
scriptPath: "/Script/ig/",
cssPath: "/Content/ig/",
resources: "igFunnelChart,igChartLegend"
});
データ ソースとして、ページ上の <script>
要素に 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" }
];
HTML 要素をファンネル チャートに追加する
HTML ページ上にファンネル チャートをホストする HTML <div>
要素を追加します。
HTML の場合:
<div id="funnel"></div>
igFunnelChart* をインスタンス化します。
以下の初期化コードをページ上の <script>
要素に追加します。
JavaScript の場合:
$.ig.loader(function () {
// Create a basic funnel chart
$("#funnel").igFunnelChart({
width: "325px",
height: "450px",
dataSource: data,
valueMemberPath: "Budget",
innerLabelMemberPath: "Budget",
innerLabelVisibility: "visible",
outerLabelMemberPath: "Department",
outerLabelVisibility: "visible"
});
});
上記のコードは、以前に追加された <div>
要素でファンネル チャートを作成します。
width
および height
のオプションは、ページ上のチャートのサイズとともに割り当てられ、その値は CSS で利用可能な単位で指定できます。
チャートへデータを提供するオブジェクトを dataSource
オプションに割り当てます。valueMemberPath
オプションは、ビジュアル化するデータを含むデータ ソース内のフィールド名で設定します。innerLabelMemberPath
オプションおよび outerLabelMemberPath
オプションは、スライスごとに表示されるラベルまたは名前を含むデータ ソース内のフィールド名で設定します。
innerLabelVisibility
オプションおよび outerLabelVisibility
オプションは、インナー ラベルおよびアウター ラベルを表示するかどうかを決定します。インナー ラベルは、スライスの内側に表示されるテキストであり、ラベルはスライスの左側または右側に表示されるテキストです。
結果を検証するには、ページを保存し、Web ブラウザーで結果を確認します。手順を正しく実行した場合、マップはプレビューのように表示されます。
この手順は、基本的な機能を備えたファンネル チャートを ASP.NET MVC ビューに追加する方法を示します。
プロシージャにより、325x450 ピクセルのファンネル チャートをインスタンス化し構成します。並べ替え順序はデフォルト (一番高い値が一番上) で、加重スライスおよび利得曲線で会社の部門の予算を表します。データは JSON 配列の形式で igFunnelChart
コントロールに供給されます (プロシージャでも構成されます)。基本的な調整に加え、パスおよび igFunnelChart
ラベルのビジュアル ステートは、表示されるデータに関し記述的な情報を有するために構成されます。
この例では、必要なローダー構成とともに ASP.NET MVC 構文を使用して、コントローラー アクション メソッドによって渡されたデータ モデル オブジェクトにバインドし、コントロールの操作でこれを実行するのに不可欠なオプションを設定しています。
データを ASP.NET MVC ビュー に供給するには、適切なデータ モデル定義を使用してコントローラーを介します。モデルは、指定された Department の Budget 用に10 進数フィールドを持つ会社の予算からのエントリを表します。
例では、ある仮想会社の予算のコンテキストで示します。
以下のスクリーンショットは最終結果のプレビューです。
以下は、igFunnelChart
を ASP.NET MVC の HTML ページへ追加するための全般的な要件です。
igFunnelChart
用に Ignite UI for MVC を含む Ignite UI for MVC のアセンブリ Infragistics.Web.Mvc.dll以下はプロセスの概念的概要です。
以下の手順は、基本的なファンネル チャート コントロールを ASP.NET MVC アプリケーションに追加する方法を示します。
以下のコードはデータ モデル部分を示します。
BudgetData
という名前をつけます。以下のコードを追加します。これは、指定された Department
の Budget
に対して10 進数フィールドを持つ会社の予算からのエントリを表します。
C# の場合:
public class BudgetData
{
public decimal Budget { get; set; }
public string Department { get; set; }
}
ASP.NET MVC アプリケーションの Controllers フォルダーに空のコントローラー クラスを追加します。
コントローラーのアクションにより、BudgetData
オブジェクトのリストがアプリケーション内のデータベースまたは外部データ サービスにより提供されたデータで初期化されます。次に、コントローラーは、データを持つコントローラー用にデフォルトの ビュー を呼び出します。
C# の場合:
public ActionResult Index()
{
var data = new List<BudgetData>()
{
new BudgetData { Budget = 30, Department = "Administration" },
new BudgetData { Budget = 50, Department = "Sales" },
new BudgetData { Budget = 60, Department = "IT" },
new BudgetData { Budget = 50, Department = "Marketing" },
new BudgetData { Budget = 100, Department = "Development" },
new BudgetData { Budget = 20, Department = "Support" }
};
return View(data.AsQueryable());
}
厳密に型指定された ASP.NET MVC ビューを追加します。
ビュー を追加して構成するには
コントローラーのアクション メソッドに対応する View を作成します。
View を厳密に型指定し、上記のステップ 3.1 で作成されたデータ モデル クラスをポイントします。
ASPX の場合:
@model IQueryable<MvcApp.Models.BudgetData>
igLoader
スクリプト ファイルへの参照を追加します。
以下は、ページに igLoader スクリプトを読み込むためのサンプル <script>
タグです。
HTML の場合:
<script src="/Scripts/ig/js/infragistics.loader.js"></script>
igFunnelChart
用 igLoader
の構成を追加します。
ASP.NET MVC ビュー に追加された以下のコードは、igLoader
のラッパーを Ignite UI for jQuery リソースへのパスで構成します。
ASPX の場合:
@(Html.Infragistics()
.Loader()
.ScriptPath("http://localhost/ig_ui/js/")
.CssPath("http://localhost/ig_ui/css/")
.Render()
)
以下のコードは、Ignite UI for MVC FunnelChart を構成して <div>
要素を id
“funnel” で作成します。ファンネル チャートは ID(“funnel”)
呼び出しでホストされ、ビュー用に宣言されたデータ モデル オブジェクトを FunnelChart(Model)
呼び出しでコントロールに割り当てます。各スライスの値を提供するモデルのメンバーは、ValueMemberPath("Budget")
呼び出しで参照されます。
ASPX の場合:
@(Html.Infragistics().FunnelChart(Model)
.ID("funnel")
.Height("450px")
.Width("325px")
.ValueMemberPath("Budget")
.InnerLabelMemberPath("Budget")
.OuterLabelMemberPath("Department")
.InnerLabelVisibility(Visibility.Visible)
.OuterLabelVisibility(Visibility.Visible)
.DataBind()
.Render()
)
Width()
および Height()
呼び出しはページ上のチャートのサイズを指定し、その値は CSS で利用可能な単位で指定できます。
innerLabelMemberPath()
呼び出しおよび outerLabelMemberPath()
呼び出しは、スライスごとに表示されるラベルまたは名前を含むデータ ソース内のフィールド名を構成します。
innerLabelVisibility()
呼び出しおよび outerLabelVisibility()
呼び出しは、インナー ラベルおよびアウター ラベルを描画するかどうかを決定します。インナー ラベルは、スライスの内側に表示されるテキストであり、ラベルはスライスの左側または右側に表示されるテキストです。
結果を検証するには、ページを保存し、Web ブラウザーで最終結果を確認します。手順を正しく実行した場合、マップはプレビューのように表示されます。
このトピックの追加情報については、以下のトピックも合わせてご参照ください。
igFunnelChart の概要: このトピックでは、主要機能、最小要件、ユーザー機能性など、igFunnelChart
コントロールに関する概念的な情報を提供します。
igFunnelChart のデータへのバインディング: このトピックでは、igFunnelChart
コントロールを各種データ ソースへバインドする方法を説明します。
igFunnelChart の構成: このトピックは、igFunnelChart
コントロールの異なる可視機能とビヘイビアーの構成方法を説明します。
igFunnelChart のスタイル設定: このトピックでは、igFunnelChart
コントロールのルックアンドフィールをカスタマイズする方法を説明します。
アクセシビリティ準拠 (igFunnelChart): このトピックでは、igFunnelChart
コントロールのユーザー補助機能について説明し、チャートを含むページのアクセシビリティの遵守を実現する方法に関してアドバイスを提供します。
既知の問題と制限 (igFunnelChart): このトピックでは、igFunnelChart
コントロールに関連する既知の問題点に関する情報を提供します。
jQuery と MVC API リンク (igFunnelChart): このトピックでは、igFunnelChart
コントロールと ASP.NET MVC ヘルパーのための API リファレンスのドキュメントへのリンクの一覧を示します。
このトピックについては、以下のサンプルも参照してください。
オンラインで表示: GitHub