React 範囲エリア チャート
Ignite UI for React 範囲エリア チャートは、範囲チャートのグループに属し、線の間の領域が塗りつぶされた 2 本の線を使用してレンダリングされます。このタイプのシリーズは、同じデータ ポイントの低い値と高い値の間の変化量を強調します一定期間、または複数のアイテムを比較します。範囲値は y 軸に表示され、カテゴリは x 軸に表示されます。IgrRangeAreaSeries
は、範囲が塗りつぶされた領域ではなく垂直柱の集まりで表されること以外は IgrRangeColumnSeries
と同じです。
React 範囲エリア チャートの例
軸の要件
React データ チャート コンポーネントはさまざまなタイプの軸を提供しますが、IgrRangeAreaSeries
で使用できるのは以下のタイプの軸のみです。
データの要件
IgrRadialAreaSeries
には以下のデータ要件があります。
- データソースはデータ項目の配列またはリストである必要があります。
- データソースにはデータ項目を少なくとも 1 つ含む必要があり、含まれない場合はチャートで
IgrRangeAreaSeries
がレンダリングされません。 - すべてのデータ項目には、カテゴリ軸の
IgrLabel
プロパティにマッピングする必要があるラベルデータ列(文字列または日時)を少なくとも1つ含める必要があります (IgrCategoryXAxis
など)。 - すべてのデータ項目には、
IgrRangeAreaSeries
のHighMemberPath
プロパティとLowMemberPath
プロパティを使用してマップする必要がある少なくとも 2 つの数値データ列が含まれている必要があります。
上記データ要件を満たすデータソースとして SampleRangeData を使用できます。
public dataSource: any[] = SampleRangeData.create();
モジュールの要件
IgrRangeAreaSeries
を作成するには、以下のモジュールが必要です。
import { IgrNumericYAxis } from 'igniteui-react-charts';
import { IgrCategoryXAxis } from 'igniteui-react-charts';
import { IgrRangeAreaSeries } from 'igniteui-react-charts';
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();
コード例
このコードは、IgrRangeAreaSeries
を使用して Ignite UI for React データ チャートのインスタンスを作成し、それをデータソースにバインドする方法を示します。
<IgrDataChart
dataSource={this.state.dataSource}
width="700px"
height="500px">
{/* axes */}
<IgrCategoryXAxis name="xAxis" label="Year" />
<IgrNumericYAxis name="yAxis" />
{/* series: */}
<IgrRangeAreaSeries
name="series1"
xAxisName="xAxis"
yAxisName="yAxis"
highMemberPath="High"
lowMemberPath="Low" />
</IgrDataChart>
const series1 = new IgrRangeAreaSeries({ name: "series1" });
series1.highMemberPath = "High";
series1.lowMemberPath = "Low";
series1.xAxisName = "xAxis";
series1.yAxisName = "yAxis";
const xAxis = new IgrNumericXAxis({ name: "xAxis" });
const yAxis = new IgrCategoryYAxis({ name: "yAxis" });
yAxis.label = "Year";
this.chart = new IgrDataChart({ name: "chart" });
this.chart.dataSource = SampleRangeData.create();
this.chart.axes.add(yAxis);
this.chart.axes.add(xAxis);
this.chart.series.add(series1);