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

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

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

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

• npm install
• npm start

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

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

Ignite UI for jQuery 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 jQueryデータ チャートは、任意の数のシリーズを持つことができますが、少なくとも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 jQueryは、エリア、バー、および柱状を 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>

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