【React】react-chartjs-2 zoomとpanの書き方
概要
react-chartjs-2でzoomとpan操作をするコードを備忘録として残します。（今回作成したのは折れ線グラフだけです）
ここではzoomプラグインの説明だけでchartjsの説明はしないのでご了承ください。
一応zoomプラグインの公式のURL貼っときます↓
とりあえずコードが欲しい方codesandboxに公開してます。
バージョン
reactやzoomプラグインのバージョンは以下です。
- "chart.js": "3.9.1"
- "chartjs-plugin-zoom": "1.2.1"
- "react": "18.2.0"
- "react-chartjs-2": "4.3.1"
npmの場合以下のようにzoomプラグインをインストールします。
npm install chartjs-plugin-zoom
コードの説明
インポート
まずはインポートについてです。
zoomプラグインに関係するのは14行目と24行目です。これを忘れると動ないので注意して下さい。
オプション
オプションについてです。
zoomプラグインのオプションはpluginsの中に書きましょう(53行目)
zoomオプションのpanはグラフを左右に動かす操作です。デフォルトではマウスのドラッグで操できます。
zoomはグラフの拡大縮小です。
wheelはマウスホイールの操作
pinchは指2本でやる操作です（スマホとかのタッチパネル操作）
modeは"x" "y" "xy"でどの方向への操作を有効にするか決めれます。
APIによる操作
先ほどのオプションで有効にした操作はマウスやタッチ操作だけでした。
APIを使ってボタン操作によってzoom操作もすることが出来ます。
APIを使うには参照が必要なのでuseRefを使います（80行目)
そして104行目のようにref={chartRef}で参照を取得します。
あとは86行目～100行目のようにchartRef.current.でAPIを呼び出して操作できます。
スマホ操作
公式のGetting Startedに書いてる感じではzoomプラグインでスマホ操作(pinchやpan)するにはHammer.jsもインストールする必要があるらしいのですがcodesandboxで試すと無くてもスマホ操作できたのでそこは良くわからないです。
マウスの操作は出来るけどタッチ操作が聞かない場合はHammer.jsをインストールしてみてください。
個人的にハマったとこ
最後に個人的にハマって困ったとこを紹介します。
コードの58,59行目に書いてますがラベルを文字列じゃなくて数値にするとzoomやpanの挙動がおかしくなります。
ぜひcodesandboxで試してみてください。マジでイカれた動きします笑
本記事は以上です。ありがとうございました。
間違いや指摘等あればコメントしていただけると幸いです。
Discussion