バージョン

XAML コードでチャートを作成

トピックの概要

目的

このトピックでは、XAML コードで XamDataChart コントロールを作成する詳細な方法を紹介します。

前提条件

本トピックの理解を深めるために、以下のトピックを参照することをお勧めします。

トピック 目的

このトピックでは、 XamDataChart コントロールの概要を説明します。

このトピックでは、Ultimate UI for Xamarin コントロールと使用するアプリケーション プロジェクトを作成する方法を説明します。

このトピックでは、XamDataChart コントロールを使用して作業を開始する方法に関する情報を提供します。

このトピックでは、XamDataChart コントロールで利用可能な散布シリーズに関する情報を提供します。

概要

プレビュー

以下は XAML コードでチャート コントロールを作成する結果のプレビューです。

DataChart Creating Chart In Code Behind 1.png

チャート要件

チャート コントロールは シリーズと呼ばれ、さまざまなデータ視覚化をサポートします。このシリーズ オブジェクトは広範なデータ ソースを可視化できます。チャート コントロールにサポートされるシリーズの一覧は、 シリーズ タイプ トピックを参照してください。各シリーズ タイプは一定の要件を満たす (データ列の数およびタイプなど) データおよびデータをサポートされる軸によって、そのデータがプロットできます。各シリーズの要件については、 シリーズ要件トピックを参照してください。

このトピックは AreaSeries、2 つの軸 (CategoryXAxis および NumericYAxis)、 サンプル エネルギー データを使用します。

アプリケーションの作成

  1. Visual Studio 2015+ またはそれ以降のバージョンで Xamarin.Forms アプリケーション プロジェクトを作成し、名前を SampleApp に設定します。

  1. 以下の名前空間宣言を 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 >

データ ソースの作成

  1. サンプル データ コードを サンプル エネルギー データ リソースからコピーして SampleApp プロジェクトに追加します。

  1. カテゴリ サンプル データのインスタンスを作成します。

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>

関連コンテンツ

トピック

このトピックの追加情報については、以下のトピックも合わせてご参照ください。

トピック 目的

このトピックでは、 XamDataChart コントロールの概要を説明します。

このトピックでは、XamDataChart コントロールを使用して作業を開始する方法に関する情報を提供します。

このトピックでは、XamDataChart コントロールで利用可能な散布シリーズに関する情報を提供します。