React 積層型棒チャート

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

React 積層型棒チャートの例

Edit on CodeSandbox

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

軸の要件

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

データの要件

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

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

モジュールの要件

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

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

コード例

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

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

  <IgrStackedBarSeries 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" />
  </IgrStackedBarSeries>
</IgrDataChart>
const stack = new IgrStackedBarSeries({ 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);