このトピックでは、XAML コードで XamDataChart コントロールを作成する詳細な方法を紹介します。
本トピックの理解を深めるために、以下のトピックを参照することをお勧めします。
このトピックは、以下のセクションで構成されます。
以下は XAML コードでチャート コントロールを作成する結果のプレビューです。
以下の表では、 XamDataChart の作成の要件を簡単に説明します。
チャート コントロールは シリーズと呼ばれ、さまざまなデータ視覚化をサポートします。このシリーズ オブジェクトは広範なデータ ソースを可視化できます。チャート コントロールにサポートされるシリーズの一覧は、 シリーズ タイプ トピックを参照してください。各シリーズ タイプは一定の要件を満たす (データ列の数およびタイプなど) データおよびデータをサポートされる軸によって、そのデータがプロットできます。各シリーズの要件については、 シリーズ要件トピックを参照してください。
このトピックは AreaSeries、2 つの軸 (CategoryXAxis および NumericYAxis)、 サンプル エネルギー データを使用します。
Visual Studio 2013-2017 またはそれ以降のバージョンで WPF アプリケーション プロジェクトを作成し、名前を SampleApp に設定します。
以下の名前空間宣言を XAML ファイルに追加します:
XAML の場合:
xmlns:ig="http://schemas.infragistics.com/xaml" xmlns:local="clr-namespace:SampleApp"
以下の NuGet パッケージを SampleApp プロジェクトに追加します。
Infragistics.WPF.Charts
NuGet フィードのセットアップと NuGet パッケージの追加の詳細については、NuGet フィード ドキュメントを参照してください。
サンプル データ コードを サンプル エネルギー データ リソースからコピーして SampleApp プロジェクトに追加します。
カテゴリ サンプル データのインスタンスを作成します。
XAML の場合:
<Grid>
<Grid.Resources>
<local:EnergyDataSource x:Key="data"/>
</Grid.Resources>
</Grid>
1 つのシリーズおよび 2 つの軸の設定を持つチャート コントロールのインスタンスを作成します。
XAML の場合:
<ig:XamDataChart x:Name="Chart" >
<ig:XamDataChart.Axes>
<!-- 軸をここに追加する -->
</ig:XamDataChart.Axes>
<ig:XamDataChart.Series>
<!-- シリーズをここに追加する -->
</ig:XamDataChart.Series>
</ig:XamDataChart >
ラベルを表示するためのカテゴリ X 軸を作成し、値を表示するための数値 Y 軸を作成します。
XAML の場合:
<ig:XamDataChart.Axes>
<ig:CategoryXAxis x:Name="xAxis" ItemsSource="{StaticResource data}" Label="{}{Country}" />
<ig:NumericYAxis x:Name="yAxis" />
</ig:XamDataChart.Axes>
サンプル データ ソースへのバインディングおよびデータ マッピングが設定されるシリーズのインスタンスを作成します。また、シリーズに前のセクションで作成した 2 つの軸の設定が必要です。
XAML の場合:
<ig:XamDataChart.Series>
<ig:AreaSeries ItemsSource="{StaticResource data}"
ValueMemberPath="Coal"
XAxis="{Binding ElementName=xAxis}"
YAxis="{Binding ElementName=yAxis}">
</ig:AreaSeries>
</ig:XamDataChart.Series>
このトピックの追加情報については、以下のトピックも合わせてご参照ください。