Web Components データ チャート

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

Web Components データ チャートの例

Edit on CodeSandbox

依存関係

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

npm install --save igniteui-webcomponents-core
npm install --save igniteui-webcomponents-charts

モジュールの要件

Web Components データ チャート コンポーネントを作成するには、以下のモジュールが必要です。

// Module Manager for registering the modules of the chart
import { ModuleManager } from 'igniteui-webcomponents-core';

import { IgcDataChartCoreModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
import { IgcNumberAbbreviatorModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartScatterCoreModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartScatterModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartComponent } from 'igniteui-webcomponents-charts';
import { IgcNumericXAxisComponent } from 'igniteui-webcomponents-charts';
import { IgcNumericYAxisComponent } from 'igniteui-webcomponents-charts';
import { IgcBubbleSeriesComponent } from 'igniteui-webcomponents-charts';
import { IgcSizeScaleComponent } from 'igniteui-webcomponents-charts';

ModuleManager.register(
    IgcDataChartCoreModule,
    IgcDataChartScatterCoreModule,
    IgcDataChartScatterModule,
    IgcDataChartInteractivityModule,
    IgcNumberAbbreviatorModule
);

サポートされるシリーズ

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

サポートされる軸

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

軸タイプ サポートされるシリーズ タイプ
CategoryYAxis カテゴリ シリーズ グループの bar のみ
CategoryXAxis すべてのファイナンシャル シリーズ範囲シリーズカテゴリ シリーズ (bar を除く)
TimeXAxis すべてのファイナンシャル シリーズ範囲シリーズカテゴリ シリーズ (bar を除く)
OrdinalTimeXAxis すべてのファイナンシャル シリーズ範囲シリーズカテゴリ シリーズ (bar を除く)
PercentChangeYAxis すべてのファイナンシャル シリーズ範囲シリーズカテゴリ シリーズ散布シリーズシェイプ シリーズ
NumericYAxis すべての散布シリーズシェイプ シリーズファイナンシャル シリーズ範囲シリーズカテゴリ シリーズ
NumericXAxis カテゴリ シリーズ グループのすべての散布シリーズシェイプ シリーズbar
NumericAngleAxis すべての極座標シリーズ
NumericRadiusAxis すべての極座標シリーズラジアル シリーズ
CategoryAngleAxis すべてのラジアル シリーズ

使用方法

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

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

Note

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

 <igc-data-chart id="chart"
    width="700px"
    height="500px">
    <igc-numeric-x-axis id="xAxis"
        is-logarithmic="true"
        abbreviate-large-numbers="true"
        minimum-value="10000"
        maximum-value="1000000000">
    </igc-numeric-x-axis>
    <igc-numeric-y-axis id="yAxis"
        is-logarithmic="true"
        abbreviate-large-numbers="true">
    </igc-numeric-y-axis>
    <igc-bubble-series id="series1"
        x-member-path="population"
        y-member-path="gdpTotal"
        radius-member-path="gdpPerCapita">
    </igc-bubble-series>
 </igc-data-chart>
let chart = (document.getElementById("chart") as IgcDataChartComponent);
chart.dataSource = data1;

let sizeScale = new IgcSizeScaleComponent();
sizeScale.minimumValue = 10;
sizeScale.maximumValue = 60;

let xAxis = (document.getElementById("xAxis") as IgcNumericXAxisComponent);
let yAxis = (document.getElementById("yAxis") as IgcNumericYAxisComponent);

let series1 = (document.getElementById("series1") as IgcBubbleSeriesComponent);
series1.dataSource = data1;
series1.xAxis = xAxis;
series1.yAxis = yAxis;
series1.radiusScale = sizeScale;

その他のリソース