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

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

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

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

• npm install
• npm start

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

現時点ではアプリケーションの一つ目のチャートは、小さなデータ セットで動作するように構成されています。これは、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データ チャートがより大きなデータを素早く、スムーズに表示できていることを確認します。

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

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