バージョン

ギャラリー - 高密度散布シリーズ

トピックの概要

目的

このトピックは、 XamDataChart™ コントロールでシリーズの HighDensityScatterSeries タイプを使用する情報を提供します。

前提条件

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

トピック 目的

このトピックでは、 XamDataChart コントロールの追加方法について説明します。

このトピックは、 ScatterSeriesXamDataChart に追加する方法について説明します。

ギャラリー - 高密度散布シリーズ

概要

XamDataChart コントロールの HighDensityScatterSeries シリーズを使用すると、数百から数百万のデータ ポイントから広がる散布図データを非常に短いローディング時間でバインドして表示できます。相当数のデータ ポイントがあるため、シリーズではフルサイズのマーカーに対して散布データを小さな点として表示し、領域にはデータ ポイントの集合を表す高い色密度を使用した大半のデータを表示します。

プレビュー

以下のスクリーンショットは、500,000 データ ポイントにバインドされる XamDataChart コントロール内の HighDensityScatterSeries シリーズのプレビューです。明るい赤色のエリアは、データ ポイントが最も集中しているエリアです。

High Density Scatter Series 1 1.png

データ要件

XamDataChart コントロールの散布シリーズの他のタイプと同様、 HighDensityScatterSeries には、データ バインディングのための ItemsSource プロパティがあります。このプロパティは、 IEnumerable インターフェイスを実装するオブジェクトにバインドできます。

さらに、項目ソース内の各項目には、デカルト座標システムでデータ ポイントを配置するための X 値と Y 値のために 2 つのデータ列があり、これらのデータ列をマッピングするために XMemberPathYMemberPath の Path プロパティを使用します。

データ バインディング

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

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

IEnumerable

項目ソースを取得または設定します。

string

X 値が割り当てられた項目上のどこに位置するのかを決定するには ItemsSource プロパティを使用します。

string

Y 値が割り当てられた項目上のどこに位置するのかを決定するには ItemsSource プロパティを使用します。

熱色スケール

熱色スケールは、シリーズ内のカラー パターンを決定するオプションの機能です。以下の表は、カラー スケールを決定するために使用するプロパティをまとめたものです。

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

double

カラー スケールの最小端を表す double 値を定義します。

double

カラー スケールの最大端を表す double 値を定義します。

Color

カラー スケールの下端で使用するポイント密度カラーを定義します。

Color

カラー スケールの上端で使用するポイント密度カラーを定義します。

表の次にあるスクリーンショットは、 HighDensityScatterSeriesHeatMinimumColorHeatMaximumColor のプロパティを持つ XamDataChart が以下の設定後どのように見えるかを示しています。

プロパティ

Green

Orange

High Density Scatter Series 1 2.png

以下のコードはこの例を実装します。

XAML の場合:

<ig:XamDataChart.Series>
   <ig:HighDensityScatterSeries
      XAxis="{Binding ElementName=numericXAxis}"
      YAxis="{Binding ElementName=numericYAxis}"
      ItemsSource="{Binding}"
      XMemberPath="XValue"
      YMemberPath="YValue"
      HeatMaximumColor="Orange"
      HeatMinimumColor="Green">
   </ig:HighDensityScatterSeries>
</ig:XamDataChart.Series>

パフォーマンス

概要

XamDataChartHighDensityScatterSeries シリーズはパフォーマンスが最適化されています。XamDataChart の パフォーマンスを最適化するための数万のプロパティおよびメソッドがあります。

シリーズの解像度

HighDensityScatterSeries シリーズの Resolution プロパティは、シリーズがどの程度積極的に表示データを統合するかを決定します。値が大きいと、より積極的にデータが統合され、シリーズのパフォーマンスが大きくなります。より低い値を使用していると表示解像度が強化され、それに応じてパフォーマンスも下がります。

表の下のスクリーンショットは、 HighDensityScatterSeries 設定の以下の Resolution プロパティで XamDataChart が描画する方法を示します。

プロパティ 値 (1 – 10)

10

High Density Scatter Series 1 3.png

以下はこの例における実装コードです。

XAML の場合:

<ig:XamDataChart.Series>
   <ig:HighDensityScatterSeries
      XAxis="{Binding ElementName=numericXAxis}"
      YAxis="{Binding ElementName=numericYAxis}"
      ItemsSource="{Binding}"
      XMemberPath="XValue"
      YMemberPath="YValue"
      Resolution="10">
   </ig:HighDensityScatterSeries>
</ig:XamDataChart.Series>

プログレッシブ ローディング

XamDataChart コントロールは、XamDataChart をロードする間中の UI の応答性を保つようデータをばらばらに読み込む HighDensityScatterSeries シリーズを段階的に描画します。デフォルトで、 ProgressiveLoad プロパティは True に設定されています。HighDensityScatterSeries シリーズは、 XamDataChart のレンダリング中にローディング状態を表示できる 2 通りの方法を提供します。

  • ローディング状態を表示できる ProgressiveLoadStatusChanged イベントをリッスンします。

  • ProgressiveStatus プロパティは、値が 0 から 100 まで (完全なロードは 100) のプログレッシブ ロード シリーズの状態を表します。このプロパティは、プログレスバーなどのローディング状態を示すコントロールにバインドします。

この表の下のスクリーン ショットは、 HighDensityScatterSeries シリーズの構成された ProgressiveLoadStatusChanged イベントでどのように XamDataChart を描画するかを示します。

プロパティ

True

