Angular 極座標シリーズ

このトピックは、Angular データ チャート コンポーネントの極座標 シリーズのさまざまなタイプについて説明します。極座標シリーズは、デカルト（x、y）座標系の代わりに極座標（角度、半径）座標シリーズを使用してチャートにデータをプロットする一連のシリーズです。つまり、極座標シリーズは散布シリーズ の概念を使用して、水平線に沿って伸びるのではなく円の周りを囲みます。このシリーズのグループは、極座標系を使用して複数の異なるデータのシリーズ内の項目間の関係を示すために使用されます。

極座標シリーズでは、データの不均等な散らばりやデータの塊に注意が向けられます。これらは科学的なデータ (風の方向と速度、磁場の強さと方向、太陽系内の物体の位置など) をプロットするためによく使用され、予測結果と収集データの偏差を強調することができます。

Angular 極座標シリーズの例

極座標シリーズのタイプ

データチャートは、以下のタイプの極座標シリーズをサポートしています。

シリーズ名 説明
IgxPolarAreaSeriesComponent 極座標 (角度/半径) 座標にあるデータ ポイントを結ぶ直線の集合で囲まれ、塗りつぶされた多角形を表示します
IgxPolarSplineAreaSeriesComponent 極座標（角度/半径）座標にあるデータ ポイントを結ぶ滑らかな/補間された線の集合で囲まれ、塗りつぶされた多角形を表示します
IgxPolarSplineSeriesComponent 極座標 (角度/半径) 座標にあるデータ ポイントを結ぶ滑らかな/補間された集合を表示します。
IgxPolarScatterSeriesComponent 極座標 (角度/半径) 座標にあるデータ ポイントを表すマーカーの集合を表示します。
IgxPolarLineSeriesComponent 極座標 (角度/半径) 座標にあるデータ ポイントを結ぶ直線の集合を表示します。

軸の要件

IgxDataChartComponent コントロールは、さまざまな軸タイプを提供しますが、極座標シリーズの特定のタイプでは以下の軸タイプのみ使用できます。

シリーズ タイプ 半径軸タイプ 角度軸タイプ
IgxPolarAreaSeriesComponent IgxNumericRadiusAxisComponent IgxNumericAngleAxisComponent
IgxPolarSplineAreaSeriesComponent IgxNumericRadiusAxisComponent IgxNumericAngleAxisComponent
IgxPolarSplineSeriesComponent IgxNumericRadiusAxisComponent IgxNumericAngleAxisComponent
IgxPolarScatterSeriesComponent IgxNumericRadiusAxisComponent IgxNumericAngleAxisComponent
IgxPolarLineSeriesComponent IgxNumericRadiusAxisComponent IgxNumericAngleAxisComponent

データの要件

極座標シリーズには、以下のデータ要件があります。

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

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

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

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

モジュールの要件

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

  • 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';
import { IgxPolarLineSeries } from 'igniteui-angular-charts';
import { IgxPolarSplineSeries } from 'igniteui-angular-charts';
import { IgxPolarSplineAreaSeries } from 'igniteui-angular-charts';
import { IgxPolarScatterSeries } 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,
        // ...
    ]
})

コード例

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

 <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-line-series
        name="series1"
        angleMemberPath="Direction"
        radiusMemberPath="WindSpeed"
        radiusAxisName="radiusAxis"
        angleAxisName="angleAxis">
    </igx-polar-line-series>
 </igx-data-chart>

上記のコードを使って IgxPolarLineSeriesComponent をレンダリングしたい極座標シリーズの名前で置き換えて他のタイプの極座標 シリーズを作成することもできます。

その他のリソース