Angular ラジアル折れ線チャート

Ignite UI for Angular ラジアル折れ線チャートは、放射チャートのグループに属し、データ ポイントを接続する直線のコレクションを使用して描画されます。IgxRadialLineSeriesComponent は IgxLineSeriesComponent と同じデータ プロットの概念を使用していますが、横の線に沿って伸びるのではなく、円の周りでデータ ポイントをラップします。

サンプル

軸の要件

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

データの要件

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

  • データソースはデータ項目の配列またはリストである必要があります。
  • データソースにはデータ項目を少なくとも 1 つ含む必要があり、含まれない場合はチャートで IgxRadialLineSeriesComponent がレンダリングされません。
  • すべてのデータ項目には、財務軸 (IgxCategoryAngleAxisComponent など) の IgxLabelComponent プロパティにマッピングする必要があるデータ列 （文字列または日時）を少なくとも 1 列含める必要があります
  • すべてのデータ項目には、IgxRadialLineSeriesComponent の valueMemberPath プロパティにマッピングする必要がある数値データ列を少なくとも 1 列含める必要があります。

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

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

モジュールの要件

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

  • DataChartCoreModule
  • RadialLineSeriesModule
  • RadialLineSeriesCoreModule
  • DataChartInteractivityModule 
// axis' modules:
import { IgxCategoryAngleAxis } from 'igniteui-angular-charts';
import { IgxNumericRadiusAxis } from 'igniteui-angular-charts';
// series modules:
import { IgxRadialLineSeries } 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,
        // ...
    ]
})

コード例

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

 <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-line-series
        name="series1"
        valueMemberPath="Budget"
        valueAxisName="radiusAxis"
        angleAxisName="angleAxis">
    </igx-radial-line-series>
 </igx-data-chart>

その他のリソース