はじめての React - ③ Ignite UI for React のチャートを表示させる - インフラジスティックス・ジャパン株式会社Blog

こんにちは！インフラジスティックス・ジャパン、テクニカルコンサルティングチームの石橋です。

「はじめての React」シリーズでは React が初めての人向けに React のアプリケーションの作成方法を順に説明したいと思います。Hello World から始めてインフラジスティックス製品の Ignite UI for React のグリッドやチャートを配置するところまでを目指します。

この記事は第 3 回目。最終回です。Ignte UI for React のチャートを表示させるところまで進めていきます。

連載目次

開発環境を整える。
React のアプリケーションを動かしてみる。
"Hello World!" と表示されるように書き換える。（前々回の「はじめての React ①」はここまで）
Ignite UI for React のグリッドを配置する。（前回の「はじめての React ②」はここ）
Ignite UI for React のチャートを配置する。（←今回はここ）

前回までに作成したアプリケーションに付け足す形で進めます。今回この記事が初めてという場合は、あらかじめ、前々回と前回の記事を見ながら、アプリケーションを作成してください。

5. Ignite UI for React のチャートを配置する。

Ignite UI for React のチャートはデータをグラフ形式で表示することができます。今回は、データチャートを使用して、グリッドに表示したデータを棒グラフで表示させてみましょう。

データチャートに必要なパッケージをインストールする。

データチャートに必要なパッケージは以下の 2 つです。

igniteui-react-core
igniteui-react-charts

npm の install コマンドを使用してインストールします。プロンプトで次のコマンド順にを実行します。

> npm install --save igniteui-react-core
> npm install --save igniteui-react-charts

MyDataChart コンポーネントを作成する。

前回の「はじめての React - ① Hello World」で HelloWorld コンポーネントを作成したのと同じ手順で、src フォルダーの直下に MyDataChart コンポーネントを作成します。

f:id:tekoriko:20210205161035p:plain

新規作成した MyDataChart.tsx を開き、以下のコードを貼り付け、保存します。

// src/MyDataChart.tsx
import * as React from 'react';

// ①IgrDataChartに必要なモジュールをインポートする。
// 軸のモジュール
import { IgrNumericYAxis } from 'igniteui-react-charts';
import { IgrCategoryXAxis } from 'igniteui-react-charts';
// シリーズのモジュール
import { IgrColumnSeries } from 'igniteui-react-charts';
// データチャートのモジュール
import { IgrDataChart } from 'igniteui-react-charts';
import { IgrDataChartCoreModule } from 'igniteui-react-charts';
import { IgrDataChartCategoryModule } from 'igniteui-react-charts';

// ②IgrDataChartに必要なモジュールを登録する。
IgrDataChartCoreModule.register();
IgrDataChartCategoryModule.register();

// ③Reactのコンポーネントを拡張してMyDataChartクラスコンポーネントを定義する。
export default class MyDataChart extends React.Component {
    public data: any[];

    // ④MyDataChartクラスコンポーネントのコンストラクター
    constructor(props: any) {
        super(props);

        // ⑤IgrDataChartに表示するデータを生成する。
        this.data = [
            {"Year": "1920", "Population": 55963053 },
            {"Year": "1930", "Population": 64450005 },
            {"Year": "1940", "Population": 73114308 },
            {"Year": "1950", "Population": 84114574 },
            {"Year": "1960", "Population": 94301623 },
            {"Year": "1970", "Population": 104665171 },
            {"Year": "1980", "Population": 117060396 },
            {"Year": "1990", "Population": 123611167 },
            {"Year": "2000", "Population": 126925843 },
            {"Year": "2010", "Population": 128057352 },
        ];
    }

    // ⑥MyDataChartクラスコンポーネントの描画を実装する。
    public render() {
      return(
          <div style={{margin: "1em"}}>
            {/*
              ⑦IgrDataChartを配置する。
            */}
            <IgrDataChart
              dataSource={this.data}
              width="100%"
              height="300px">
              {/* 軸 */}
              <IgrCategoryXAxis name="xAxis" label="Year" />
              <IgrNumericYAxis  name="yAxis" minimumValue="0" />
              {/* シリーズ */}
              <IgrColumnSeries
                name="series1"
                xAxisName="xAxis"
                yAxisName="yAxis"
                valueMemberPath="Population" />
              </IgrDataChart>
            </div>
        );
    }
}

MyDataChart コンポーネントを画面に配置する。

HelloWorld コンポーネントを画面に配置したときと同じように、src/App.jsx を開いて MyDataChart コンポーネントのインポートと配置をします。

// src/App.tsx
import React from 'react';
import HelloWorld from './HelloWorld';
import './App.css';

import MyGrid from './MyGrid';
import MyDataChart from './MyDataChart';  // ①MyDataChartコンポーネントをインポートする。

function App() {
    return (
        <div className="App">
          {/* <HelloWorld /> */}  {/* HelloWorldはもう不要なのでコメントアウトしています。 */}
          <MyGrid />
          <MyDataChart /> {/* ②MyDataChartコンポーネントを画面上に配置する。 */}
          <div>
            *データソース:
            総務省 平成27年国勢調査 最終報告書「日本の人口・世帯」統計表 より
          </div>
        </div>
    )
}

export default App;

ファイルをすべて保存して、プロンプトを開き、"npm start" を実行します。ブラウザーに