0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

はじめての React - ③ Ignite UI for React のチャートを表示させる

Posted at

インフラジスティックス・ジャパン、テクニカル コンサルティング チームの oquiron です。

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

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

#連載目次

  1. 開発環境を整える。
  2. React のアプリケーションを動かしてみる。
  3. "Hello World!" と表示されるように書き換える。(ここまでが前々回の記事「はじめての React ①」)
  4. Ignite UI for React のグリッドを配置する。(これが前回の記事「はじめての React ②」)
  5. 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 コンポーネントを作成します。

![26006613685912339_MyDataChartComponent_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/784790/5b82ab74-666f-7976-17ea-dfe84d8eb132.png)

新規作成した 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;

React.StrictMode の設定を外す。

現在データ チャートは React.StrictMode では動作しません。修正対応中ではありますが、当面の間、React.StrictMode の設定を外すことで動作させることができるようになります。

// src/index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  // <React.StrictMode>
    <App />,
  // </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

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

  • データテーブル
  • 棒グラフ

が表示されていれば OK です!

![26006613685912339_MyDataChartComponent_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/784790/9984d916-7b84-f4ce-5d12-e276c8588dff.png)

最後に

以上、3 回にわたって Hello World から Ignite UI for React のグリッドやチャートの表示まで見てきました。

発展問題として、グリッドもチャートも同じデータを表示していますので、データサービスのようなものを作成してグリッドもチャートもそこからデータを受け取るようにしてみると良いと思います。

この記事に関して何かご質問・ご不明な点がありましたら、お気兼ねなくインフラジスティックスまでお問い合わせください。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?