React 縦棒チャート

Ignite UI for React 縦棒チャートはカテゴリ チャートのグループに属し、チャートの下から上へデータポイントの値に向かって伸びる長方形のコレクションを使用して描画されます。IgrColumnSeries は時間毎のデータの変化や複数の項目を比較する場合に用いられます。値は y 軸に表示され、カテゴリは x 軸に表示されます。IgrColumnSeriesIgrBarSeries と同じデータプロットの概念を使用しますが、データポイントは垂直線(y軸)ではなく水平線(x軸)に沿って引き伸ばされます。つまり、縦棒シリーズは棒シリーズのように描画されますが、反時計回りに 90 度回転されます。

React 縦棒チャートの例

Edit on CodeSandbox

軸の要件

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

データの要件

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

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

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

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

モジュールの要件

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

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

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

コード例

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

 <IgrDataChart
    dataSource={this.state.dataSource}
    width="700px"
    height="500px">
    {/* axes */}
    <IgrCategoryXAxis name="xAxis" label="Year" />
    <IgrNumericYAxis  name="yAxis" />
    {/* series */}
    <IgrColumnSeries
        name="series1"
        xAxisName="xAxis"
        yAxisName="yAxis"
        valueMemberPath="USA" />
 </IgrDataChart>
const series1 = new IgrColumnSeries({ name: "series1" });
series1.valueMemberPath = "USA";
series1.xAxisName = "xAxis";
series1.yAxisName = "yAxis";

const yAxis = new IgrNumericYAxis({ name: "yAxis" });
const xAxis = new IgrCategoryXAxis({ name: "xAxis" });
xAxis.label = "Year";

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(series1);

その他のリソース