xamChartをウィンドウに追加
xamChartをGridの4列目に設置します。データソースを設定しない場合は、デフォルトのサンプルデータが表示されます。また、ロード時はVisibilityをCollapsedと設定し、表示させません。
<!--XamChartを追加します-->
<igCA:XamChart Margin="5,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Top"
x:Name="XC1" Grid.Column="3" Grid.RowSpan="6" Visibility="Collapsed">
</igCA:XamChart>
チャートにデータを表示させるためには、Seriesと呼ばれる各データ点を格納するコレクションをxamChartに追加する必要があります。xamChart.SeriesはSeriesを格納するコレクションですので、こちらに毎月の元金返済額を格納するpSeriesと利息返済額を格納するiSeriesを追加します。
<igCA:XamChart.Series>
<!--元金返済額を格納します-->
<igCA:Series Name="pSeries" >
</igCA:Series>
<!--利息支払額を格納します。-->
<igCA:Series Name="iSeries" >
</igCA:Series>
</igCA:XamChart.Series>
それぞれのSeriesではチャートの種類の設定や判例のラベル、バインドするデータのマッピングを行うDataMappingプロパティを設定する必要があります。DataMappingプロパティではセミコロン（;）で指定するプロパティを区切ります。今回は積層型円柱、またpSeriesにはラベルを「月」、値を「返済元金」とし、iSeriesにはラベルを「月」、値を「支払利息」としてマッピングします。
<!--元金返済額を格納します-->
<igCA:Series Name="pSeries" Label="元金返済額" ChartType="StackedCylinder"
DataMapping="Label=月;Value=返済元金">
</igCA:Series>
<!--利息支払額を格納します。-->
<igCA:Series Name="iSeries" Label="利息支払額" ChartType="StackedCylinder"
DataMapping="Label=月;Value=支払利息">
</igCA:Series>
返済金額を計算し、チャートにバインド
［計算］ボタンが押下された場合は、calBtn_Clickイベントにおいて借入金額、利率、支払い回数に応じて月ごとの支払状況を表すDataTableを「Window1.xaml.cs」内で作成します。
private void calBtn_Click(object sender, RoutedEventArgs e)
{
int loanAmount = (Int32)this.loanBox.Value;
double iRate = (Double)this.interestBox.Value;
int months = (Int32)this.repPeriodBox.Value;
// 入力された値からデータのリストを作成します。
DataTable dt = this.generateList(loanAmount, iRate, months);
}
private DataTable generateList(int loanAmount, double iRate, int months)
{
DataTable dt = new DataTable("返済テーブル");
dt.Columns.Add("月", typeof(DateTime));
dt.Columns.Add("返済元金", typeof(Int32));
dt.Columns.Add("支払利息", typeof(Int32));
dt.Columns.Add("支払金額", typeof(Int32));
dt.Columns.Add("返済元金累積額", typeof(Int32));
dt.Columns.Add("支払利息累積額", typeof(Int32));
dt.Columns.Add("借入残高", typeof(Int32));
DataRow dr;
int paidLoan = 0;
int paidInterest = 0;
int payMonth = Convert.ToInt32(
Math.Round((double)loanAmount / months, MidpointRounding.AwayFromZero));
int irMonth = 0;
for (int i = 0; i < months; i++)
{
dr = dt.NewRow();
// 利息計算
irMonth = Convert.ToInt32(
Math.Round(loanAmount * (iRate / 100) * 30 / 365, MidpointRounding.AwayFromZero));
// 元本支払い総額
paidLoan += payMonth;
// 利息支払い総額
paidInterest += irMonth;
// 元本残金
loanAmount -= payMonth;
dr["月"] = DateTime.Today.AddMonths(i + 1);
dr["返済元金"] = payMonth;
dr["支払利息"] = irMonth;
dr["支払金額"] = irMonth + payMonth;
dr["返済元金累積額"] = paidLoan;
dr["支払利息累積額"] = paidInterest;
dr["借入残高"] = loanAmount;
dt.Rows.Add(dr);
}
return dt;
}
Seriesではデータ値を格納するDataPointsコレクションがあり、データをバインドしたり、XAML、あるいはコードで個別にデータ点を設定したりすることが可能です。先ほどのcalBtn_Clickイベントハンドラ―にて、DataTableを作成した後に各Seriesにバインドする処理を追加します。また、初期状態ではチャートが非表示となっているので、表示させます。
// それぞれのシリーズに DataTable をバインドします。 this.pSeries.DataSource = dt; this.iSeries.DataSource = dt; // チャートを表示します。 this.XC1.Visibility = Visibility.Visible;
実行すると次のような表示となります。
アニメーション効果を追加
XamChartではチャート要素を表示する際にアニメーション効果を追加できます。アニメーション効果を設定するためには各シリーズのAnimationプロパティを設定します。今回はすべてのチャート要素が一斉に2秒間でアニメーションするように設定します。
<igCA:Series.Animation>
<igCA:Animation Duration="00:00:02" Sequential="False" />
</igCA:Series.Animation>
テーマを設定
XamChartでは、あらかじめいくつかのテーマが準備されており、そちらを用いることによりスタイリングの手間を省くことができます。例として「RoyalVelvet」を適用します。
<igCA:XamChart Margin="5,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Top"
x:Name="XC1" Grid.Column="3" Grid.RowSpan="6" Visibility="Collapsed"
Theme="RoyaleVelvet" >
実行すると次のようになります。
まとめ
xamChartでは今までのチャートコンポーネントでは実現の難しかったアニメーション効果を簡単に追加することが可能です。また、この他にも軸、データ値の表示カスタマイズが多岐に渡っています。皆さんもぜひ表現力を高めたチャートの作成に挑戦してみてください。
