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();
    

    モジュールの要件

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

    // 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 を作成するために上記のコードを使用することもできます。

    その他のリソース