XamDataChart 折れ線グラフの最小限サンプル

XamDataChart の折れ線グラフ表示するための、必要最小限のコードのサンプルです。

データモデル

public class SalesInfo
{
    public int Id { get; set; }
    public string Year { get; set; }
    public decimal Sales { get; set; }
}

ダミーデータの作成

namespace Sample
{
    /// <summary>
    /// MainWindow.xaml の相互作用ロジック
    /// </summary>
    public partial class MainWindow : Window
    {
        //ダミーデータを保持するコレクション
        public ObservableCollection<SalesInfo> SalesInfos { get; set; }
            = new ObservableCollection<SalesInfo>();

        public MainWindow()
        {
            InitializeComponent();

            //ダミーデータを生成する。
            this.SalesInfos.Add(
                new SalesInfo
                {
                    Year = "2011",
                    Sales = 124597,
                }
            );
            this.SalesInfos.Add(
                new SalesInfo
                {
                    Year = "2012",
                    Sales = 245416,
                }
            );
            this.SalesInfos.Add(
                new SalesInfo
                {
                    Year = "2013",
                    Sales = 345786,
                }
            );
            this.SalesInfos.Add(
                new SalesInfo
                {
                    Year = "2014",
                    Sales = 365816,
                }
            );
            this.SalesInfos.Add(
                new SalesInfo
                {
                    Year = "2015",
                    Sales = 451687,
                }
            );
            this.SalesInfos.Add(
                new SalesInfo
                {
                    Year = "2016",
                    Sales = 548465,
                }
            );
            this.SalesInfos.Add(
                new SalesInfo
                {
                    Year = "2017",
                    Sales = 646879,
                }
            );
            this.SalesInfos.Add(
                new SalesInfo
                {
                    Year = "2018",
                    Sales = 875466,
                }
            );

            //DataContext にバインドデータを設定
            this.DataContext = this.SalesInfos;

            //コードビハインドで XamDataGrid の DataSource プロパティにデータをバインドする場合
            //this.YAxis.ItemsSource= this.SalesInfos;
            //this.BarSeries.DataSource = this.SalesInfos;
        }
    }
}

XamDataChart の宣言 (XAML)

<Window 
		...
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <!-- DataContext 経由でデータをバインドする。 -->
        <ig:XamDataChart x:Name="xamDataChart">
            <ig:XamDataChart.Axes>
                <ig:CategoryXAxis  x:Name="XAxis" ItemsSource="{Binding}" Label="{}{Year}" ></ig:CategoryXAxis>
                <ig:NumericYAxis  x:Name="YAxis"  ></ig:NumericYAxis>
            </ig:XamDataChart.Axes>
            <ig:XamDataChart.Series>
                <ig:LineSeries ItemsSource="{Binding}"
                               ValueMemberPath="Sales" 
                                XAxis="{Binding ElementName=XAxis}" YAxis="{Binding ElementName=YAxis}"
                               ></ig:LineSeries>
            </ig:XamDataChart.Series>
        </ig:XamDataChart>
    </Grid>
</Window>