Angular データ チャート

Angular データ チャートは、軸、マーカー、凡例、および注釈レイヤーのモジュール設計を提供するチャート コンポーネントです。データ チャート機能は、複合チャート ビューを作成するために同じチャート領域でのビジュアル要素の複数のインスタンスを利用できます。

Angular データ チャートの例

依存関係

データ チャート パッケージをインストールするときに core パッケージもインストールする必要があります。

npm install --save igniteui-angular-core
npm install --save igniteui-angular-charts

モジュールの要件

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

  • DataChartCoreModule
  • DataChartScatterCoreModule,
  • DataChartScatterModule,
  • NumberAbbreviatorModule
import { IgxDataChartCoreModule } from 'igniteui-angular-charts';
import { IgxNumberAbbreviatorModule } from 'igniteui-angular-charts';
import { IgxDataChartScatterCoreModule } from 'igniteui-angular-charts';
import { IgxDataChartScatterModule } from 'igniteui-angular-charts';
import { IgxBubbleSeriesComponent } from 'igniteui-angular-charts';
import { IgxNumericXAxisComponent } from 'igniteui-angular-charts';
import { IgxNumericYAxisComponent } from 'igniteui-angular-charts';
import { IgxSizeScaleComponent } from 'igniteui-angular-charts';
import { IgxValueBrushScaleComponent } from 'igniteui-angular-charts';

@NgModule({
    imports: [
        // ...
        IgxDataChartCoreModule,
        IgxDataChartScatterCoreModule,
        IgxDataChartScatterModule,
        IgxNumberAbbreviatorModule
    ]
})
export class AppModule { /* ... */ }

サポートされるシリーズ

Angular データ チャート コンポーネントは、Category シリーズ, Financial シリーズPolar シリーズRadial シリーズRange SeriesScatter シリーズShape シリーズ を含む 65 種類以上のシリーズをサポートします。サポートされている Series のタイプとそれらの使用方法のリストについては、シリーズのトピックを参照してください。

サポートされる軸

Angular データ チャート コンポーネントは、特定の種類のシリーズで使用することを目的としたさまざまな種類の軸をサポートします。以下の表はシリーズ タイプで使用できます。 これらのタイプの軸の使用方法については、SeriesAxis のトピックを参照してください。

軸タイプ サポートされるシリーズ タイプ
CategoryYAxis Category シリーズ グループの bar のみ
CategoryXAxis すべての Financial シリーズRange シリーズCategory シリーズ (bar を除く)
TimeXAxis すべての Financial シリーズRange シリーズCategory シリーズ (bar を除く)
OrdinalTimeXAxis すべての Financial シリーズRange シリーズCategory シリーズ (bar を除く)
PercentChangeYAxis すべての Financial シリーズRange シリーズCategory シリーズScatter シリーズShape シリーズ
NumericYAxis すべての Scatter シリーズShape シリーズFinancial シリーズRange シリーズCategory シリーズ
NumericXAxis Category シリーズ グループのすべての Scatter シリーズShape シリーズbar
NumericAngleAxis すべての 極座標シリーズ
NumericRadiusAxis すべての 極座標シリーズラジアル シリーズ
CategoryAngleAxis すべての ラジアル シリーズ

使用方法

データチャートモジュールがインポートされたので、以下のステップはチャートをデータにバインドすることです。すべてのシリーズを正しく表示するには、特定の数と種類のデータ列が必要です。Data Sources のトピックで、系列の種類ごとにデータソースを見つけることができます。

以下のコード スニペットは、散布 bubble を作成し、それを SampleScatterStats データにバインドする方法を示しています。

Note

チャートコンポーネントにデータソースを設定すると、すべてのシリーズに適用されますが、データチャートに追加された各シリーズに異なるデータソースを設定することもできます。

 <igx-data-chart [dataSource]="data"
                 width="700px"
                 height="500px">
    <igx-numeric-x-axis name="xAxis" isLogarithmic="true" ></igx-numeric-x-axis>
    <igx-numeric-y-axis name="yAxis" isLogarithmic="true" ></igx-numeric-y-axis>
    <igx-bubble-series
        name="series1"
        [xAxis]="xAxis"
        [yAxis]="yAxis"
        xMemberPath="population"
        yMemberPath="gdpTotal"
        radiusMemberPath="gdpPerCapita"
        [dataSource]="data"  ></igx-bubble-series>
 </igx-data-chart>

その他のリソース