Angular ラジアル シリーズ

このトピックは、Angular データ チャート コンポーネントのラジアル シリーズのさまざまなタイプについて説明します。ラジアル シリーズは、カテゴリ シリーズのように水平線に沿って伸びるのではなく、円の周りを囲んだデータポイントのコレクションとしてデータをレンダリングするシリーズのグループです。ラジアル シリーズは、チャートの範囲の最小から最大までのカテゴリのリストもマッピングし、カテゴリシリーズと同じカテゴリグループ化メカニズムをサポートします。

Angular ラジアル シリーズの例

ラジアル シリーズのタイプ

以下の表は、すべてのタイプのカテゴリ シリーズとその説明をまとめたものです。

シリーズ名 説明
IgxRadialAreaSeriesComponent ラジアル (角度/半径) 座標にあるデータ ポイントを結ぶ直線の集合で囲まれ、塗りつぶされた多角形を表示します
RadialSplineAreaSeries ラジアル (角度/半径) 座標にあるデータ ポイントを結ぶ滑らかな/補間された線の集合で囲まれ、塗りつぶされた多角形を表示します
RadialSplineSeries ラジアル (角度/半径) 座標にあるデータ ポイントを結ぶ滑らかな/補間された線の集合を表示します。
RadialScatterSeries 極座標 (角度/半径) 座標にあるデータ ポイントを表すマーカーの集合を表示します。
IgxRadialLineSeriesComponent 極座標 (角度/半径) 座標にあるデータ ポイントを結ぶ直線の集合を表示します。

軸の要件

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

シリーズ タイプ 半径軸タイプ 角度軸タイプ
IgxRadialAreaSeriesComponent IgxNumericRadiusAxisComponent IgxCategoryAngleAxisComponent
IgxRadialPieSeriesComponent IgxNumericRadiusAxisComponent IgxCategoryAngleAxisComponent
IgxRadialColumnSeriesComponent IgxNumericRadiusAxisComponent IgxCategoryAngleAxisComponent
IgxRadialLineSeriesComponent IgxNumericRadiusAxisComponent IgxCategoryAngleAxisComponent

データの要件

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

  • データソースはデータ項目の配列またはリストである必要があります。
  • データソースはデータ項目を少なくとも 1 つ含む必要があります。含まない場合はチャートはラジアル シリーズをレンダリングしません。
  • すべてのデータ項目には、財務軸 (IgxCategoryXAxisComponent など) の IgxLabelComponent プロパティにマッピングする必要があるデータ列 (文字列または日時)を少なくとも 1 列含める必要があります
  • データ項目は、カテゴリシリーズ (IgxRadialAreaSeriesComponent など) の valueMemberPath プロパティを使用してマップする数値データ列を少なくとも 1 列含む必要があります。

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

this.state = { dataSource: SampleRadialData.create() }

モジュールの要件

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

  • DataChartCoreModule
  • DataChartRadialSeriesModule
  • DataChartRadialSeriesCoreModule
  • DataChartInteractivityModule
// axis' modules:
import { IgxCategoryAngleAxis } from 'igniteui-angular-charts';
import { IgxNumericRadiusAxis } from 'igniteui-angular-charts';
// series modules:
import { IgxRadialAreaSeries } from 'igniteui-angular-charts';
import { IgxRadialLineSeries } from 'igniteui-angular-charts';
import { IgxRadialPieSeries } from 'igniteui-angular-charts';
import { IgxRadialColumnSeries } from 'igniteui-angular-charts';
// data chart's modules:

import { IgxDataChartCoreModule } from 'igniteui-angular-charts';
import { IgxDataChartRadialCoreModule } from 'igniteui-angular-charts';
import { IgxDataChartRadialModule } from 'igniteui-angular-charts';

@NgModule({
    imports: [
        // ...
        IgxDataChartCoreModule,
        IgxDataChartRadialCoreModule,
        IgxDataChartRadialModule,
        // ...
    ]
})

コード例

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

 <igx-data-chart
    [dataSource]="dataSource"
    width="700px"
    height="500px">
    <igx-category-angle-axis name="angleAxis" label="Department"></igx-category-angle-axis>
    <igx-numeric-radius-axis name="radiusAxis"></igx-numeric-radius-axis>
    <igx-radial-pie-series
        name="series1"
        valueMemberPath="Budget"
        valueAxisName="radiusAxis"
        angleAxisName="angleAxis">
    </igx-radial-pie-series>
 </igx-data-chart>

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

その他のリソース