データ チャート

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

デモ

依存関係

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

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

必要なモジュール

IgxDataChart は、以下のモジュールが必要です。

// data chart's modules required for all series:
import { IgxDataChartModule } from "igniteui-angular-charts/ES5/igx-data-chart-module";
import { IgxDataChartCoreModule } from "igniteui-angular-charts/ES5/igx-data-chart-core--module";
// scatter series' modules:
import { IgxDataChartScatterCoreModule } from "igniteui-angular-charts/ES5/igx-data-chart-scatter-core-module";
import { IgxDataChartScatterModule } from "igniteui-angular-charts/ES5/igx-data-chart-scatter-module";
// scatter series elements:
import { IgxNumericYAxis } from "igniteui-angular-charts/ES5/igx-numeric-y-axis";
import { IgxNumericXAxis } from "igniteui-angular-charts/ES5/igx-numeric-x-axis";
import { IgxBubbleSeries } from "igniteui-angular-charts/ES5/igx-bubble-series";
import { IgxSizeScale } from "igniteui-angular-charts/ES5/igx-size-scale";
import { IgxValueBrushScale } from "igniteui-angular-charts/ES5/igx-value-brush-scale";

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

サポートされるシリーズ

IgxDataChart コントロールは、カテゴリ シリーズファイナンシャル シリーズ極座標シリーズラジアル シリーズエリア シリーズ散布シリーズ図形シリーズ を含む 65 種類以上のシリーズをサポートします。サポートされている Series のタイプとそれらの使用方法のリストについては、シリーズのトピックを参照してください。

サポートされる軸

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

軸タイプ サポートされるシリーズ タイプ
CategoryYAxis Category グループの IgxBarSeriesComponent のみ
CategoryXAxis すべての ファイナンシャル シリーズエリア シリーズカテゴリ シリーズ (IgxBarSeriesComponent 以外)
TimeXAxis すべての ファイナンシャル シリーズエリア シリーズカテゴリ シリーズ (IgxBarSeriesComponent 以外)
OrdinalTimeXAxis すべての ファイナンシャル シリーズエリア シリーズカテゴリ シリーズ (IgxBarSeriesComponent 以外)
PercentChangeYAxis すべての ファイナンシャル シリーズエリア シリーズカテゴリ シリーズ散布シリーズ図形シリーズ
NumericYAxis すべての 散布シリーズ図形シリーズファイナンシャル シリーズエリア シリーズカテゴリ シリーズ
NumericXAxis カテゴリ シリーズ グループのすべての 散布シリーズ図形シリーズ、BarSeries
NumericAngleAxis すべての 極座標シリーズ
NumericRadiusAxis すべての 極座標シリーズラジアル シリーズ
CategoryAngleAxis すべての ラジアル シリーズ

使用方法

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

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

Note

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

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

その他のリソース