目次
Reactは今後より重要になってくるフロントエンド技術の中でも最もポピュラーに使用されているフレームワークであり、その利用するメリットはたくさんあります。 中でも、従来のJavaScriptよりもリアクティブでスムーズな動きを実現することができることは非常に魅力的な点だと言えます。 今回は実際に、その大きな特徴であるスムーズな動きを ReactのライブラリであるReact ApexChartsを用いてリアルタイムにグラフを描画できるようにしてみましょう。
ライブラリのインストール
まずはライブラリのインストールをします。 (既存のReactの開発環境は構築している前提）
$ npm install --save react-apexcharts apexcharts
ComponentディレクトリにApp.jsファイルを作成し、Appコンポーネントを作成していきます。 このコンポーネントはReact ApexChartsの公式ドキュメントに記載されている手順を参考にしています。
グラフの描画
categoriesに横軸の値となるものを入れていき、seriesに実際にグラフで描画するためのデータを入れていきます。 値を入れた変数をChartコンポーネントの中に入れていくことで値を受け渡します。 今回はtypeをlineとすることで折れ線グラフにしています。 他にも様々なtypeがあり、barとすると棒グラフ、donutsであればドーナツ型の円グラフなどを設定することができます。
実際にグラフを描画してみるとこのように表示することができます。 値を変更することでリアルタイムにグラフを変化させることができます。
まとめ
今回はReact ApexChartというライブラリを使用して、リアルタイムにグラフを表示してみました。 Reactの強みであるリアクティブな動きをより活かして実際の開発にも使ってみたいですね。
