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