React 範囲エリア チャート

Ignite UI for React 範囲エリア チャートは、範囲チャートのグループに属し、線の間の領域が塗りつぶされた 2 本の線を使用してレンダリングされます。このタイプのシリーズは、同じデータ ポイントの低い値と高い値の間の変化量を強調します一定期間、または複数のアイテムを比較します。範囲値は y 軸に表示され、カテゴリは x 軸に表示されます。IgrRangeAreaSeries は、範囲が塗りつぶされた領域ではなく垂直柱の集まりで表されること以外は IgrRangeColumnSeries と同じです。

React 範囲エリア チャートの例

Edit on CodeSandbox

軸の要件

React データ チャート コンポーネントはさまざまなタイプの軸を提供しますが、IgrRangeAreaSeries で使用できるのは以下のタイプの軸のみです。

データの要件

IgrRadialAreaSeries には以下のデータ要件があります。

  • データソースはデータ項目の配列またはリストである必要があります。
  • データソースにはデータ項目を少なくとも 1 つ含む必要があり、含まれない場合はチャートで IgrRangeAreaSeries がレンダリングされません。
  • すべてのデータ項目には、カテゴリ軸の IgrLabel プロパティにマッピングする必要があるラベルデータ列(文字列または日時)を少なくとも1つ含める必要があります (IgrCategoryXAxis など)。
  • すべてのデータ項目には、IgrRangeAreaSeriesHighMemberPath プロパティと 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);

その他のリソース