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:ColumnSeries ItemsSource="{Binding}" ValueMemberPath="Sales" XAxis="{Binding ElementName=XAxis}" YAxis="{Binding ElementName=YAxis}" ></ig:ColumnSeries> </ig:XamDataChart.Series> </ig:XamDataChart> </Grid> </Window>