このトピックでは、XAML コードで XamDataChart コントロールを作成する詳細な方法を紹介します。
本トピックの理解を深めるために、以下のトピックを参照することをお勧めします。
このトピックは、以下のセクションで構成されます。
以下は XAML コードでチャート コントロールを作成する結果のプレビューです。
チャート コントロールは シリーズと呼ばれ、さまざまなデータ視覚化をサポートします。このシリーズ オブジェクトは広範なデータ ソースを可視化できます。チャート コントロールにサポートされるシリーズの一覧は、 シリーズ タイプ トピックを参照してください。各シリーズ タイプは一定の要件を満たす (データ列の数およびタイプなど) データおよびデータをサポートされる軸によって、そのデータがプロットできます。各シリーズの要件については、 シリーズ要件トピックを参照してください。
このトピックは AreaSeries、2 つの軸 (CategoryXAxis および NumericYAxis)、 サンプル エネルギー データを使用します。
Visual Studio 2015+ またはそれ以降のバージョンで Xamarin.Forms アプリケーション プロジェクトを作成し、名前を SampleApp に設定します。
以下の名前空間宣言を XAML ファイルに追加します:
XAML の場合:
xmlns:ig="clr-namespace:Infragistics.XamarinForms.Controls.Charts;assembly=Infragistics.XF.Charts" xmlns:local="clr-namespace:SampleApp;assembly=SampleApp"
「NuGet パッケージで参照を追加」を参照してください。
1 つのシリーズおよび 2 つの軸の設定を持つチャート コントロールのインスタンスを作成します。
XAML の場合:
<ig:XamDataChart x:Name="Chart" > <ig:XamDataChart.Axes> <!-- 軸をここに追加する --> </ig:XamDataChart.Axes> <ig:XamDataChart.Series> <!-- シリーズをここに追加する --> </ig:XamDataChart.Series> </ig:XamDataChart >
サンプル データ コードを サンプル エネルギー データ リソースからコピーして SampleApp プロジェクトに追加します。
カテゴリ サンプル データのインスタンスを作成します。
XAML の場合:
<ig:XamDataChart.Resources> <ResourceDictionary> <local:EnergyDataSource x:Key="data"/> </ResourceDictionary> </ig:XamDataChart.Resources>
ラベルを表示するためのカテゴリ 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="{x:Reference xAxis}" YAxis="{x:Reference yAxis}"> </ig:AreaSeries> </ig:XamDataChart.Series>
このトピックの追加情報については、以下のトピックも合わせてご参照ください。