バージョン

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

目的

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

このトピックの内容

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

概要

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

サポートされるチャート タイプ

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

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

  • ローソク足

  • 柱状

  • 折れ線

プレビュー

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

financialchart jquery livedata.png

概要

  1. データ モデルの定義

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

  3. (オプション) 結果の検証

手順

データの定義

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