インフラジスティックス・ジャパン、テクニカル コンサルティング チームの oquiron です。
「はじめての 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 コンポーネントを作成します。
![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 のグリッドやチャートの表示まで見てきました。
発展問題として、グリッドもチャートも同じデータを表示していますので、データサービスのようなものを作成してグリッドもチャートもそこからデータを受け取るようにしてみると良いと思います。
この記事に関して何かご質問・ご不明な点がありましたら、お気兼ねなくインフラジスティックスまでお問い合わせください。