Ignite UI for JavaScript データ チャートを使用し、アプリケーションを素早く構築

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

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

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

• npm install
• npm start

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

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

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

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

import{PriceChartComponent} from './charts/pricechart.component';

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

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

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

手順 2: データ ソースの作成

チャートにバインドするデータは ローカル、あるいは REST サービスで提供される JavaScript 配列、JSON 配列となります。

複数のコンポーネントでデータ関数を使用できるように、Angular サービスでデータを返す関数を作成するのが理想的です。ただし、このレッスンでは、PriceComponent クラスに getData という関数が既に存在しています。この関数は、JSON オブジェクト配列を返します。app フォルダの pricechart.component.ts ファイルを開き、getData() 関数を確認します。以降のレッスンでは、REST サービスのデータを使用するグリッドを作成する方法について説明します。

手順 3: データの取得

getData () 関数から返されるデータを使用するには、Angular の ngOnInit () ライフ サイクル フック内で関数を呼び出し、返された値を PriceChartComponent プロパティに割り当てます。

詳細については Lifecycle Hooks をご覧ください。

app\charts フォルダー内の pricechart.component.ts ファイルを開き、ngOnInit() 関数を下記のように変更します

ngOnInit() {
  this.stocks = this.getData();
}

手順 4: 軸の設定

データグラフを作成するには、グラフのオプションを構成する必要があります。通常、グラフオプションは3つの主要なプロパティで構成されます。

1. X および Y 軸
2. データ ソース
3. シリーズ

上記のほかに、高さ、幅、タイトルなどの重要なプロパティが存在します。

軸を設定するため、pricechart.component.ts ファイルを開き、ngOnInit() 関数の後に下記の getPriceChartAxes() 関数を定義します。

getPriceChartAxes() {
  return [
  {
    name: "xAxis",
    type: "categoryX",
    label: "Date"
  },
  {
    name: "yAxis",
    type: "numericY",
    labelLocation: "outsideRight",
    labelExtent: 40
  }
  ];
}

手順 5: シリーズの設定

Ignite UI for JavaScript データ チャートは、任意の数のシリーズを持つことができますが、少なくとも 1 つは定義されていなければなりません。app\charts フォルダのデータ チャートにシリーズを追加するには、pricechart.component.ts ファイルを開き、getPriceChartAxes() 関数の直後に下記の getPriceChartSeries() 関数を追加します。

getPriceChartSeries() {
  return [
  {
    name: "stockSeries",
    type: "splineArea",
    title: "Price Data",
    isHighlightingEnabled: true,
    isTransitionInEnabled: true,
    xAxis: "xAxis",
    yAxis: "yAxis",
    valueMemberPath: "High",
    showTooltip: true,
    Outline: "#00AADE"
  }
  ];
}

上記のコードは下記を設定しています。

• シリーズ タイプの値は、スプライン領域シリーズを作成するために splineArea に設定されます。折れ線シリーズを作成する場合は、"line" と設定します。Ignite UI for JavaScript は、エリア、バー、および柱状を 25 種類以上のシリーズが用意されています。
• シリーズの valueMemberPath  には、グラフに表示するデータ配列からプロパティを設定する必要があります。ここでは、データ ソースから "Height" プロパティを設定し、データを表示します。
• データソースが割り当てられたときにアニメーションを有効にするには、 isTransitionInEnabled を true に設定します。

手順 6: チャートのオプションを設定

軸とシリーズの設定が完了しました。次にデータ チャートにおいて重要なオプションを設定します。

チャートのオプションについては Ignite UI データ チャート をご覧ください。

pricechart.component.ts ファイルを開き、getPriceChartSeries() 関数の直後に下記の getPriceChartOption() 関数を追加します。

getPriceChartOptions() {
  return {
    axes: this.getPriceChartAxes(),
    series: this.getPriceChartSeries(),
    windowResponse: "deferred",
    horizontalZoomable: true,
    width: "100%",
    height: this.desiredHeight,
    leftMargin: 0,
    rightMargin: 30,
    windowRectMinWidth: 0.05,
    syncChannel: "channel1",
    synchronizeVertically: false,
    synchronizeHorizontally: false
  };
}

上記のコードは下記を設定しています。

• syncChannel プロパティが設定されているため、グラフを Zoombar などの他の機能と同期させ、他のチャートとズームイン、ズームアウトを同期できます。
• windowResponse プロパティが "deferred" に設定されているため、チャート ビューの更新はユーザーの操作が完了するまで延期されます。もう1つの可能な値は "immediate" です。

手順 7: チャート オプションとデータ ソースを初期化

チャート オプションとデータ ソースを初期化するため、pricechart.component.ts ファイルの ngOnInit () 関数を下記のように変更します。

ngOnInit() {
  this.stocks = this.getData();
  this.desiredHeight = 0.22 * (window.screen.height) + "px";
  this.chartOptions = this.getPriceChartOptions();
}

手順 8: チャートの作成

チャートを作成するため、pricechart.component.html ファイルを開き、下記のマークアップを追加します。

<ig-data-chart [(options)]="chartOptions" [(dataSource)]="stocks" widgetId="pricechart"></ig-data-chart>

手順 9: アプリケーションで利用

アプリケーションで PriceChartComponent を使用するには、app フォルダで app.component.html ファイルを開き、<info-screen> 要素の直後と <indicatorchart> 要素の前にコードを追加します。

<pricechart></pricechart>

アプリケーションを実行し、下にスクロールすると、ページ下部に下記のようなチャートが表示されていることを確認します。