このトピックではコード例を使用して、igZoombar
™ コントロールを HTML ページおよび ASP.NET MVC アプリケーションに追加する方法を説明します。
このトピックを理解するために、以下のトピックを参照することをお勧めします。
igZoombar
コントロールの概念的な情報を説明し、このコントロールがサポートするユーザー インタラクションや基本構成などを含む機能を紹介します。このトピックは、以下のセクションで構成されます。
igZoombar
は、スタンドアロン コントロールとしては機能しません。igDataChart
™ のような範囲対応コントロールに対する拡張機能として使用するように設計されています。これは他のコントロールとの組み合わせのみで機能します。igZoombar
は追加設定なしで、igDataChart
をサポートします。
以下の表で、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 によって自動的に作成されます。 |
以下の表は、このトピックで使用したコード例をまとめたものです。
JavaScript での igZoombar の追加: この例は、デフォルト構成の コントロールを追加し、それを JavaScript で igDataChart
にアタッチする方法を示します。
ASP.NET MVC での igZoombar の追加: この例は、デフォルト構成の コントロールを追加し、それを ASP.NET MVC で igDataChart
にアタッチする方法を示します。
以下のコードは、デフォルト構成の インスタンスを作成して、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"
});
以下のコードは、Ignite UI for MVC を使用して、ビュー内で igDataChart
と igZoombar
のインスタンスを作成します。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