React 極座標折れ線チャート
Ignite UI for React 極座標エリア チャートは、極座標チャートのグループに属し、データ ポイントを接続する直線のコレクションを使用して描画されます。IgrPolarLineSeries は IgrScatterLineSeries と同じデータ プロットの概念を使用していますが、横の線に沿って伸びるのではなく、円の周りでデータ ポイントをラップします。他のシリーズ タイプと同じように、複数の IgrPolarLineSeries は同じデータ チャートにプロットでき、データセットの相違点を示すために互いにオーバーレイできます。
React 極座標折れ線チャートの例
軸の要件
React データ チャート コンポーネントはさまざまなタイプの軸を提供しますが、IgrPolarLineSeries で使用できるのは以下のタイプの軸のみです。
データの要件
IgrPolarLineSeries には以下のデータ要件があります。
- データソースはデータ項目の配列またはリストである必要があります。
- データソースにはデータ項目を少なくとも 1 つ含む必要があり、含まれない場合はチャートで
IgrPolarLineSeriesがレンダリングされません。 - すべてのデータ項目には、極座標シリーズの
angleMemberPathとradiusMemberPathプロパティを使用してマッピングする必要がある少なくとも 2 つの数値データ列 (IgrPolarLineSeriesなど）を含める必要があります。
極座標シリーズのデータポイントの位置は、「極」と呼ばれる、固定方向からの角度 (角度座標) と固定点 (デカルト座標の原点に類似) からの距離 (半径座標) によって決まります。極から始まって外側を指す線は角度軸 (IgrNumericAngleAxis) のグリッド線で、極を囲む同心円状の輪は半径軸 (IgrNumericRadiusAxis) のグリッド線です。
上記データ要件を満たすデータソースとして SamplePolarData を使用できます。
public dataSource: any[] = SamplePolarData.create();
モジュールの要件
IgrPolarLineSeries を作成するには、以下のモジュールが必要です。
// axis' modules:
import { IgrNumericAngleAxis } from 'igniteui-react-charts';
import { IgrNumericRadiusAxis } from 'igniteui-react-charts';
// series modules:
import { IgrPolarLineSeries } 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();
コード例
このコードは、IgrPolarLineSeries を使用して Ignite UI for React データ チャートのインスタンスを作成し、それをデータソースにバインドする方法を示します。
<IgrDataChart
dataSource={this.dataSource}
width="700px"
height="500px">
<IgrNumericAngleAxis name="angleAxis" startAngleOffset={-90} />
<IgrNumericRadiusAxis name="radiusAxis" />
<IgrPolarLineSeries
name="series1"
angleMemberPath="Direction"
radiusMemberPath="WindSpeed"
radiusAxisName="radiusAxis"
angleAxisName="angleAxis" />
</IgrDataChart>
const series1 = new IgrPolarLineSeries({ 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 = SamplePolarData.create();
this.chart.axes.add(radiusAxis);
this.chart.axes.add(angleAxis);
this.chart.series.add(series1);