javascript react プログラミング 開発ノウハウ

Plotly.jsを使ってReactコンポーネント内にチャートを表示する

投稿日:

こんにちは、mabuiです。
Reactで作っている仮想通貨の情報を表示するサンプルにルーティングを導入して、
通貨ごとの個別ページに何を表示しようか考えたところ、
チャートを表示することにしました。
今回はその時に使用したPlotly.jsでのチャート実装方法を紹介します。

 
 

動作イメージ


30日分の日足を描画した、シンプルなチャートです。
各足の情報が見れるのと、好きな範囲で期間を狭めたりもできます。

 
 

Plotly.jsとは


Plotly.js
おしゃれなグラフを表示できるJavaScriptのライブラリです。
グラフ描画のライブラリは複数ありますが、
インタラクティブ性が高いチャートグラフを表示したかったのと、
以前Python版のPlotly.pyを使用していたのでこちらを使用することにしました。

 
 

actionクラスにチャート描画のロジック作成

actions/detail.js

描画ロジック用にactionクラスを作成しました。
Candlestick Charts in plotly.js
基本的にこちらのPlotlyドキュメントを参考にして、
ドキュメント上で固定値に設定されている値動きのデータに対して、
coingeckoのapiから時系列の値動きデータを引っ張ってきて当て込んでいます。
apiのidには、coinmarketcapからひっぱてきたwebsite_slug(通貨名)
が情報一致していたので使用する荒技を行なっていますが、
サンプルなので良しとします。
coinmarketcapだと値動きデータは有料になってしまいます。

 

Plotlyのapiリファレンスを参考に、レイアウトの変更ができます。
サンプルではlayoutのプロパティにtitleを追加して、
グラフ上部に通貨名を表示しています。

 

actionでは最後にPlotly.newPlotメソッドを呼び出しています。
このメソッドはhtml要素を第一引数に指定して、その要素内に
新しく生成したグラフ情報を渡します。

 
 

コンポーネントの作成

components/detail.js

Plotly.newPlotメソッドで指定したid="plot”のdiv要素を用意して
チャートグラフをレンダリングしています。
要素を直接指定しているので、state, propsにグラフの情報を持たせる必要はなく、
actionのplotメソッドを呼び出して実行するのみでグラフが表示されます。

 

今回作成したコードのGitHubはこちらです。

-javascript, react, プログラミング, 開発ノウハウ
-, , ,

Copyright© 仮想通貨始めました , 2018 All Rights Reserved Powered by STINGER.