バージョン

XamSparkline をページに追加

トピックの概要

目的

このトピックでは、コード例を示して、 XamSparkline™ コントロールをページに追加する方法を説明します。グリッド セル内に XamSparkline を表示するには、「スパークライン列」のトピックを参照してください。

前提条件

以下の表に、このトピックを理解するための前提条件として求められる素材をリストします。

トピック 目的

このトピックは、 XamSparkline コントロールの概要、その利点、およびサポートされるチャート タイプを提供します。

このトピックは、 XamSparkline コントロールを構成するあらゆる方法の概要について説明します。構成の詳細情報へのリンク (別のトピックで参照可能) も記載されています。

本トピックの内容

このトピックには次のセクションがあります。

スパークラインをページへ追加 - 概念的概要

概要

XamSparkline は、グリッド セルやテキスト付きのインラインなど、非常に小さなスペースに挿入するという概念で設計されていますが、スタンドアロン コントロールとして Web ページなどに表示する機能を備えています。

スパークラインのデフォルト設定では、Line タイプの色はグレーで、ラインの太さが 1 ピクセルのラインが表示されます。ラインの色や太さはカスタマイズ可能です。

幅と高さの指定は任意ですが、それらを指定しない限り、スパークラインは常駐するコンテナーのスペース全体を占めます。コンテナーまたはブラウザー ウィンドウのサイズを変更すると、そのコンテナーでホストされているスパークラインのサイズが自動的に変更されます。

要件

以下の表は、 XamSparkline コントロールを追加する場合の要件をまとめています。

アセンブリ参照

詳細については、NuGet パッケージで参照を追加を参照してください。

名前空間

XAML の場合:

xmlns:ig="clr-namespace:Infragistics.XamarinForms.Controls.Charts;assembly=Infragistics.XF.Sparkline"

データ

数値を含む一次元データ。

Note
注:

Win/Loss 型のスパークラインの場合、最も大きな値と最も小さな値の 2 つの値だけがチャートに使用されます。データ セットの他の値は無視されますが、データ ポイントの数は考慮されます。つまり、データが 5 つの正の値と 2 つの負の値で構成されている場合、WinLoss はゼロの上に 5 つのバー (すべて同じサイズで最高値に一致する) およびゼロの下に 2 つの負のバー (すべて同じサイズで最低値に一致する) を表示します。

概要

以下はプロセスの概念的概要です。

  1. データ モデルの参照

  2. XamSparkline コントロールを追加

スパークラインをページへ追加 - 概念的概要

説明

次の手順は、スパークラインの Line タイプを使用して、スパークラインをページに追加する方法を示しています。

この場合、データ ポイントの数値および最初のラベルと最後のラベルを表示する文字列フィールドを入力したクラス データ モデルを作成する必要があります。.

プレビュー

以下は最終結果のプレビューです。

Adding Sparkline to your page 1.png

前提条件

手順を完了するには、以下が必要です:

  • Xamarin.Forms プロジェクト

概要

以下はプロセスの概念的概要です。

  1. データ モデルの定義

  2. データの作成

  3. データ モデルの参照

  4. XamSparkline コントロールを追加

  5. 結果の検証

手順

以下のステップでは、スパークラインをページに追加する方法を示します。

  1. データ モデルを定義します。

クラスの定義を作成して スパークラインのデータ モデルを示します。スパークラインをレンダリングするために XamSparkline は少なくとも 2 つの数値フィールドを必要とします.

C# の場合:

public class TestDataItem
    {
        private string _label;
        public string Label
        {
            get { return _label; }
            set { _label = value; }
        }
        private double?_value;
        public double?Value
        {
            get { return _value; }
            set { _value = value; }
        }
    }
  1. データを提供します。

次のコードは数値と文字列値を含むレコードのリストを作成します。表は数値フィールドを使用してデータをプロットし、文字列は水平方向 (X) の軸で最初と最後のラベルを表示するために使用できます。数値はラベルとして表示することもできます。

C# の場合:

public class TestData : ObservableCollection<TestDataItem>
    {
        public TestData()
        {
            Add(new TestDataItem { Label = "Label1", Value = 3 });
            Add(new TestDataItem { Label = "Label2", Value = 1 });
            Add(new TestDataItem { Label = "Label3", Value = 4 });
            Add(new TestDataItem { Label = "Label4", Value = 2 });
            Add(new TestDataItem { Label = "Label5", Value = 7 });
            Add(new TestDataItem { Label = "Label6", Value = -3 });
            Add(new TestDataItem { Label = "Label7", Value = 4 });
            Add(new TestDataItem { Label = "Label8", Value = 1 });
            Add(new TestDataItem { Label = "Label9", Value = 3 });
        }
    }
  1. データ モデルの参照

名前空間を追加します。

XAML の場合:

xmlns:local="clr-namespace:SparklineDemo"

アプリケーションをこのポイントでビルド (コンパイル) してデータ モデルを参照します。

次のコードは名前空間を追加し、ローカル クラスを参照しています。リソースでキー (x:Key) を指定すると XamSparkline を静的リソースとして基になるデータにバインドします。

XAML の場合:

<UserControl.Resources>
    <local:TestData x:Key="testdata"/>
</UserControl.Resources>
  1. XamSparkline コントロールを追加します。

以下のコードは、表示に必要となる最小限のコードとプロパティ設定で XamSparkline コントロールを追加することを示します。

XAML の場合:

<ig:XamSparkline
    ItemsSource="{Binding Source={StaticResource testdata}}"
    Name="XamSparkline1"
    ValueMemberPath="Value"/>

C# の場合:

this.XamSparkline1.ItemsSource = new TestData();
this.XamSparkline1.DisplayType = Infragistics.Controls.Charts.SparklineDisplayType.Line;
this.XamSparkline1.ValueMemberPath = "Value";
  1. 結果を検証します。

結果を確認するために、プロジェクトをビルドおよび実行します。手順を正しく実装した場合、スパークラインは上記のプレビュー セクションで示したように表示されるはずです。

関連内容

トピック

以下のトピックでは、このトピックに関連する情報を提供しています。

トピック 目的

このトピックは、 XamSparkline コントロールの主なプロパティを説明します。