reactjs - react-chartjs-2 のズームとパン

Question

最近、react-chartjs-2 ( https://github.com/jerairrest/react-chartjs-2 )を使用してチャート表示を実装しました。

タッチベースの画面でより使いやすくするために、ズームとパン機能を有効にしたいと考えています。この機能を実装するために、react-hammerjsとchartjs-plugin-zoomをインストールしました。

import {Chart, Line} from 'react-chartjs-2';
import Hammer from 'react-hammerjs';
import zoom from 'chartjs-plugin-zoom'

そして、プラグインを登録しました

componentWillMount(){
    Chart.plugins.register(zoom)
}

render メソッドは次のようになります。

render(){
    return <Line data={data} options={options} />
}

パンとズームのオプション:

pan:{
    enabled=true,
    mode:'x'
},
zoom:{
    enabled:true,
    drag:true,
    mode:'xy'
}

これが正しい実装方法だと思います。残念ながら、上記の実装は機能しませんでした。react-chartjs-2プラグインを使用してズームとパンを既に実装している方がいれば、本当に感謝しています。これらの機能をどのように実現したかを共有してください。または、上記のコードの問題を指摘することもできます。

Answer 1

次のように、import 'chartjs-plugin-zoom';ズーム オプションを に追加してから追加する必要があります。options.plugins.zoom

const options = {
  plugins: {
    zoom: {
      pan: {
        enabled: true,
        mode: 'x',
      },
      zoom: {
        enabled: true,
        drag: true,
        mode: 'xy'
      }
    }
  }
};

Answer 2

「hammerjs」からの間違ったハンマーをインポートしました。