バージョン

散布エリア シリーズの使用

目的

このトピックでは、XamDataChart™ コントロールで ScatterAreaSeries 要素を使用する方法を提供します。

このトピックの内容

このトピックは、以下のセクションで構成されます。

散布エリア シリーズ

概要

XamDataChart コントロールでは、ScatterAreaSeries が各ポイントに割り当てられた数値を使って、X および Y データの三角形分割に基づいて、色付きのサーフェスを描画します。

このシリーズのタイプはヒート マップ、磁場の強さ、またはオフィスの WIFI の強さを描画する場合などに便利です。ScatterAreaSeriesScatterContourSeries と同様ですが、同じ値を持つデータ ポイントを接続する等高線の代わりに補間で色つきサーフェス エリアとしてデータを表します。

プレビュー

以下は、3D サーフェイス データをプロットする ScatterAreaSeries を持つ XamDataChart コントロールのプレビューです。Z 軸は、サーフェイスでの色変更として描画されます。より低い Z 値は青色で、より高い値は赤色になります。

DataChart Using Scatter Area Series 1.png

データ要件

XamDataChart コントロールのシリーズの他のタイプと同様、ScatterAreaSeries には、データ バインディングのための ItemsSource プロパティがあります。このプロパティは、ListCollectionQueueStack など IEnumerable インターフェイスを実装するオブジェクトにバインドできます。また、このオブジェクトで各項目にポイント位置 (X および Y) を保存する 2 つのデータ列が必要です。これらのデータ列は、XMemberPath および YMemberPath プロパティにマップされます。データにも各ポイントの値を保存するデータ列が必要です。この値は ScatterAreaSeries でサーフェイスの色を設定するために使用されます。この値列は、ColorMemberPath プロパティにマップされます。

ScatterAreaSeries は、三角測量が TrianglesSource プロパティに設定されていない場合、ItemsSource の項目で定義済みのデータ三角測量を自動的に実行します。ただし、三角測量の計算は非常に時間のかかるプロセスであるため、このプロパティのために TriangulationSource を指定すると、ランタイム パフォーマンスがよくなります。特にデータ項目が多数ある場合には顕著です。

Note
注:

三角測量データの作成、保存、読み込みのプロセスに関する詳細は、データの三角測量トピックを参照してください。

データ バインディング

以下の表に、データ バインドに使用される ScatterAreaSeries の必須プロパティをまとめています。

プロパティ名 プロパティ タイプ 説明

IEnumerable

TrianglesSource プロパティに提供する三角測量データがない場合三角測量を実行するための項目のソースを取得または設定します。

string

ItemsSource の各項目の X 位置を含むプロパティの名前。

string

ItemsSource の各項目の Y 位置を含むプロパティの名前。

string

ColorScale プロパティに設定されて、カラー スケールによって色への変換が可能な数値を含む各データ項目のプロパティの名前。

以下の表に、データ バインドに使用される ScatterAreaSeries のオプションのプロパティをまとめています。

プロパティ名 プロパティ タイプ 説明

IEnumerable

三角測量データのソースを取得または設定します。TriangulationSource オブジェクトの Triangles をこのプロパティに設定すると、ランタイム パフォーマンスとシリーズの描画の両方が改善します。

string

各三角形に対して ItemsSource の最初の頂点のインデックスを含む、TrianglesSource 項目のプロパティ名。このプロパティを設定することは義務ではありません。カスタムの三角測量ロジックが提供されない場合はデフォルトで取得されます。

string

各三角形に対して ItemsSource の第 2 の頂点のインデックスを含む、TrianglesSource 項目のプロパティ名。このプロパティの設定は必須ではありません。カスタムの三角測量ロジックが提供されない場合はデフォルトで取得されます。

string

各三角形に対して ItemsSource の第 3 の頂点のインデックスを含む、TrianglesSource 項目のプロパティ名。このプロパティの設定は必須ではありません。カスタムの三角測量ロジックが提供されない場合はデフォルトで取得されます。

カラー スケール

ScatterAreaSeriesColorScale プロパティを使用して、ポイントの値を解決し、シリーズの面を塗りつぶします。色は、ピクセル単位の三角ラスタライザーを三角測量データに適用することによって、面の図形の周りをなめらかに補間します。面の描画がピクセル単位であるため、カラー スケールはブラシではなく色を使用します。

提供される CustomPaletteColorScale クラスはほとんどのカラーリングのニーズを満たすはずですが、ColorScale ベースのクラスはカスタムのカラリング ロジックのアプリケーションによって継承できます。

