Run Fast: Ignite UI for jQueryズームバーの使用

Ignite UI for jQueryは、データ チャートなどの範囲を指定できるコントロールをズームするためのズームバー コントロールを提供します。ズームバー を使用することで、サイズ変更できるズーム範囲ウィンドウを使用し内部ウィジェットを拡大します。ズームバーはチャートの範囲全体または特定のセクションのいずれかをズームできる水平スクロールバーが含まれています。また、ズームバーを、単独のコントロールとして動作します。

Ignite UI for jQueryで提供されている他の機能については Ignite UI 製品ページをご覧ください。

このレッスンでは、Ignite UI for jQueryズームバーをデータ チャートと共に使用するための設定方法を学習します。

このレッスンの最後には、データ チャートと同期したズームバーがAngularアプリケーションに追加されます。

Ignite UI for jQueryをAngularで使用するための詳細については Ignite UI for jQuery Angular ラッパー ページをご覧ください。

レッスンの目的

  1. ズームバーの追加
  2. データ チャートと連携するための設定を追加

このレッスンで使用するコントロールの詳細についてはIgnite UIズームバーをご覧ください。

プロジェクトのセット アップ

こちらをクリックするとレッスンに必要なプロジェクトをダウンロードできます。(こちらからは完成版をダウンロードできます。)

ダウンロードを終えた後、プロジェクトのフォルダーに移動し、下記のコマンドを実行します。

  • npm install
  • npm start

npm installコマンドを実行することで全ての依存する項目がインストールされます。npm startコマンドを実行することで Angularアプリケーションが実行されます。プロジェクトのセットアップが正しく行われている場合、下記のイメージのようなアプリケーションが実行されます。

Setting up project with Ignite Data Chart

手順 1: コンポーネントのインポートと宣言

Ignite UI for jQuery Angularラッパーを使用する場合、モジュールへのインポートと宣言が必要になります。例えば igZoombarコンポーネントをAngularアプリケーションで利用する場合は、アプリケーション モジュールで IgZoombarComponent をインポートし、宣言します。

Finance Appフォルダに移動し、次にappフォルダを開きます。app.module.tsファイルを開くと、既に存在しているインポートの記述の後に、下記のコードを追加します。

import { IgZoombarComponent } from 'igniteui-angular2';

必要なコンポーネントをインポート後、アプリケーション モジュールで宣言する必要があります。igZoombarComponentをAppModuleの宣言配列に追加します。app.module.tsの@NgModuleデコレーターを下記のように変更します。

@NgModule({
  imports: [BrowserModule, HttpModule],
  declarations: [AppComponent,
  IgDataChartComponent,
  InfoComponent,
  IndicatorChartComponent,
  VolumeChartComponent,
  IgGridComponent,
  GridComponent,
  PriceChartComponent,
  IgZoombarComponent,
  ],
  providers: [AppService],
  bootstrap: [AppComponent]
})

これでigZoombarComponentがAppModuleモジュールの宣言配列に追加されました。同様の作業を他のチュートリアルでも行います。

手順 2: ズームバーの追加

Ignite UI for jQueryズームバーを使用するには、ズームバー コンポーネントを追加する必要があります。app\charts フォルダの、volumechart.component.htmlファイルを開き、ig-zoombarをig-data-chartコントロールの後に追加します。

 <ig-zoombar [(options)]="zoombarOptions" widgetId="zoombar"></ig-zoombar>

手順 3: ズームバーのオプションを設定

ズームバーのオプションにおいて、チャートをズームバーにアタッチできます。設定を行うためには VolumeChartComponent クラスにプロパティを作成します。app\chartsフォルダに存在する volumechart.component.tsファイルを開き、コンストラクタのすぐ上に、以下のプロパティを追加します。

private zoombarOptions: IgZoombar;

手順 4: チャートをズームバーにアタッチ

チャートをズームバーにアタッチするには、Zoombarのtargetプロパティをチャート ウィジットのIDに設定する必要があります。app\chartsフォルダに存在する、volumechart.component.ts ファイルを開き、ngOnInit() 関数の this.chartOptionsの直後に下記のコードを追加します。

this.zoombarOptions = {
  target: "#volumechart"
};

上記のコードはvolumechartがデータチャートのIDを示しています。

手順 5: アプリケーションの実行

アプリケーションを実行し、下にスクロールすると、下記のイメージのようなズームバーを確認できます。

Step 5: Run the Application

チャートがズームバーの内部に複製されており、水平スクロールバーを使用することでグラフのズームを行うことができます。ズーム時のアニメーション効果がとても速く、スムーズであることが確認できます。データ点数に関係なくチャートが素早く表示されます。ご覧いただいたように Ignite UI for jQueryズームバーは特定のセクションの拡大、縮小をスムーズに行えます。

結びに

Ignite UI for jQueryは Web アプリケーションを素早く構築するのに役立ちます。Angular に加え、Ignite UI for jQueryは、React、AngularJS、jQuery、ASP.NET で使用することができます。このレッスンでは Ignite UI for jQueryに含まれているズームバーをAngularアプリケーションで利用する方法について学習しました。