Angular 極座標エリア チャート

Ignite UI for Angular 極座標エリア チャートは、極座標チャートのグループに属し、頂点または角がデータポイントの極座標 (角度/半径) 座標にある塗りつぶされた多角形の形状を持っています。IgxPolarAreaSeriesComponent は IgxScatterSeriesComponent と同じデータ プロットの概念を使用していますが、横の線に沿って伸びるのではなく、円の周りでデータ ポイントをラップします。他のシリーズ タイプと同じように、複数の IgxPolarAreaSeriesComponent は同じデータ チャートにプロットでき、データセットの相違点を示すために互いにオーバーレイできます。

サンプル

StackBlitz で表示

軸の要件

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

• IgxNumericRadiusAxisComponent
• IgxNumericAngleAxisComponent

データの要件

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

• データソースはデータ項目の配列またはリストである必要があります。
• データソースにはデータ項目を少なくとも 1 つ含む必要があり、含まれない場合はチャートで IgxPolarAreaSeriesComponent がレンダリングされません。
• すべてのデータ項目には、極座標シリーズの angleMemberPath と radiusMemberPath プロパティを使用してマッピングする必要がある少なくとも 2 つの数値データ列 (IgxPolarAreaSeriesComponent など）を含める必要があります。

極座標シリーズのデータポイントの位置は、「極」と呼ばれる、固定方向からの角度 (角度座標) と固定点 (デカルト座標の原点に類似) からの距離 (半径座標) によって決まります。極から始まって外側を指す線は角度軸 (IgxNumericAngleAxisComponent) のグリッド線で、極を囲む同心円状の輪は半径軸 (IgxNumericRadiusAxisComponent) のグリッド線です。

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

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

モジュールの要件

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

• DataChartCoreModule
• DataChartPolarModule
• DataChartPolarCoreModule
• DataChartInteractivityModule

// axis' modules:
import { IgxNumericAngleAxis } from 'igniteui-angular-charts';
import { IgxNumericRadiusAxis } from 'igniteui-angular-charts';
// series modules:
import { IgxPolarAreaSeries } from 'igniteui-angular-charts';
// data chart's modules:

import { IgxDataChartCoreModule } from 'igniteui-angular-charts';
import { IgxDataChartPolarCoreModule } from 'igniteui-angular-charts';
import { IgxDataChartPolarModule } from 'igniteui-angular-charts';

// in app.module.ts file
@NgModule({
    imports: [
        // ...
        IgxDataChartCoreModule,
        IgxDataChartPolarCoreModule,
        IgxDataChartPolarModule,
        // ...
    ]
})

コード例

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

<igx-data-chart
    [dataSource]="dataSource"
    width="700px"
    height="500px">
    <igx-numeric-angle-axis  name="angleAxis" startAngleOffset="-90"></igx-numeric-angle-axis>
    <igx-numeric-radius-axis name="radiusAxis"></igx-numeric-radius-axis>
    <igx-polar-area-series
        name="series1"
        angleMemberPath="Direction"
        radiusMemberPath="WindSpeed"
        radiusAxisName="radiusAxis"
        angleAxisName="angleAxis">
    </igx-polar-area-series>
</igx-data-chart>

その他のリソース

• 軸のタイプ
• 軸の共有
• チャート凡例
• シリーズ マーカー
• シリーズ タイプ