以下の表は ScatterAreaSeries の面のカラ―リングに影響する CustomPaletteColorScale プロパティをリストします。

プロパティ名 プロパティ タイプ 説明

ObservableCollection<Color>

補間するために選択する色のコレクションを取得または設定します。

Palette から色を取得するメソッドを取得または設定します。

double

色を割り当てるための最大値。指定した値がこの値より大きい場合は透明になります。

double

色を割り当てるための最小値。指定した値がこの値より小さい場合は透明になります。

以下のコードは、以上のスクリーンショットを作成するために ScatterAreaSeries を 3D サーフェイス データにバインドする方法を紹介します。使用される 3D サーフェイス データはここです。

XAML の場合:

<ig:XamDataChart>
    <ig:XamDataChart.Axes>
        <ig:NumericXAxis x:Name="xAxis"/>
        <ig:NumericYAxis x:Name="yAxis"/>
    </ig:XamDataChart.Axes>
    <ig:XamDataChart.Series>
        <ig:ScatterAreaSeries XAxis="{Binding ElementName=xAxis}"
                              YAxis="{Binding ElementName=yAxis}"
                              XMemberPath="X"
                              YMemberPath="Y"
                              ColorMemberPath="Z">
			<ig:ScatterAreaSeries.ItemsSource>
                <model:CosXPlusCosY "/>
            </ig:ScatterAreaSeries.ItemsSource>
            <ig:ScatterAreaSeries.ColorScale>
                <ig:CustomPaletteColorScale InterpolationMode="InterpolateRGB">
                    <ig:CustomPaletteColorScale.Palette>
                        <Color>Blue</Color>
                        <Color>Green</Color>
                        <Color>Yellow</Color>
                        <Color>Red</Color>
                    </ig:CustomPaletteColorScale.Palette>
                </ig:CustomPaletteColorScale>
            </ig:ScatterAreaSeries.ColorScale>
        </ig:ScatterAreaSeries>
    </ig:XamDataChart.Series>
</ig:XamDataChart>

Visual Basic の場合:

' ScatterAreaSeries requires numeric X and Y axis
Dim xAxis = New NumericXAxis()
Dim yAxis = New NumericYAxis()
Me.dataChart.Axes.Add(xAxis)
Me.dataChart.Axes.Add(yAxis)

' create and set data binding to the ScatterAreaSeries
Dim series = New ScatterAreaSeries()
series.ItemsSource = New CosXPlusCosY()
series.XMemberPath = "X"
series.YMemberPath = "Y"
series.ColorMemberPath = "Z"
series.XAxis = xAxis
series.YAxis = yAxis

' set a color scale
Dim colorScale = New CustomPaletteColorScale()
colorScale.InterpolationMode = ColorScaleInterpolationMode.InterpolateRGB
colorScale.Palette.Add(Colors.Blue)
colorScale.Palette.Add(Colors.Green)
colorScale.Palette.Add(Colors.Yellow)
colorScale.Palette.Add(Colors.Red)
series.ColorScale = colorScale

' add the ScatterAreaSeries to the XamDataChart
Me.dataChart.Series.Add(series)

C# の場合:

// ScatterAreaSeries requires numeric X and Y axis
var xAxis = new NumericXAxis();
var yAxis = new NumericYAxis();
this.dataChart.Axes.Add(xAxis);
this.dataChart.Axes.Add(yAxis);

// create and set data binding to the ScatterAreaSeries
var series = new ScatterAreaSeries();
series.ItemsSource = new CosXPlusCosY();
series.XMemberPath = "X";
series.YMemberPath = "Y";
series.ColorMemberPath = "Z";
series.XAxis = xAxis;
series.YAxis = yAxis;

// set a color scale
var colorScale = new CustomPaletteColorScale();
colorScale.InterpolationMode = ColorScaleInterpolationMode.InterpolateRGB;
colorScale.Palette.Add(Colors.Blue);
colorScale.Palette.Add(Colors.Green);
colorScale.Palette.Add(Colors.Yellow);
colorScale.Palette.Add(Colors.Red);
series.ColorScale = colorScale;

// add the ScatterAreaSeries to the XamDataChart
this.dataChart.Series.Add(series);

関連コンテンツ

このトピックに関連する追加情報については、以下のトピックを参照してください。

トピック 目的

このトピックでは、コントロールをアプリケーション ページに追加する方法を示します。

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

このトピックは三角測量についての情報を提供します。