React スプライン エリア チャート
Ignite UI for React スプライン エリア チャートは、カテゴリ チャートのグループに属し、スプラインの下の領域が塗りつぶされたスプラインの滑らかな曲線で接続されたポイントのコレクションを使用して描画されます。値は y 軸に表示され、カテゴリは x 軸に表示されます。IgrSplineAreaSeries は時間毎のデータの変化や複数の項目を比較する場合に用いられ、プロットされた値の合計を表示することで全体に対するデータ間の関係も表します。React スプライン エリア チャートは、データ ポイントを接続するラインにスプライン補間とデータの表示を改善するスムージングがあること以外は React エリア チャートと同じです。
React スプライン エリア チャートの例
軸の要件
React データ チャート コンポーネントはさまざまなタイプの軸を提供しますが、IgrSplineAreaSeries で使用できるのは以下のタイプの軸のみです。
データの要件
IgrSplineAreaSeries には以下のデータ要件があります。
- データソースはデータ項目の配列またはリストである必要があります。
- データソースにはデータ項目を少なくとも 1 つ含む必要があり、含まれない場合はチャートで
IgrSplineAreaSeriesがレンダリングされません。 - すべてのデータ項目には、財務軸 (
IgrCategoryXAxisなど) のIgrLabelプロパティにマッピングする必要があるデータ列 （文字列または日時）を少なくとも 1 列含める必要があります - すべてのデータ項目には、
IgrSplineAreaSeriesのValueMemberPathプロパティにマッピングする必要がある数値データ列を少なくとも 1 列含める必要があります。
上記データ要件を満たすデータソースとして SampleCategoryData を使用できます。
public dataSource: any[] = SampleCategoryData.create();
モジュールの要件
IgrSplineAreaSeries を作成するには、以下のモジュールが必要です。
// axis' modules:
import { IgrNumericYAxis } from 'igniteui-react-charts';
import { IgrCategoryXAxis } from 'igniteui-react-charts';
// series' modules:
import { IgrSplineAreaSeries } from 'igniteui-react-charts';
// data chart's modules:
import { IgrDataChart } from 'igniteui-react-charts';
import { IgrDataChartCoreModule } from 'igniteui-react-charts';
import { IgrDataChartCategoryModule } from 'igniteui-react-charts';
// registering data chart's modules:
IgrDataChartCoreModule.register();
IgrDataChartCategoryModule.register();
コード例
このコードは、IgrSplineAreaSeries を使用して Ignite UI for React データ チャートのインスタンスを作成し、それをデータソースにバインドする方法を示します。
<IgrDataChart
dataSource={this.state.dataSource}
width="700px"
height="500px">
{/* axes */}
<IgrCategoryXAxis name="xAxis" label="Year" />
<IgrNumericYAxis name="yAxis" />
{/* series */}
<IgrSplineAreaSeries
name="series1"
xAxisName="xAxis"
yAxisName="yAxis"
valueMemberPath="USA" />
</IgrDataChart>
const series1 = new IgrSplineAreaSeries({ name: "series1" });
series1.valueMemberPath = "USA";
series1.xAxisName = "xAxis";
series1.yAxisName = "yAxis";
const yAxis = new IgrNumericYAxis({ name: "yAxis" });
const xAxis = new IgrCategoryXAxis({ name: "xAxis" });
xAxis.label = "Year";
this.chart = new IgrDataChart({ name: "chart" });
this.chart.dataSource = SampleCategoryData.create();
this.chart.axes.add(yAxis);
this.chart.axes.add(xAxis);
this.chart.series.add(series1);