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データ チャートをご覧ください。
レッスンの目的
- Ignite UI for jQueryデータ チャートの追加
- チャートの軸、データ ソース、シリーズを設定
- 様々な種類のシリーズを設定
このレッスンで使用するコントロールの詳細については Ignite UIデータ チャートをご覧ください。
このレッスンを終えることで、Angularアプリケーションに様々な種類のチャートを設定したデータ チャートを表示します。
Ignite UI for jQueryを Angularで使用するための詳細については Ignite UI for jQuery 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つの主要なプロパティで構成されます。
- XおよびY軸
- データソース
- シリーズ
上記のほかに、高さ、幅、タイトルなどの重要なプロパティが存在します。
軸を設定するため、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>
アプリケーションを実行し、下にスクロールすると、ページ下部に下記のようなチャートが表示されていることを確認します。
結びに
Ignite UI for jQueryはWebアプリケーションを素早く構築するのに役立ちます。Angularに加え、Ignite UI for jQueryは、React、AngularJS、jQuery、ASP.NETで使用することができます。このレッスンではIgnite UI for jQueryに含まれているデータチャートをAngularアプリケーションで利用する方法について学習しました。