React ラジアル エリア チャート
Ignite UI for React 放射状エリア チャートは放射状チャートのグループに属し、データポイントを接続する直線のコレクションによってバインドされた塗りつぶされたポリゴンの形状を持っています。IgrRadialAreaSeries は IgrAreaSeries と同じデータ プロットの概念を使用していますが、横の線に沿って伸びるのではなく、円の周りでデータ ポイントをラップします。
React ラジアル エリア チャートの例
軸の要件
React データ チャート コンポーネントはさまざまなタイプの軸を提供しますが、IgrRadialAreaSeries で使用できるのは以下のタイプの軸のみです。
データの要件
IgrRadialAreaSeries には以下のデータ要件があります。
- データソースはデータ項目の配列またはリストである必要があります。
- データソースにはデータ項目を少なくとも 1 つ含む必要があり、含まれない場合はチャートで
IgrRadialAreaSeriesがレンダリングされません。 - すべてのデータ項目には、財務軸 (
IgrCategoryAngleAxisなど) のIgrLabelプロパティにマッピングする必要があるデータ列 （文字列または日時）を少なくとも 1 列含める必要があります - すべてのデータ項目には、
IgrRadialAreaSeriesのvalueMemberPathプロパティにマッピングする必要がある数値データ列を少なくとも 1 列含める必要があります。
上記データ要件を満たすデータソースとして SampleRadialData を使用できます。
public dataSource: any[] = SampleRadialData.create();
モジュールの要件
IgrRadialAreaSeries を作成するには、以下のモジュールが必要です。
// axis' modules:
import { IgrCategoryAngleAxis } from 'igniteui-react-charts';
import { IgrNumericRadiusAxis } from 'igniteui-react-charts';
// series modules:
import { IgrRadialAreaSeries } from 'igniteui-react-charts';
import { IgrRadialLineSeries } from 'igniteui-react-charts';
import { IgrRadialPieSeries } from 'igniteui-react-charts';
import { IgrRadialColumnSeries } from 'igniteui-react-charts';
// data chart's modules:
import { IgrDataChart } from 'igniteui-react-charts';
import { IgrDataChartCoreModule } from 'igniteui-react-charts';
import { IgrDataChartRadialCoreModule } from 'igniteui-react-charts';
import { IgrDataChartRadialModule } from 'igniteui-react-charts';
// registering data chart's modules:
IgrDataChartCoreModule.register();
IgrDataChartRadialCoreModule.register();
IgrDataChartRadialModule.register();
コード例
このコードは、IgrRadialAreaSeries を使用して Ignite UI for React データ チャートのインスタンスを作成し、それをデータソースにバインドする方法を示します。
<IgrDataChart
dataSource={this.state.dataSource}
width="700px"
height="500px">
<IgrCategoryAngleAxis name="angleAxis" label="Department" />
<IgrNumericRadiusAxis name="radiusAxis" />
<IgrRadialAreaSeries
name="series1"
valueMemberPath="Budget"
valueAxisName="radiusAxis"
angleAxisName="angleAxis" />
</IgrDataChart>
const series1 = new IgrRadialAreaSeries({ name: "series1" });
series1.valueMemberPath = "Budget";
series1.radiusAxisName = "radiusAxis";
series1.angleAxisName = "angleAxis";
const radiusAxis = new IgrNumericRadiusAxis({ name: "radiusAxis" });
const angleAxis = new IgrCategoryAngleAxis({ name: "angleAxis" });
angleAxis.label = "Department";
this.chart = new IgrDataChart({ name: "chart" });
this.chart.dataSource = SampleCategoryData.create();
this.chart.axes.add(radiusAxis);
this.chart.axes.add(angleAxis);
this.chart.series.add(series1);