バージョン

複数のデータ セットへのバインド

目的

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

このトピックの内容

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

概要

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

igFinancialChart は、データ ソースの項目の数が異なる場合、Time モードで XAxis に複数のデータ ソースをプロットできません。XAxis が Time モードの場合、コントロールは複数のデータ ソースの項目も整列しません。結果として、データ ソースに対応する項目がない場合、null 項目を挿入してデータ項目を整列する必要があります。

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

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

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

  • 棒

  • ローソク足

  • 柱状

  • 折れ線

プレビュー

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

financialchart jquery multidata.png

概要

  1. データ モデルの定義

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

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

手順

データの定義

JavaScript の場合:

function getMultiData() {
    var data = [];
    data.push(PriceData.AMZN());
    data.push(PriceData.GOOG());
    data.push(PriceData.MSFT());
    data.push(PriceData.TGT());
    data.push(PriceData.TSLA());

    return data;
}

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

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

HTML の場合:

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

JavaScript の場合:

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

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

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

関連コンテンツ

トピック

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

トピック 目的

このトピックでは、igFinancialChart コントロールをデータにバインドする概要を提供します。

このトピックは、igFinancialChart コントロールを単一のデータ セットにバインドする方法を紹介します。

このトピックは、igFinancialChart コントロールをライブ データにバインドする方法を紹介します。

オンラインで表示: GitHub