Ignite UI for JavaScriptデータチャートを使用して、アプリケーションを迅速に作成する

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

こちらをクリックして、このレッスン用のスタータープロジェクトをダウンロードしてください。（完成版のプロジェクトは、こちらをクリックしてダウンロードすることもできます。）

プロジェクトをダウンロードしたら、ディレクトリに移動して、以下のコマンドを実行してください：

• npm install
• npm start

npm installコマンドを実行するとすべての依存関係がインストールされます。npm startコマンドを実行するとAngularアプリケーションが実行されます。プロジェクトのセットアップが正しければ、以下のように実行中のAngularアプリケーションが表示されます。アプリケーションの実行中にエラーが発生した場合は、停止してから再度npm startコマンドを実行してください。

ステップ1 コンポーネントのインポートと宣言

Ignite UI for JavaScript Angularコンポーネントを操作するには、モジュール内でそれらをインポートして宣言する必要があります。たとえば、Angularアプリケーションでigデータチャートコンポーネントを使用するには、アプリケーションモジュール内でIgDataChartComponentをインポートして宣言します。

プロジェクトで、Finance Appフォルダー、次にappフォルダーに移動します。app.module.tsファイルを開くと、igDataChartComponentが追加されていることがわかります。既存のインポート文の後に、以下のインポート文を追加します。

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

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

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

これで、AppModuleモジュールのdeclaration配列にPriceChartComponentが追加されました。追加されたその他のコンポーネントや、providersなどのその他のプロパティについては、以降のレッスンで説明します。

ステップ2 データソースを作成

データチャートにバインドするデータは、JavaScript配列またはJSONオブジェクト配列にすることができ、ローカルにあるものでも、RESTサービスから提供されるものでもかまいません。

理想的には、複数のコンポーネントでデータを使用できるように、Angularサービス内でデータを返す関数を作成する必要があります。このレッスンでは、PriceChartComponentクラスに、JSONオブジェクト配列を返すgetData関数がすでに用意されています。app\chartsフォルダーで、pricechart.component.tsファイルを開き、getData()関数を見つけます。今後のレッスンでは、RESTサービスのデータを使用するグリッドの作成方法を学びます。

ステップ3 データを取得

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

Angularのライフサイクルフックについては、詳細をご覧ください。

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
  }
  ];
}

上記のリストでは：

• X軸の種類とY軸の種類は、金融、散布図、またはカテゴリ価格系列を表示するために使用できます。その他の指定可能な値には、category、numericAngle、categoryDateTimeX、categoryAngleなどがあります。
• Y軸の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"
  }
  ];
}

上記のリストでは：

• 系列のtype値はsplineAreaに設定され、スプライン領域系列を作成します。線系列を作成する場合は、typeの値を「line」に設定します。IgniteUIは、データチャート用に、領域、棒、列などを含む25種類以上の系列タイプを提供します。
• 系列のvalueMemberPathには、チャートに表示するデータ配列のプロパティを設定する必要があります。ここでは、データチャート系列で描画するために、データソースの「Height」プロパティを設定しています。
• 系列のisTransitionInEnabled値はtrueに設定されており、データソースが割り当てられたときにアニメーションを有効にします。

手順6チャートオプションを構成

軸と系列の構成が完了しました。次に、データチャートのその他の重要なプロパティをすべて設定するために、チャートオプションを構成します。

チャートプロパティの詳細については、Ignite UI for JavaScriptデータチャートをご覧ください。

データチャートを構成するには、app\chartsフォルダーの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などの他のコントロールの機能と連携するために、アプリケーション内の他のチャートと同期できるように設定されています。同じチャネルで同期されたチャートは、1つのズームバーを使用して拡大・縮小できます。
• チャートのwindowResponseプロパティは「deferred」に設定されており、ユーザー操作が完了するまでチャートビューの更新が延期されます。値を「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>

アプリケーションに移動し、下にスクロールすると、ページの下部に以下のようにチャートが追加されていることがわかります：

まとめ

Ignite UI for JavaScriptを使用すると、Webアプリケーションを迅速に作成できます。Angularに加えて、Ignite UI for JavaScriptは、React、AngularJS、jQuery、ASP.NET MVCでも使用できます。