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