バージョン

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

目的

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

このトピックの内容

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

概要

以下の手順は、XamFinancialChart コントロールをデータ コレクションにバインドする方法を示します。 XamFinancialChart は、IEnumerable インターフェイスを実装する任意のオブジェクトにバインドすることができます。ICollection および IEnumerable を実装するネスト コレクションがサポートされます。

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

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

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

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

  • ローソク足

  • 柱状

  • 折れ線

要件

以下は、XamFinancialChart コントロールを追加するための一般要件です。

以下の NuGet パッケージ参照をアプリケーションに追加します。

  • Infragistics.WPF.FinancialChart

NuGet フィードのセットアップと NuGet パッケージの追加の詳細については、NuGet フィード ドキュメントを参照してください。

XAML の場合:

xmlns:ig="http://schemas.infragistics.com/xaml"

C# の場合:

using Infragistics.Controls.Charts;

VB の場合:

Imports Infragistics.Controls.Charts

プレビュー

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

financialchart wpf multidata.png

概要

  1. データ モデルの定義

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

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

手順

データの定義

データをモデル化するためのクラスを作成します。

C# の場合:

public MainWindow()
{
    InitializeComponent();
    Data data = new Data();
    List<List<Price>> multiData = new List<List<Price>>();
    multiData.Add(data.AMZN);
    multiData.Add(data.GOOG);
    this.DataContext = multiData;
}

public class Price
{
    public DateTime Time { get; set; }
    public double Open { get; set; }
    public double High { get; set; }
    public double Low { get; set; }
    public double Close { get; set; }
    public double Volume { get; set; }
    public string Label { get { return this.Time.ToShortDateString(); } }
}

Visual Basic の場合:

    Class MainWindow

        Private Sub Window_Loaded(sender As Object, e As RoutedEventArgs)
            Dim data As Data = New Data
            Dim multiData As List(Of List(Of Price)) = New List(Of List(Of Price))
            multiData.Add(data.AMZN)
            multiData.Add(data.GOOG)
            Me.DataContext = multiData
        End Sub
    End Class

    Public Class Price
        Private _time As DateTime
        Public Property Time() As DateTime
            Get
                Return _time
            End Get
            Set(ByVal value As DateTime)
                _time = value
            End Set
        End Property

        Private _open As Double
        Public Property Open As Double
            Get
                Return _open
            End Get
            Set(ByVal value As Double)
                _open = value
            End Set
        End Property

        Private _high As Double
        Public Property High As Double
            Get
                Return _high
            End Get
            Set(ByVal value As Double)
                _high = value
            End Set
        End Property

        Private _low As Double
        Public Property Low As Double
            Get
                Return _low
            End Get
            Set(ByVal value As Double)
                _low = value
            End Set
        End Property

        Private _close As Double
        Public Property Close As Double
            Get
                Return _close
            End Get
            Set(ByVal value As Double)
                _close = value
            End Set
        End Property

        Private _volume As Double
        Public Property Volume As Double
            Get
                Return _volume
            End Get
            Set(ByVal value As Double)
                _volume = value
            End Set
        End Property

        Public ReadOnly Property Label As String
            Get
                Return Me.Time.ToShortDateString()
            End Get
        End Property
    End Class

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

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

XAML の場合:

<Window.DataContext>
    <local:MultiData />
</Window.DataContext>
<Grid>
    <ig:XamFinancialChart ItemsSource="{Binding}" />
</Grid>

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

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

関連コンテンツ

トピック

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

トピック 目的

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

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

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

上記のコード例で使用されるデータ。