React 積層型 100 棒チャート

Ignite UI for React 積層型 100 棒チャートは、カテゴリ チャートのグループに属し、互いに積み重ねられた長方形のコレクション (IgrStackedFragmentSeries) を使用して描画されます。コレクションのそれぞれの積層フラグメントは各積層の視覚的な要素を表します。各積層は正の値と負の値の両方を含みます。正の値はいずれも x 軸の正の側にグループ化され、負の値は x 軸の負の側にグループ化されます。React 積層型 100 棒チャートは、y 軸の値の処理以外は、React 積層型棒チャートと同じです。データを直接表現するのでなく、積層型棒チャートは、データ ポイント内のすべての値の合計の割合でデータを表します。IgrStacked100BarSeriesIgrStacked100ColumnSeries と同じデータ プロットの概念を使用しますが、データポイントは垂直線 (y軸) ではなく水平線 (x軸) に沿って積み重ねられます。つまり、積層型 100 棒チャートは積層型 100 縦棒チャートのように描画されますが、時計回りに 90 度回転します。

React 積層型 100 棒チャートの例

Edit on CodeSandbox

IgrStacked100BarSeries には、IgrStackedFragmentSeries 要素を配置できる独自の IgrSeries コレクションがあります。これらのフラグメントは、チャートの実際のレンダリングを構成するものであり、ValueMemberPath を受け取る要素です。

軸の要件

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

Required Data

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

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

モジュールの要件

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

// axis' modules:
import { IgrNumericXAxis } from 'igniteui-react-charts';
import { IgrCategoryYAxis } from 'igniteui-react-charts';
// series' modules:
import { IgrStacked100BarSeries } from 'igniteui-react-charts';
// data chart's modules:
import { IgrDataChart } from 'igniteui-react-charts';
import { IgrDataChartCoreModule } from 'igniteui-react-charts';
import { IgrDataChartCategoryModule } from 'igniteui-react-charts';
import { IgrDataChartStackedModule } from 'igniteui-react-charts';
import { IgrColumnFragmentModule } from 'igniteui-react-charts' ;

// registering data chart's modules:
IgrDataChartCoreModule.register();
IgrDataChartCategoryModule.register();
IgrDataChartStackedModule.register();
IgrColumnFragmentModule.register();

コード例

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

<IgrDataChart width="100%"
  height="100%"
  dataSource={this.data} >
  <IgrNumericXAxis name="xAxis" />
  <IgrCategoryYAxis name="yAxis" label="Country" />

  <IgrStacked100BarSeries name="series" xAxisName="xAxis" yAxisName="yAxis">
    <IgrStackedFragmentSeries name="coal" valueMemberPath="Coal" title="Coal" />
    <IgrStackedFragmentSeries name="hydro" valueMemberPath="Hydro" title="Hydro" />
    <IgrStackedFragmentSeries name="nuclear" valueMemberPath="Nuclear" title="Nuclear" />
    <IgrStackedFragmentSeries name="gas" valueMemberPath="Gas" title="Gas" />
    <IgrStackedFragmentSeries name="oil" valueMemberPath="Oil" title="Oil" />
  </IgrStacked100BarSeries>
</IgrDataChart>
const stack = new IgrStacked100BarSeries({ name: "series" });
stack.xAxisName = "xAxis";
stack.yAxisName = "yAxis";

const propertyNames: string[] = ["Coal", "Hydro", "Nuclear", "Gas", "Oil"];
for (const propertyName of propertyNames) {
    const fragment = new IgrStackedFragmentSeries();
    fragment.valueMemberPath = propertyName;
    fragment.title = propertyName;
    stack.series.add(fragment);
}

const xAxis = new IgrNumericXAxis({ name: "xAxis" });
const yAxis = new IgrCategoryYAxis({ name: "yAxis" });
yAxis.label = "Country";

this.chart = new IgrDataChart({ name: "chart" });
this.chart.dataSource = SampleCategoryData.create();
this.chart.axes.add(yAxis);
this.chart.axes.add(xAxis);
this.chart.series.add(stack);