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

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

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

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

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

Ignite UI for JavaScript を Angular で使用するための詳細については Ignite UI for JavaScript 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 JavaScript 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 JavaScript ズームバーを使用するには、ズームバー コンポーネントを追加する必要があります。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 JavaScript ズームバーは特定のセクションの拡大、縮小をスムーズに行えます。

結びに

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