Angular 散布ポイントチャート

Ignite UI for Angular 散布ポイントチャートは、デカルト (x, y) 座標系を使用してデータをプロットする散布図のグループに属します。このシリーズは、マーカーコレクションとして描画し、それぞれにデカルト座標システムの位置を決定する 1 組の数値 X/Y 値を持ちます。

IgxScatterSeriesComponent は、不均等な間隔またはデータのクラスターに注意を促します。予測結果の収集データの標準偏差を強調表示し、科学データや統計データをプロットするためによく使用されます。IgxScatterSeriesComponent はデータを X-Axis および Y-Axis で時系列に管理およびプロットします (バインドする前はデータが時系列でない場合も)。

Angular 散布ポイントチャートの例

軸の要件

Angular データチャートコンポーネントはさまざまなタイプの軸を提供しますが、IgxScatterSeriesComponent で使用できるのは以下のタイプの軸のみです。

データの要件

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

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

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

public dataSource: any[] = SampleScatterStats.getCountries();

モジュールの要件

IgxScatterSeriesComponent を作成するには、以下のモジュールが必要です。モジュールはアプリケーションのエントリポイントに登録する必要があります。

DataChartCoreModule
DataChartScatterCoreModule
DataChartScatterModule
DataChartInteractivityModule
NumberAbbreviatorModule

// axis' modules:
import { IgxNumericYAxis } from 'igniteui-angular-charts';
import { IgxNumericXAxis } from 'igniteui-angular-charts';
// series' modules:
import { IgxScatterSeries } 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 { /* ... */ }

コード例

このコードは、IgxScatterSeriesComponent を使用して Ignite UI for Angular データチャートのインスタンスを作成し、それをデータソースにバインドする方法を示します。

 <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-scatter-series
        name="series1"
        xAxisName="xAxis"
        yAxisName="yAxis"
        xMemberPath="Population"
        yMemberPath="GdpTotal">
    </igx-scatter-series>
 </igx-data-chart>

シリーズの外観

Markers プロパティを使用してマーカーの外観をカスタマイズできます。マーカーごとに brush と thickness のビジュアルを変更することもできます。以下のこのコードスニペットは、これらのプロパティの使用方法を示しています。

<igx-scatter-series
 name="series1"
 brush="Purple"
 markerType="Square"
 markerBrush="White"
 markerOutline="Blue"
 thickness="2">
</igx-scatter-series>

const series1 = new IgxScatterSeries({ name: "series1" });
series1.markerType = MarkerType.Square;
series1.markerBrush = "White";
series1.markerOutline = "Blue";
series1.brush = "Purple";
series1.thickness = 2;

Angular 散布ポイントチャート