Blazor 散布図 - エリア シリーズ

このトピックは、コード例を示して Blazor データ チャート コンポーネントで ScatterAreaSeries を使用する方法を説明します。このシリーズは、各ポイントに数値が割り当てられた X および Y データの三角測量に基づいて色付きの表面を描画します。このシリーズのタイプはヒート マップ、磁場の強さ、またはオフィスの Wi-Fi の強さを描画する場合などに便利です。ScatterAreaSeries は ScatterContourSeries と同様ですが、同じ値を持つデータポイントを接続する等線の置換に補完で色つきサーフェス エリアとしてデータを表します。

Blazor 散布図 - エリア シリーズの例

軸の要件

Blazor データ チャート コンポーネントにはさまざまな種類の軸がありますが、ScatterAreaSeries では NumericYAxis と NumericYAxis のみ使用できます。

データの要件

ScatterAreaSeries には以下のデータ要件があります。

• データソースはデータ項目の配列またはリストである必要があります。
• データソースはデータ項目を少なくとも 1 つ含む必要があります。含まない場合はチャートに散布シェイプ シリーズを描画しません。
• すべてのデータ項目には、XMemberPath、YMemberPath、そして ColorMemberPath プロパティにマップされる 3 つの数値データ列を含める必要があります。

上記データ要件を満たすデータソースとして SamplePolarData を使用できます。

モジュールの要件

散布エリア シリーズを作成するには、以下のモジュールが必要です。

DataChartCoreModule.Register(IgniteUIBlazor);
DataChartScatterCoreModule.Register(IgniteUIBlazor);
DataChartScatterModule.Register(IgniteUIBlazor);
DataChartInteractivityModule.Register(IgniteUIBlazor);
ScatterAreaSeriesModule.Register(IgniteUIBlazor);

コード例

このコードは、ScatterAreaSeries でデータ チャートのインスタンスを作成し、データソースにバインドする方法を説明します。

<DataChart Height="500px" Width="750px">
        <NumericXAxis Name="xAxis" />
        <NumericYAxis Name="yAxis" />
        <ScatterAreaSeries Name="series1"
            XAxisName="xAxis"
            YAxisName="yAxis"
            DataSource="@DataSource"
            XMemberPath="X"
            YMemberPath="Y"
            ColorMemberPath="Z" />
</DataChart>

カラー スケール

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

提供されている CustomPaletteColorScale クラスはほとんどの色付けのニーズを満たすはずですが、ColorScale 抽象クラスから継承して独自の色付けのロジックを指定することができます。

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

• Palette は、選択する、または補間する色のコレクションを設定します。
• InterpolationMode は、パレットから色を取得するメソッドを設定します。
• MaximumValue は、色を割り当てるための最大値を設定します。指定した値がこの値より大きい場合は透明になります。
• MinimumValue は、色を割り当てるための最小値を設定します。指定した値がこの値より小さい場合は透明になります。

その他のリソース

• 軸タイプ
• チャートの凡例
• シリーズ タイプ