バージョン

igZoombar の追加

トピックの概要

目的

このトピックではコード例を使用して、igZoombar™ コントロールを HTML ページおよび ASP.NET MVC アプリケーションに追加する方法を説明します。

前提条件

このトピックを理解するために、以下のトピックを参照することをお勧めします。

  • igZoombar の概要: このトピックは、igZoombar コントロールの概念的な情報を説明し、このコントロールがサポートするユーザー インタラクションや基本構成などを含む機能を紹介します。

このトピックの内容

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

igZoombar の追加 - 概要

igZoombar の概要

igZoombar は、スタンドアロン コントロールとしては機能しません。igDataChart™ のような範囲対応コントロールに対する拡張機能として使用するように設計されています。これは他のコントロールとの組み合わせのみで機能します。igZoombar は追加設定なしで、igDataChart をサポートします。

igZoombar の概要表

以下の表で、igZoombar コントロールを HTML ページおよび ASP.NET MVC アプリケーションに追加する方法について簡単に説明します。詳細は、igZoombar の追加 - コード例を参照してください。

igZoombar を有効にするには 以下を実行します。
JavaScript ファイル igZoombar コントロールのインスタンスを作成し、それを target オプションを使用して、igDataChart コントロールにアタッチします。
ASP.NET MVC ビュー内では、Ignite UI for MVC を使用して、ZoombarWrapper オブジェクトを返す Zoombar メソッドを呼び出します。 Target メソッドを使用して、ZoombarWrapper オブジェクトを igDataChart コントロールにアタッチします。 最後に、ZoombarWrapper.Render メソッドを呼び出します。
注: HTML ページ内でプレースホルダーを定義する必要はありません。プレースホルダーは、Ignite UI for MVC によって自動的に作成されます。

igZoombar の追加 - コード例

コード例の概要

以下の表は、このトピックで使用したコード例をまとめたものです。

コード例: JavaScript での igZoombar の追加

説明

以下のコードは、デフォルト構成の インスタンスを作成して、igDataChart に接続します。

コード

HTML の場合:

Code
<!--Add a placeholders to the HTML page -->
<div id="chart"></div>
<br/>
<div id="zoom"></div>
var chart = $("#chart");
$("#chart").igDataChart({
// igDataChart options
});
$("#zoombar").igZoombar({
    target: "#chart"
});

コード例: ASP.NET MVC での igZoombar の追加

説明

以下のコードは、Ignite UI for MVC を使用して、ビュー内で igDataChartigZoombar のインスタンスを作成します。igZoombar コントロールは、デフォルト構成で描画されます。

コード

C# の場合:

Code
@(Html.Infragistics().DataChart(Model)
.ID("chart")
// DataChart options
.DataBind()
.Render()
)
@(Html.Infragistics().Zoombar().ID("zoombar").Target("chart").Render())

関連コンテンツ

トピック

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

  • igZoombar の構成: このトピックではコード例を使用して、ズーム動作と igZoombar コントロールのズーム ウィンドウを構成する方法を説明します。

  • アクセシビリティの遵守 (igZoombar): このトピックは、igZoombar コントロールのアクセシビリティ機能を説明し、このコントロールを含むページのアクセシビリティ遵守を実現する方法に関する情報を提供します。

  • 既知の問題と制限 (igZoombar): このトピックでは、igZoombar コントロールの既知の問題と制限、その回避策について説明します。

  • jQuery および MVC API リファレンス リンク (igZoombar): このトピックでは、igZoombar コントロールと ASP.NET MVC ヘルパーに関する API 参照ドキュメントへのリンクを提供します。

サンプル

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

  • 基本のズームバー: このサンプルは、igZoombar を財務データを表示する igDataChart コントロールに統合する方法を紹介します。

オンラインで表示: GitHub