React 極座標エリア チャート

Ignite UI for React 極座標エリア チャートは、極座標チャートのグループに属し、頂点または角がデータポイントの極座標 (角度/半径) 座標にある塗りつぶされた多角形の形状を持っています。IgrPolarAreaSeriesIgrScatterSeries と同じデータ プロットの概念を使用していますが、横の線に沿って伸びるのではなく、円の周りでデータ ポイントをラップします。他のシリーズ タイプと同じように、複数の IgrPolarAreaSeries は同じデータ チャートにプロットでき、データセットの相違点を示すために互いにオーバーレイできます。

React 極座標エリア チャートの例

Edit on CodeSandbox

軸の要件

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

データの要件

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

  • データソースはデータ項目の配列またはリストである必要があります。
  • データソースにはデータ項目を少なくとも 1 つ含む必要があり、含まれない場合はチャートで IgrPolarAreaSeries がレンダリングされません。
  • すべてのデータ項目には、極座標シリーズの angleMemberPathradiusMemberPath プロパティを使用してマッピングする必要がある少なくとも 2 つの数値データ列 (IgrPolarAreaSeries など)を含める必要があります。

極座標シリーズのデータポイントの位置は、「極」と呼ばれる、固定方向からの角度 (角度座標) と固定点 (デカルト座標の原点に類似) からの距離 (半径座標) によって決まります。極から始まって外側を指す線は角度軸 (IgrNumericAngleAxis) のグリッド線で、極を囲む同心円状の輪は半径軸 (IgrNumericRadiusAxis) のグリッド線です。

上記データ要件を満たすデータソースとして SamplePolarData を使用できます。

public dataSource: any[] = SamplePolarData.create();

モジュールの要件

IgrPolarAreaSeries を作成するには、以下のモジュールが必要です。

// axis' modules:
import { IgrNumericAngleAxis } from 'igniteui-react-charts';
import { IgrNumericRadiusAxis } from 'igniteui-react-charts';
// series modules:
import { IgrPolarAreaSeries } from 'igniteui-react-charts';
// data chart's modules:
import { IgrDataChart } from 'igniteui-react-charts';
import { IgrDataChartCoreModule } from 'igniteui-react-charts';
import { IgrDataChartPolarCoreModule } from 'igniteui-react-charts';
import { IgrDataChartPolarModule } from 'igniteui-react-charts';

// registering data chart's modules:
IgrDataChartCoreModule.register();
IgrDataChartPolarCoreModule.register();
IgrDataChartPolarModule.register();

コード例

このコードは、IgrPolarAreaSeries を使用して Ignite UI for React データ チャートのインスタンスを作成し、それをデータソースにバインドする方法を示します。

<IgrDataChart
    dataSource={this.state.dataSource}
    width="700px"
    height="500px">
    <IgrNumericAngleAxis  name="angleAxis" startAngleOffset={-90} />
    <IgrNumericRadiusAxis name="radiusAxis" />
    <IgrPolarAreaSeries
        name="series1"
        angleMemberPath="Direction"
        radiusMemberPath="WindSpeed"
        radiusAxisName="radiusAxis"
        angleAxisName="angleAxis" />
</IgrDataChart>
const series1 = new IgrPolarAreaSeries({ name: "series1" });
series1.angleMemberPath = "Direction";
series1.radiusMemberPath  = "WindSpeed";
series1.radiusAxisName = "radiusAxis";
series1.angleAxisName = "angleAxis";

const radiusAxis = new IgrNumericRadiusAxis({ name: "radiusAxis" });
const angleAxis = new IgrNumericAngleAxis({ name: "angleAxis" });

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);

その他のリソース