Run Fast: Ignite UI データチャートで大量データを表示

Ignite UI データ チャートは、膨大な数のデータポイントをスムーズにレンダリングし、他社と比較しても大量のデータ レンダリングにおいては最速のパフォーマンスを実現します。

このレッスンでは、Angular アプリケーションにおいて大量のデータセットを使用するチャートを構成します。大量のデータを使用した場合においても、チャートが素早く表示され、拡大とと縮小が滑らかに行われます。

Ignite UI for JavaScript を Angular で使用するための詳細については Ignite UI for JavaScript Angular コンポーネント ページをご覧ください。

レッスンの目的

  1. REST API を使用できるようにデータ チャートを構成
  2. 大量データを使用するデータ チャートを作成

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

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

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

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

  • npm install
  • npm start

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

Setting up project with Ignite Grid

現時点ではアプリケーションの一つ目のチャートは、小さなデータ セットで動作するように構成されています。これは、10 行のデータをレンダリングし、スムーズにズームインやズームアウトを行うことができます。Ignite UI データ チャートは、大小様々なデータで動作するように実装されています。そのため、10 点、1000 点といったデータ点数の違いで大きくパフォーマンスが異なるということがありません。

実際に確認するため、REST API  から返される大規模なデータ セットを使用するようにチャートを変更します。

手順 1: コンポーネントでデータを取得

この時点でチャートは、ngOnInit() 関数のコードの最初の行で構成されている小さなデータ セットで動作するように構成されています。PriceChartComponent で大きなデータセットを取得するには、コンポーネントで AppService を使用する必要があります。pricechart.component.ts ファイルを開き、ngOnInit() 関数の最初の行を削除し、代わりに appService getStcoks() メソッドを呼び出します。下記のようにコードの最初の行だけを置き換え、ngOnInit() のその他のコードをそのまま機能さます。

ngOnInit() {
  this._appService.getStocks()
  .subscribe(
    stocks => this.stocks = stocks,
    error => this.errorMessage = error);
  this.desiredHeight = 0.22 * (window.screen.height) + "px";
  this.chartOptions = this.getPriceChartOptions();
}

結果、PriceChartComponent で AppService からデータをフェッチしています。AppService getStocks() メソッドは、200 以上のデータ ポイントを持つ REST API  からデータをフェッチします。これでチャートがより大きなデータ セットを使用するようにグラフを再構成しました。

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

アプリケーションを実行し、Ignite UI データ チャートがより大きなデータを素早く、スムーズに表示できていることを確認します。

チャートには 200 点以上のデータ ポイントが表示されています。

Step 2: Run the Application - Render more than 200 data points

更に、チャートをズーム アウトした場合においてもアプリケーションのパフォーマンスが変わらないことを確認できます。

Step 2: Run the Application - Zooming to particular data points

結びに

Ignite UI for JavaScritpt は Web アプリケーションを素早く構築するのに役立ちます。Angular に加え、Ignite UI for JavaScript は、React、AngularJS、jQuery、ASP.NET で使用することができます。データの量にかかわらず、ズーム イン、ズーム アウトや様々な機能を利用できます。