OnSeriesProgressiveLoadStatusChanged

High Density Scatter Series 1 4.png

以下は、先行例を実装するために使用するコードです。

XAML の場合:

<ig:XamDataChart.Series>
   <ig:HighDensityScatterSeries
      XAxis="{Binding ElementName=numericXAxis}"
      YAxis="{Binding ElementName=numericYAxis}"
      ItemsSource="{Binding}"
      XMemberPath="XValue"
      YMemberPath="YValue"
      Resolution="3"
      ProgressiveLoad="True"
      ProgressiveLoadStatusChanged="OnSeriesProgressiveLoadStatusChanged">
   </ig:HighDensityScatterSeries>
</ig:XamDataChart.Series>

C# の場合:

private void OnSeriesProgressiveLoadStatusChanged(object sender,
                                   ProgressiveLoadStatusEventArgs e)
{
   this.SeriesLoadingProgressBar.Value = e.CurrentStatus;
   if (e.CurrentStatus == 100)
   {
      SeriesLoadingPanel.Visibility = Visibility.Collapsed;
   }
}

Visual Basic の場合:

Private Sub OnSeriesProgressiveLoadStatusChanged(ByVal sender As Object, ByVal e As ProgressiveLoadStatusEventArgs)   Me.SeriesLoadingProgressBar.Value = e.CurrentStatus   If (e.CurrentStatus = 100) Then      SeriesLoadingPanel.Visibility = Visibility.Collapsed   End IfEnd Sub

マウス オーバーのサポート

HighDensityScatterSeries シリーズの MouseOverEnabled プロパティは、MouseOver イベントが発生するかどうかを指定します。このプロパティのデフォルト設定は False です。このシリーズのマウス オーバーのサポートは、メモリとパフォーマンスについて言うと高い経費を要する場合があります。この値を False に設定することの主なデメリットは、ツールチップを描画できないことです。

この表の下のスクリーンショットは、 HighDensityScatterSeries シリーズの MouseOverEnabled プロパティを以下のように設定したカスタム ツールチップのある XamDataChart の描画を示しています。

プロパティ

True

High Density Scatter Series 1 5.png

以下は、先行例を実装するために使用するコードです。

XAML の場合:

<ig:XamDataChart.Series>
   <ig:HighDensityScatterSeries
      XAxis="{Binding ElementName=numericXAxis}"
      YAxis="{Binding ElementName=numericYAxis}"
      ItemsSource="{Binding}"
      XMemberPath="XValue"
      YMemberPath="YValue"
      MouseOverEnabled="True"   >
      <ig:HighDensityScatterSeries.ToolTip>
         <StackPanel>
            <StackPanel Orientation="Horizontal">
               <TextBlock Text="X: " />
               <TextBlock Text="{Binding Item.XValue, StringFormat='#,##0.000'}" />
            </StackPanel>
            <StackPanel Orientation="Horizontal">
               <TextBlock Text="Y: " />
               <TextBlock Text="{Binding Item.YValue, StringFormat='#,##0.000'}" />
            </StackPanel>
         </StackPanel>
      </ig:HighDensityScatterSeries.ToolTip>
   </ig:HighDensityScatterSeries>
</ig:XamDataChart.Series>

ブルート フォース モード

HighDensityScatterSeries シリーズの UseBruteForce プロパティによって、シリーズの描画方法が決まります。このプロパティを True に設定すると、内部データ構造を描画用にビルドせず、すべてのデータ ポイントを毎回描画します。これにより、最初のロード時間が短くなりメモリの使用も少なくなります。しかし、データを通したその後のナビゲートが顕著に遅くなります。

この表の下のスクリーンショットは、 HighDensityScatterSeries シリーズの UseBruteForce プロパティを以下のように設定した XamDataChart の描画を示しています。

プロパティ

True

High Density Scatter Series 1 6.png

以下は、先行例を実装するために使用するコードです。

XAML の場合:

<ig:XamDataChart.Series>
   <ig:HighDensityScatterSeries
       XAxis="{Binding ElementName=numericXAxis}"
       YAxis="{Binding ElementName=numericYAxis}"
       ItemsSource="{Binding}"
       XMemberPath="XValue"
       YMemberPath="YValue"
       ProgressiveLoadStatusChanged="OnSeriesProgressiveLoadStatusChanged"
       UseBruteForce="True">
   </ig:HighDensityScatterSeries>
</ig:XamDataChart.Series>

ポイント サイズ

HighDensityScatterSeries シリーズの PointExtent プロパティは、高密度の散布シリーズのポイントを描画するために使用する最小ポイントサイズを上げます。ポイントサイズは、シリーズのパフォーマンスに直接影響します。PointExtent プロパティの値が大きいとパフォーマンスは下がります。

この表の下のスクリーンショットは、 HighDensityScatterSeries シリーズの構成された PointExtent プロパティでどのように XamDataChart を描画するかを示します。

プロパティ

7

High Density Scatter Series 1 7.png

以下は、先行例を実装するために使用するコードです。

XAML の場合:

<ig:XamDataChart.Series>
   <ig:HighDensityScatterSeries
      XAxis="{Binding ElementName=numericXAxis}"
      YAxis="{Binding ElementName=numericYAxis}"
      ItemsSource="{Binding}"
      XMemberPath="XValue"
      YMemberPath="YValue"
      PointExtent="7">
   </ig:HighDensityScatterSeries>
</ig:XamDataChart.Series>

関連コンテンツ

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

トピック 目的

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

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