React 積層型 100 縦棒チャート

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

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

Edit on CodeSandbox

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

軸の要件

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

Required Data

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

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

モジュールの要件

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

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

コード例

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

<IgrDataChart width="100%"
  height="100%"
  dataSource={this.data} >

  <IgrCategoryXAxis name="xAxis" label="Country" />
  <IgrNumericYAxis name="yAxis" minimumValue={0} />
  <IgrStacked100ColumnSeries 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" />
  </IgrStacked100ColumnSeries>
</IgrDataChart>
const stack = new IgrStacked100ColumnSeries({ 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 yAxis = new IgrNumericYAxis({ name: "yAxis" });
const xAxis = new IgrCategoryXAxis({ name: "xAxis" });
xAxis.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);