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

始めに

Ignite UI for JavaScript / HTML 5  and ASP.NET を使用し、複雑な業務要件を解決するアプリケーションを構築できます。また、このライブラリーには HTML5、jQuery、Angular、React、または ASP.NET MVC プラットフォームで使用できるチャート コンポーネントが含まれています。

Ignite UI for JavaScript が提供する様々なチャート:

  • データ チャート: データを X 軸、Y 軸に横棒、折れ線、エリアなどの様々な形式で表示
  • 円チャート: データを円で表示し、それぞれが合計データの割合を表すセクタに分割
  • ドーナ ツチャート: 2 種類以上のデータを円状に表示

全体で 約 50 種類のチャートが提供されています。詳細については Ignite UI データ チャートをご覧ください。

レッスンの目的

  1. Ignite UI for JavaScript データ チャートの追加
  2. チャートの軸、データ ソース、シリーズを設定
  3. 様々な種類のシリーズを設定

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

このレッスンを終えることで、Angular アプリケーションに様々な種類のチャートを設定したデータ チャートを表示します。

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

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

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

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

  • npm install
  • npm start

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

Setting up project with Ignite Data Chart

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

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

  • X 軸のタイプと Y 軸タイプの組み合わせは、財務、散布、またはカテゴリ価格シリーズを表示することに適しています。その他の可能な値は、カテゴリ、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"
  }
  ];
}

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

  • シリーズ タイプの値は、スプライン領域シリーズを作成するために 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>

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

Use Data Chart in Application

結びに

Ignite UI for JavaScritpt は Web アプリケーションを素早く構築するのに役立ちます。Angular に加え、Ignite UI for JavaScript は、React、AngularJS、jQuery、ASP.NET で使用することができます。このレッスンでは Ignite UI for JavaScript に含まれているデータチャートを Angular アプリケーションで利用する方法について学習しました。