React 散布図 - バブル シリーズ
このトピックは、コード例を示して React データ チャート コンポーネントで散布 IgrBubbleSeries 使用する方法を説明します。このシリーズ
データをプロットするためにデカルト座標系 (x, y) を使用する散布図 - マーカーシリーズ に似ています。このシリーズはスケールされたバブルの集まりとしてデータを表示します。それぞれがその位置を決定する一対の数値X / Y値とそのサイズを決定する 3 番目の値を持ちます。
React 散布図 - バブル シリーズの例
軸の要件
React データ チャート コンポーネントにはさまざまな種類の軸がありますが、IgrBubbleSeries では IgrNumericYAxis と IgrNumericYAxis のみ使用できます。
データの要件
IgrBubbleSeries には以下のデータ要件があります。
- データソースはデータ項目の配列またはリストである必要があります。
- データソースはデータ項目を少なくとも 1 つ含む必要があります。含まない場合はチャートに散布シェイプ シリーズを描画しません。
- すべてのデータ項目には、
xMemberPath、yMemberPath、radiusMemberPathプロパティにマップされる 3 つの数値データ列を含める必要があります。
上記データ要件を満たすデータソースとして SampleScatterStats を使用できます。
public dataSource: any[] = SampleScatterStats.getCountries();
モジュールの要件
散布バブル シリーズを作成するには、以下のモジュールが必要です。
// axis' modules:
import { IgrNumericYAxis } from 'igniteui-react-charts';
import { IgrNumericXAxis } from 'igniteui-react-charts';
// series' modules:
import { IgrBubbleSeries } from 'igniteui-react-charts';
import { IgrSizeScale } from 'igniteui-react-charts';
import { IgrValueBrushScale } from 'igniteui-react-charts';
import { IgrCustomPaletteBrushScale } from 'igniteui-react-charts';
import { BrushSelectionMode } from 'igniteui-react-charts';
import { MarkerType } from 'igniteui-react-charts';
// data chart's modules:
import { IgrDataChart } from 'igniteui-react-charts';
import { IgrDataChartCoreModule } from 'igniteui-react-charts';
import { IgrDataChartScatterCoreModule } from 'igniteui-react-charts';
import { IgrDataChartScatterModule } from 'igniteui-react-charts';
// registering data chart's modules:
IgrDataChartCoreModule.register();
IgrDataChartScatterCoreModule.register();
IgrDataChartScatterModule.register();
コード例
このコードは、IgrBubbleSeries でデータ チャートのインスタンスを作成し、データソースにバインドする方法を説明します。
<IgrDataChart
dataSource={this.state.dataSource}
width="500px"
height="500px">
{/* axes */}
<IgrNumericXAxis name="xAxis" isLogarithmic="true" />
<IgrNumericYAxis name="yAxis" isLogarithmic="true"/>
{/* series: */}
<IgrBubbleSeries
name="series1"
xAxisName="xAxis"
yAxisName="yAxis"
xMemberPath="population"
yMemberPath="gdpTotal"
radiusMemberPath="gdpPerCapita" />
</IgrDataChart>
const xAxis = new IgrNumericXAxis({ name: "xAxis" });
const yAxis = new IgrNumericYAxis({ name: "yAxis" });
const series1 = new IgrBubbleSeries({ name: "series1" });
series1.xAxisName = "xAxis";
series1.yAxisName = "yAxis";
series1.xMemberPath = "population";
series1.yMemberPath = "gdpTotal";
series1.radiusMemberPath = "gdpPerCapita";
this.chart = new IgrDataChart({ name: "chart" });
this.chart.dataSource = SampleShapeData.create();
this.chart.axes.add(yAxis);
this.chart.axes.add(xAxis);
this.chart.series.add(series1);
バブル形状
IgrBubbleSeries の外観は、Markers プロパティの使用やバブルの形状を定義済みの形状の 1 つに変更してカスタマイズすることができます。次に例を示します。
<IgrBubbleSeries
name="series1"
markerType="Square"
markerBrush="White"
markerOutline="Blue"
/>
const series1 = new IgrBubbleSeries({ name: "series1" });
series1.markerType = MarkerType.Square;
series1.markerBrush = "White";
series1.markerOutline = "Blue";
バブル半径スケール
radiusScale は、バブルのサイズを決定する BubbleSeries のオプション機能です。この機能は、IgrSizeScale オブジェクトを介して実装できます。半径スケールが設定されると、最小のバブルは minimumValue と等しくなり、最大のバブルは maximumValue と等しくなり、すべての残りのバブルはそれに応じて拡大/縮小されます。サイズ スケールはリニアと対数のどちらでもかまいません。半径スケールが設定されていない場合、各バブルのサイズは radiusMemberPath プロパティにマップされたデータ列の値と等しくなります。
const sizeScale = new IgrSizeScale({});
sizeScale.minimumValue = 10;
sizeScale.maximumValue = 60;
const series1 = new IgrBubbleSeries({ name: "series1" });
series1.radiusMemberPath = "GdpPerCapita";
series1.radiusScale = sizeScale;
バブル塗りつぶしスケール
fillScale は、単一の IgrBubbleSeries 内のカラーパターンを決定するオプション機能です。このシリーズは、以下の塗りつぶしスケールをサポートします。
IgrValueBrushScaleは、fillMemberPathプロパティにマップされたデータ列の値のセットを使用して、バブルの補間ブラシを決定します。またユーザー指定のminimumValueやmaximumValueを持つこともできます。このスケールで範囲が設定されると、範囲外になる値を持つバブルがbrushesコレクションからブラシを取得せずに、色も付けられません。IgrCustomPaletteBrushScaleは、brushesコレクションからブラシを選択するバブル マーカーのインデックスを使用します。brushSelectionModeプロパティがSelectenumerable値に設定されている場合、バブルは順番に色付けされ、Interpolateに設定されます。ブラシは、バブルのインデックスとコレクション内のブラシの数に基づいて補間されます。
const brushScale = new IgrValueBrushScale({});
brushScale.brushes = ["#ffffff", "#b56ffc"];
brushScale.minimumValue = 10;
brushScale.maximumValue = 60;
// or
const brushScale = new IgrCustomPaletteBrushScale({});
brushScale.brushes = ["#ffffff", "#b56ffc"];
brushScale.brushSelectionMode = BrushSelectionMode.Interpolate;
const series1 = new IgrBubbleSeries({ name: "series1" });
series1.fillMemberPath = "GdpPerCapita";
series1.fillScale = brushScale;