Angular 散布図 - 図形シリーズ

このトピックは、Angular データ チャート コンポーネントの図形シリーズのさまざまなタイプについて説明します。散布図シリーズは、一連の形状 (1 つまたは複数の X/Y 座標の配列) をとり、それらをデカルト (x、y) 座標系のポリゴン (IgxScatterPolygonSeriesComponent) またはポリライン (IgxScatterPolylineSeriesComponent) のコレクションとして描画するチャート シリーズのグループです。

散布図シリーズは科学データの強調領域でよく使用されますが、ダイアグラム、青写真、さらには建物の間取り図のプロットにも使用できます。

Angular 散布図 - 図形シリーズの例

シェイプ シリーズの種類

以下の表は、すべての種類のシェイプ シリーズとその説明を示しています。

シリーズ名 説明
IgxScatterPolygonSeriesComponent shapeMemberPath プロパティにマッピングされた各図形の多角形を表示します。国境などの図形をレンダリングするのに便利です。
IgxScatterPolylineSeriesComponent shapeMemberPath プロパティにマッピングされた各図形のポリラインを表示します。ネットワークグラフのように断線をレンダリングするのに便利です。

軸の要件

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

シリーズ タイプ YAxis タイプ XAxis タイプ
IgxScatterPolygonSeriesComponent IgxNumericYAxisComponent IgxNumericXAxisComponent
IgxScatterPolylineSeriesComponent IgxNumericYAxisComponent IgxNumericXAxisComponent

データの要件

散布シェイプ シリーズには、以下のデータ要件があります。

  • データソースはデータ項目の配列やリストである必要があります。
  • データソースはデータ項目を少なくとも 1 つ含む必要があります。含まない場合はチャートに散布シェイプ シリーズを描画しません。
  • すべてのデータ項目には、スキャッタシェイプシリーズの shapeMemberPath プロパティにマッピングする必要がある1つのシェイプデータ列(XまたはY座標の配列)を含める必要があります (IgxScatterPolygonSeriesComponent など)

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

public dataSource: any[] = SampleShapeData.create();

モジュールの要件

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

  • DataChartCoreModule
  • DataChartScatterCoreModule
  • DataChartScatterModule
  • DataChartInteractivityModule
  • ScatterPolygonSeriesModule
// axis' modules:
import { IgxNumericYAxis } from 'igniteui-angular-charts';
import { IgxNumericXAxis } from 'igniteui-angular-charts';
// series' modules:
import { IgxScatterPolygonSeries } from 'igniteui-angular-charts';
import { IgxScatterPolylineSeries } from 'igniteui-angular-charts';
// data chart's modules:

import { IgxDataChartCoreModule } from 'igniteui-angular-charts';
import { IgxDataChartShapeCoreModule } from 'igniteui-angular-charts';
import { IgxDataChartShapeModule } from 'igniteui-angular-charts';

@NgModule({
    imports: [
        // ...
        IgxDataChartCoreModule,
        IgxDataChartShapeCoreModule,
        IgxDataChartShapeModule,
    ]
})
export class AppModule { /* ... */ }

コード例

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

 <igx-data-chart
    [dataSource]="dataSource"
    width="700px"
    height="500px">
    <igx-numeric-x-axis name="xAxis"></igx-numeric-x-axis>
    <igx-numeric-y-axis name="yAxis"></igx-numeric-y-axis>
    <igx-scatter-polygon-series
        name="series1"
        shapeMemberPath="Points"
        title="House Floor Plan"
        brush="Gray"
        outline="Black">
    </igx-scatter-polygon-series>
 </igx-data-chart>

IgxScatterPolygonSeriesComponent を置き換えることで IgxScatterPolylineSeriesComponent を作成するために上記のコードを使用することもできます。

その他のリソース