Angular 折れ線チャート

Ignite UI for Angular 折れ線チャートはカテゴリチャートのグループに属し、直線セグメントで接続されたポイントのコレクションを使用してレンダリングされます。値は y 軸に表示され、カテゴリは x 軸に表示されます。IgxLineSeriesComponent は時間毎のデータの変化や複数の項目を比較する場合に用いられ、プロットされた値の合計を表示することで全体に対するデータ間の関係も表します。Angular 折れ線チャートは、データポイントをつなぐ線にスプライン補間とデータの表示を改善するスムージングがないこと以外は、Angular スプラインチャートと同じです。

サンプル

軸の要件

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

データの要件

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

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

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

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

モジュールの要件

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

DataChartCoreModule;
DataChartCategoryModule;
DataChartCategoryCoreModule;
DataChartInteractivityModule;

// axis' modules:
import { IgxCategoryXAxis } from 'igniteui-angular-charts';
import { IgxNumericYAxis } from 'igniteui-angular-charts';
// series' modules:
import { IgxLineSeries } from 'igniteui-angular-charts';
// data chart's modules:

import { IgxDataChartCoreModule } from 'igniteui-angular-charts';
import { IgxDataChartCategoryModule } from 'igniteui-angular-charts';

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

コード例

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

 <igx-data-chart
    [dataSource]="dataSource"
    width="700px"
    height="500px">
    <igx-category-x-axis name="xAxis" label="Year"></igx-category-x-axis>
    <igx-numeric-y-axis  name="yAxis"></igx-numeric-y-axis>
    <igx-line-series
        name="series1"
        xAxisName="xAxis"
        yAxisName="yAxis"
        valueMemberPath="USA">
    </igx-line-series>
 </igx-data-chart>