igFunnelChart の追加

トピックの概要

目的

このトピックでは、igFunnelChart コントロールを HTML ページに追加しデータへバインドする方法を示します。

前提条件

以下の表は、このトピックを理解するための前提条件として必要な概念とトピックの一覧です。

• 概念
  • jQuery、jQuery UI
  • ASP.NET MVC
• トピック
  • Ignite UI for jQuery で JavaScript リソースの使用: このトピックでは、Ignite UI for jQuery ライブラリからコントロールを使用するために必要な JavaScript リソースを追加する方法についての概要を説明します。
  • igFunnelChart の概要: このトピックでは、主要機能、最小要件、ユーザー機能性など、igFunnelChart コントロールに関する概念的な情報を提供します。

このトピックの内容

このトピックは、以下のセクションで構成されます。

• igFunnelChart を HTML ページに追加 - 概要
  • 要件
• JavaScript を使用した igFunnelChart の HTML ページへの追加
  • 概要
  • プレビュー
  • 概要
  • 手順
• ASP.NET MVC を使用した igFunnelChart の HTML ページへの追加
  • 概要
  • プレビュー
  • 要件
  • 概要
  • 手順
• 関連コンテンツ
  • トピック
  • サンプル

igFunnelChart を HTML ページに追加 - 概要

igFunnelChart を HTML ページに追加する場合、内部で作成できるように、事前に構成されたデータ ソース インスタンスを提供するか、必要なオプションを指定する必要があります。データ ソース候補の詳細については、「データへのバインド」トピックを参照してください。

データ ソースは、igFunnelChart の dataSource プロパティを介して指定されます。データ ソースと高さの設定は、igFunnelChart の初期化時に設定しなければならない唯一の必須オプションです。

要件

igFunnelChart を HTML ページに追加すると、以下にリストされるリソースを参照する必要があります。これらのリソースは、JavaScript と ASP.NET MVC の両方が必要です。(JavaScript の固有要件および MVC 固有の要件は、「JavaScript を使用した igFunnelChart の HTML ページへの追加」と「 ASP.NET MVC を使用した igFunnelChart の HTML ページへの追加」のそれぞれのセクションで一覧になっています。)

注: JavaScript と CSS リソースを読み込むためには igLoader コンポーネントを使うことを推奨します。その方法の詳細については、「Infragistics ローダーの使用」トピックを参照してください。さらに、オンラインの Ignite UI for jQuery サンプル ブラウザー では、igFunnelChart コンポーネントで igLoader を使用する方法について特有の例が示されています。

JavaScript を使用した igFunnelChart の HTML ページへの追加

概要

この手順は、基本的な機能を持つファンネル チャートを Web ページに追加する手順を示します。例は、実際の HTML/JavaScript の実装を示します。igFunnelChart コントロールによって必要とされるすべての Ignite UI for jQuery リソースをロードするための適切な Loader 構成が含まれます。

プロシージャにより、325x450 ピクセルのファンネル チャートをインスタンス化し構成します。並べ替え順序はデフォルト (一番高い値が一番上) で、加重スライスおよび利得曲線で会社の部門の予算を表します。データは JSON 配列の形式で igFunnelChart コントロールに供給されます (プロシージャでも構成されます)。基本的な調整に加え、パスおよび igFunnelChart ラベルのビジュアル ステートは、表示されるデータに関し記述的な情報を有するために構成されます。

プレビュー

以下のスクリーンショットは結果のプレビューです。

概要

以下はプロセスの概念的概要です。

1.Infragistics Loader の追加

2.データ ソースの追加

3.igFunnelChart のインスタンス化

4.(オプション) 結果の検証

手順

以下のステップは、基本的なファンネル チャート コントロールを Web ページに追加する方法を示します。

1. Infragistics Loader を追加します。

   1. • igLoader* スクリプト ファイルへの参照を追加します。

        以下は、ページに igLoader スクリプトを読み込むためのサンプル <script> タグです。

        HTML の場合:

        <script src="/Scripts/ig/js/infragistics.loader.js"></script>
        

   2. igFunnelChart のための igLoader 構成を追加します 。

      以下のコードをページ上の <script> 要素に追加します。

      JavaScript の場合:

       $.ig.loader({
           scriptPath: "/Script/ig/",
           cssPath: "/Content/ig/",
           resources: "igFunnelChart,igChartLegend"
       });
      

2. データ ソースを追加します。

   データ ソースとして、ページ上の <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" }
    ];
   

