柱状シリーズ

このトピックは、コード例を示して、 ColumnSeries を XamDataChart™ コントロールで使用する方法を説明します。

概要

トピックは以下のとおりです。

概要
シリーズプレビュー
シリーズの提案
データ要件
データ描画の規則
コード例
- データバインディング
- 柱状シリーズの角
関連トピック

概要

柱状シリーズは、カテゴリシリーズのグループに属し、チャートの下から上へデータポイント値に向かって延びる四角形のコレクションを使用して描画されます。柱状シリーズは時間毎のデータの変化や複数の項目を比較する場合に用いられます。値は Y 軸 (NumericYAxis) に表され、カテゴリは X 軸 (CategoryXAxis または CategoryDateTimeXAxis) に表示されます。柱状シリーズは、棒シリーズと同じデータプロットの概念を採用していますが、データポイントは、垂直線 (Y 軸) でなく水平線 (X 軸) に沿って延びます。言い換えると、 ColumnSeries は BarSeries のように描画されますが、反時計周りに 90 度回転されます。シリーズの他のタイプと軸のタイプを含んだより概念的情報は、カテゴリシリーズとチャート軸トピックを参照してください。

シリーズプレビュー

図 1 および図 2 は、XamDataChart コントロールでプロットされる際に、 ColumnSeries と BarSeries がどのように表示されるのかを示します。

図 1: ColumnSeries シリーズタイプの実装例

図 2: BarSeries シリーズタイプの実装例

シリーズの提案

XamDataChart コントロールは無数の各種シリーズタイプのプロットをサポートしますが、同様のシリーズタイプで ColumnSeries を使用することをお勧めします。 ColumnSeries で推奨されるシリーズのタイプ、および複数のシリーズタイプのプロット方法に関する情報は、複数シリーズトピックを参照してください。

データ要件

XamDataChart コントロールによって固有のデータモデルにチャートを簡単にバインドすることができますが、そのシリーズが必要とするデータの適切な量とタイプを必ず提供するようにしてください。使用しているシリーズのタイプに基づいた最小要件をデータが満たさないと、エラーが発生します。データシリーズの要件についての詳細は、シリーズ要件とカテゴリシリーズを参照してください。

以下は、ColumnSeries タイプのデータ要件のリストです。

データモデルには少なくとも 1 つの数値プロパティを含む必要があります。
データモデルにはラベルのためのオプションの文字列または日時プロパティを含むことができます。
データソースに少なくとも 1 つのデータ項目を含む必要があります。

データ描画の規則

ColumnSeries は以下の規則を使用してデータを描画します。

データマッピングの ValueMemberPath プロパティとして指定されるデータ列内の各行は個別の垂直棒で描かれます。
x 軸上のデータマッピングの Label プロパティとして指定される文字列または日時のフィールドはカテゴリラベルとして使用されます。Label トークンが指定されない場合、デフォルトのラベルが使用されます。
カテゴリラベルは x 軸上に描かれます。データ値は y 軸上に描かれます。
描画する時、同じ X 軸 ( 複数シリーズのトピックを参照) を共有する ColumnSeries タイプの複数シリーズは、各クラスターがデータポイントを表すクラスターで描画されます。XamDataChart コントロールの Series コレクションの最初のシリーズは、クラスターの左に柱状として描画されます。それぞれの連続シリーズは以前のシリーズの右に描画されます。ただし、シリーズで X 軸を共有しない場合、レイヤーで描画され、それぞれの連続するシリーズは、1 つ前のものの前面で描画されます。
ColumnSeries タイプは、Y 軸の ReferenceValue プロパティを使用して特定の参照値の下側または上側にその列をプロットすることをサポートします。

コード例

データバインディング

以下のコード・スニペットは、 ColumnSeries オブジェクトをカテゴリデータのサンプル ( エネルギーデータのサンプルリソースからダウンロード可能) にバインドする方法を示します。ColumnSeries のデータ要件に関する情報は、このトピックのデータ要件セクションを参照してください。

XAML の場合:

xmlns:local="clr-namespace:Infragistics.Models;assembly=YourAppName"
...
<ig:XamDataChart x:Name="DataChart" >
    <ig:XamDataChart.Resources>
        <ResourceDictionary>
			<local:EnergyDataSource x:Key="data" />
		</ResourceDictionary>
    </ig:XamDataChart.Resources>
    <ig:XamDataChart.Axes>
        <ig:NumericYAxis x:Name="YAxis"  />
        <ig:CategoryXAxis x:Name="XAxis" ItemsSource="{StaticResource data}"
                       Label="Country" />
    </ig:XamDataChart.Axes>
    <ig:XamDataChart.Series>
        <ig:ColumnSeries ItemsSource="{StaticResource data}" ValueMemberPath="Coal" Title="Coal"
                       XAxis="{Binding ElementName=XAxis}"
                       YAxis="{Binding ElementName=YAxis}">
        </ig:ColumnSeries>
        <ig:ColumnSeries ItemsSource="{StaticResource data}" ValueMemberPath="Hydro" Title="Hydro"
                       XAxis="{Binding ElementName=XAxis}"
                       YAxis="{Binding ElementName=YAxis}">
        </ig:ColumnSeries>
        <ig:ColumnSeries ItemsSource="{StaticResource data}" ValueMemberPath="Nuclear" Title="Nuclear"
                       XAxis="{Binding ElementName=XAxis}"
                       YAxis="{Binding ElementName=YAxis}">
        </ig:ColumnSeries>
        <ig:ColumnSeries ItemsSource="{StaticResource data}" ValueMemberPath="Gas" Title="Gas"
                       XAxis="{Binding ElementName=XAxis}"
                       YAxis="{Binding ElementName=YAxis}">
        </ig:ColumnSeries>
        <ig:ColumnSeries ItemsSource="{StaticResource data}" ValueMemberPath="Oil" Title="Oil"
                       XAxis="{Binding ElementName=XAxis}"
                       YAxis="{Binding ElementName=YAxis}">
        </ig:ColumnSeries>
    </ig:XamDataChart.Series>
</ig:XamDataChart>

C# の場合:

var data = new EnergyDataSource();
var yAxis = new NumericYAxis();
var xAxis = new CategoryXAxis();
xAxis.ItemsSource = data;
xAxis.Label = "{Country}";

var series = new ColumnSeries();
series.ItemsSource = data;
series.ValueMemberPath = "Coal";
series.Title = "Coal";
series.XAxis = xAxis;
series.YAxis = yAxis;
var chart = new XamDataChart();
chart.Axes.Add(xAxis);
chart.Axes.Add(yAxis);
chart.Series.Add(series);