Blazor 散布図 - バブル シリーズ

このトピックは、コード例を示して Blazor データ チャート コンポーネントで散布 BubbleSeries 使用する方法を説明します。このシリーズ データをプロットするためにデカルト座標系 (x, y) を使用する散布図 - マーカーシリーズ に似ています。このシリーズはスケールされたバブルの集まりとしてデータを表示します。それぞれがその位置を決定する一対の数値X / Y値とそのサイズを決定する 3 番目の値を持ちます。

Blazor 散布図 - バブル シリーズの例

軸の要件

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

データの要件

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

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

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

モジュールの要件

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

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

コード例

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

<DataChart Height="500px" Width="750px">
    <NumericXAxis Name="xAxis" />
    <NumericYAxis Name="yAxis" />
    <BubbleSeries Name="series1"
        XAxisName="xAxis"
        YAxisName="yAxis"
        DataSource="@DataSource"
        XMemberPath="Population"
        YMemberPath="GdpTotal"
        RadiusMemberPath="GdpPerCapita" />
</DataChart>

バブル形状

BubbleSeries の外観は、Markers プロパティの使用やバブルの形状を定義済みの形状の 1 つに変更してカスタマイズすることができます。次に例を示します。

バブル半径スケール

RadiusScale は、バブルのサイズを決定する BubbleSeries のオプション機能です。この機能は、SizeScale オブジェクトを介して実装できます。半径スケールが設定されると、最小のバブルは MinimumValue と等しくなり、最大のバブルは MaximumValue と等しくなり、すべての残りのバブルはそれに応じて拡大/縮小されます。サイズ スケールはリニアと対数のどちらでもかまいません。半径スケールが設定されていない場合、各バブルのサイズは RadiusMemberPath プロパティにマップされたデータ列の値と等しくなります。

バブル塗りつぶしスケール

FillScale は、単一の BubbleSeries 内のカラーパターンを決定するオプション機能です。このシリーズは、以下の塗りつぶしスケールをサポートします。

  • ValueBrushScale は、FillMemberPath プロパティにマップされたデータ列の値のセットを使用して、バブルの補間ブラシを決定します。またユーザー指定の MinimumValue や MaximumValue を持つこともできます。このスケールで範囲が設定されると、範囲外になる値を持つバブルが Brushes コレクションからブラシを取得せずに、色も付けられません。
  • CustomPaletteBrushScale は、Brushes コレクションからブラシを選択するバブル マーカーのインデックスを使用します。BrushSelectionMode プロパティが Select enumerable値に設定されている場合、バブルは順番に色付けされ、Interpolate に設定されます。ブラシは、バブルのインデックスとコレクション内のブラシの数に基づいて補間されます。

その他のリソース