3. igFunnelChart をインスタンス化します。

   1. HTML 要素をファンネル チャートに追加する

      HTML ページ上にファンネル チャートをホストする HTML <div> 要素を追加します。

      HTML の場合:

       <div id="funnel"></div>
      

   2. • 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 オプションは、インナー ラベルおよびアウター ラベルを表示するかどうかを決定します。インナー ラベルは、スライスの内側に表示されるテキストであり、ラベルはスライスの左側または右側に表示されるテキストです。

4. (オプション) 結果を確認します。

   結果を検証するには、ページを保存し、Web ブラウザーで結果を確認します。手順を正しく実行した場合、マップはプレビューのように表示されます。

ASP.NET MVC を使用した igFunnelChart の HTML ページへの追加

概要

この手順は、基本的な機能を備えたファンネル チャートを 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

概要

以下はプロセスの概念的概要です。

• 1.データ モデルを追加します。
• 2.コントローラー アクション メソッドの追加
• 3.厳密に型指定された ASP.NET MVC ビューの追加
• 4.Infragistics Loader の追加
• 5.igFunnelChart のインスタンス化
• 6.(オプション) 結果の検証

手順

以下の手順は、基本的なファンネル チャート コントロールを ASP.NET MVC アプリケーションに追加する方法を示します。

1. データ モデルを追加します。

   以下のコードはデータ モデル部分を示します。

   1. ASP.NET MVC アプリケーションの Models フォルダーへナビゲートします。
   2. 新しい空のクラスを追加し、 BudgetData という名前をつけます。

   3. 以下のコードを追加します。これは、指定された Department の Budget に対して10 進数フィールドを持つ会社の予算からのエントリを表します。

      C# の場合:

      public class BudgetData
      {
      
          public decimal Budget { get; set; }
          public string Department { get; set; }
      
      }
      

2. コントローラー アクション メソッドを追加します。

   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());
    }
   

3. 厳密に型指定された ASP.NET MVC ビューを追加します。

   ビュー を追加して構成するには

   1. コントローラーのアクション メソッドに対応する View を作成します。

   2. View を厳密に型指定し、上記のステップ 3.1 で作成されたデータ モデル クラスをポイントします。

      ASPX の場合:

      @model IQueryable<MvcApp.Models.BudgetData>
      

4. Infragistics Loader を追加します。

   1. igLoader スクリプト ファイルへの参照を追加します。

      以下は、ページに igLoader スクリプトを読み込むためのサンプル <script> タグです。

      HTML の場合:

       <script src="/Scripts/ig/js/infragistics.loader.js"></script>
      

   2. 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()
       )
      

5. igFunnelChart をインスタンス化します。

   以下のコードは、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() 呼び出しは、インナー ラベルおよびアウター ラベルを描画するかどうかを決定します。インナー ラベルは、スライスの内側に表示されるテキストであり、ラベルはスライスの左側または右側に表示されるテキストです。

6. (オプション) 結果を検証します。

   結果を検証するには、ページを保存し、Web ブラウザーで最終結果を確認します。手順を正しく実行した場合、マップはプレビューのように表示されます。

関連コンテンツ

トピック

このトピックの追加情報については、以下のトピックも合わせてご参照ください。

• igFunnelChart の概要: このトピックでは、主要機能、最小要件、ユーザー機能性など、igFunnelChart コントロールに関する概念的な情報を提供します。

• igFunnelChart のデータへのバインディング: このトピックでは、igFunnelChart コントロールを各種データ ソースへバインドする方法を説明します。

• igFunnelChart の構成: このトピックは、igFunnelChart コントロールの異なる可視機能とビヘイビアーの構成方法を説明します。

• igFunnelChart のスタイル設定: このトピックでは、igFunnelChart コントロールのルックアンドフィールをカスタマイズする方法を説明します。

• アクセシビリティ準拠 (igFunnelChart): このトピックでは、igFunnelChart コントロールのユーザー補助機能について説明し、チャートを含むページのアクセシビリティの遵守を実現する方法に関してアドバイスを提供します。

• 既知の問題と制限 (igFunnelChart): このトピックでは、igFunnelChart コントロールに関連する既知の問題点に関する情報を提供します。

• jQuery と MVC API リンク (igFunnelChart): このトピックでは、igFunnelChart コントロールと ASP.NET MVC ヘルパーのための API リファレンスのドキュメントへのリンクの一覧を示します。

サンプル

このトピックについては、以下のサンプルも参照してください。

• ファンネル チャート: このサンプルは、ファンネル チャート コントロールを使用して大きな値から小さな値までスライスの位置を反転する機能でスライスとしてデータを描画するコントロールの使用を説明します。