【JavaScript】【React】ReactでChart.jsとchartjs-plugin-zoomを使うには
ReactでChart.jsを使うための、Chart.jsをラップしたreact-chartjs-2というライブラリがあります。このreact-chartjs-2にchartjs-plugin-zoomを組み合わせて使う方法についてまとめてみました。
react-chartjs-2公式
環境
- React@17.0.2
- React-DOM@17.0.2
- react-chartjs-2@3.0.3
- Chart.js@3.3.2
- Hammerjs@2.2.8
- chartjs-plugin-zoom@1.0.1
これらをnpm
ないしyarn
でインストールしておきます。React関連はインストールが面倒なのでcreate-react-app
が簡単です。
react-chartjs-2を使う
react-chartjs-2では、Chart.jsで使用可能なグラフがそれぞれコンポーネント化されています。使用するには、必要なコンポーネントをimport
しておきます。
chartjs-plugin-zoomの組み込み方法
Googleで検索して使用方法を探したものの、見つかった方法がいずれも古い方法のようで上記環境ではうまく動きませでした。そこでchartjs-plugin-zoomの公式ドキュメントに書いてある方法を試したところ、あっさりと組み込めました。
Chart.register()
を使うので、react-chartjs-2
の読み込みにimport Chart
を加えるのを忘れずに。
import Hammer from "hammerjs"
はパン操作、ピンチ操作のために必要なもの。とくに組み込みのためのコードは不要です。なお、react-hammerjs
というものもあるが、これは使えないようでした。
コンポーネントの使用方法
グラフコンポーネントを表示するには、import
したコンポーネントをJSXで記述します。data
とoptions
の2つをコンポーネントに渡す必要があります。
data
とoptions
は、オリジナルのChart.jsにパラメータとして渡すChartオブジェクトのdata
プロパティ、options
プロパティとまったく同じ形式です。
そのため、chartjs-plugin-zoomの関連の設定も同様にoptions.plugins.zoom
に与えます。ズーム操作時の動作を制御するonZoom
等の設定もそのまま使えます。
Chart.js, chartjs-plugin-zoomsに設定するプロパティは、以下のエントリで説明しているので参照のこと。
実装例
一部のコードを以下に示します。実際のソースコードはGitHubのリポジトリにアップしたので、興味のある方はご参照ください。
X軸、Y軸上でホイールによる拡大縮小、ドラッグによるパン操作ができています。
まとめ
ReactでChart.jsとchartjs-plugin-zoomを使う方法をまとめました。react-chartjs-2はChart.jsのラッパーに過ぎないので、Chart.jsでchartjs-plugin-zoomを使うのと同じ方法で問題なさそうです。
ディスカッション
コメント一覧
まだ、コメントがありません