React ラジアル状円チャート

Ignite UI for React 放射状円チャートはラジアル チャートのグループに属し、チャートの中心からデータポイントの位置に向かって伸びる円スライスを使用します。IgrRadialPieSeries は、データ ポイントの複数シリーズを分類する概念を使用していますが、横の線に沿って伸びるのではなく、円の周りでデータ ポイントをラップします。

React ラジアル状円チャートの例

Edit on CodeSandbox

軸の要件

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

データの要件

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

  • データソースはデータ項目の配列またはリストである必要があります。
  • データソースにはデータ項目を少なくとも 1 つ含む必要があり、含まれない場合はチャートで IgrRadialPieSeries がレンダリングされません。
  • すべてのデータ項目には、財務軸 (IgrCategoryAngleAxis など) の IgrLabel プロパティにマッピングする必要があるデータ列 (文字列または日時)を少なくとも 1 列含める必要があります
  • すべてのデータ項目には、IgrRadialPieSeriesvalueMemberPath プロパティにマッピングする必要がある数値データ列を少なくとも 1 列含める必要があります。

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

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

モジュールの要件

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

// axis' modules:
import { IgrCategoryAngleAxis } from 'igniteui-react-charts';
import { IgrNumericRadiusAxis } from 'igniteui-react-charts';
// series modules:
import { IgrRadialPieSeries } 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();

コード例

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

<IgrDataChart
    dataSource={this.state.dataSource}
    width="700px"
    height="500px">
    <IgrCategoryAngleAxis name="angleAxis" label="Department" />
    <IgrNumericRadiusAxis name="radiusAxis" />
    <IgrRadialPieSeries
        name="series1"
        valueMemberPath="Budget"
        valueAxisName="radiusAxis"
        angleAxisName="angleAxis" />
</IgrDataChart>
const series1 = new IgrRadialPieSeries({ 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);

その他のリソース