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

始めに

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

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

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

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

レッスンの目的

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

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

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

Ignite UI for jQueryを Angularで使用するための詳細については Ignite UI for jQuery Angular ラッパー ページをご覧ください。

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

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

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

  • npm install
  • npm start

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

Setting up project with Ignite Data Chart

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

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

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

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

Use Data Chart in Application

結びに

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