ライブデータへのバインド

このトピックは、igFinancialChart コントロールにデータをバインドする方法を示します。各セクションの最後にサンプルの全コードを提供します。

このトピックは、以下のセクションで構成されます。

概要

以下の手順は、igFinancialChart コントロールをライブデータにバインドする方法を示します。 igFinancialChart は JavaScript 配列にバインドできます。ネストコレクションもサポートされます。

ChartType プロパティは、表示するシリーズタイプを選択できます。

サポートされるシリーズタイプ:

サンプルデータにバインドした igFinancialChart コントロール:

データの定義

JavaScript の場合:

function getData() {
    var data = PriceData.AMZN();
	return data;
}

igFinancialChart コントロールのインスタンスの追加

igFinancialChart インスタンスを追加し、データにバインドします。

HTML の場合:

<div id="chart" style="width:800px;height:600px"></div>

JavaScript の場合:

$(function () {
    var data = getData();
    $("#chart").igFinancialChart({
    	dataSource: data
    });
});

最後に、サービスから取得される新しいデータとデータソースを更新します。

データソースを更新した後、以下の関数を呼び出すと、チャートに通知します。

結果の確認 (オプション)

結果を検証するために、アプリケーションを実行します。igFinancialChart コントロールのデータコレクションへのバインドが成功すれば、結果のチャートは上記のようになります。

このトピックの追加情報については、以下のトピックも合わせてご参照ください。

トピック	目的
データバインド	このトピックでは、igFinancialChart コントロールをデータにバインドする概要を提供します。
データの単一のセットにバインド	このトピックは、igFinancialChart コントロールを単一のデータセットにバインドする方法を紹介します。
データの複数のセットにバインド	このトピックは、igFinancialChart コントロールを複数のデータセットにバインドする方法を紹介します。

オンラインで表示: GitHub