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

pan对象下的[[已启用属性存在语法错误。

您误输入了=而不是:

替换为：

pan:{
  enabled=true,
  ...
},

使用：
pan:{
  enabled:true,
  ...
},

还有@Jun Bin的建议：
将
hammerjs

安装为：npm install hammerjs --save

并且在您的组件中，将其导入为：
import Hammer from "hammerjs";

Answer 2

您从“ hammerjs”导入了错误的锤子；

Answer 3

步骤1：您需要安装chartjs-plugin-zoom

npm install chartjs-plugin-zoom

步骤2：导入chartjs-plugin-zoom
import 'chartjs-plugin-zoom';

步骤3：在ChartJS组件选项中启用缩放和平移
        zoom: {
          enabled: true,
          mode: 'x',
        },
        pan: {
          enabled: true,
          mode: 'x',
        },

是。所以现在您的图表组件应如下所示：
import React from 'react';
import { Line } from 'react-chartjs-2';
import 'chartjs-plugin-zoom';


export default function TimelineChart({ dataSets }) {

  const lineChart = dataSets[0] ? (
    <Line
      data={{
        labels: dataSets.map(({ date }) => date),
        datasets: [
          {
            data: dataSets.map((data) => data.attr1),
            label: 'First data set',
            borderColor: 'red',
            fill: true,
          },
          {
            data: dataSets.map((data) => data.attr2),
            label: 'Second data set',
            borderColor: 'green',
            fill: true,
          },
        ],
      }}
      options={{
        title: { display: true, text: 'My Chart' },
        zoom: {
          enabled: true,
          mode: 'x',
        },
        pan: {
          enabled: true,
          mode: 'x',
        },
      }}
    />
  ) : null;

  return <div>{lineChart}</div>;
}

 
注意：您不必显式安装hammerjs，因为通过安装chartjs-plugin-zoom作为其依赖项将自动包含它，请参见下文：
$npm ls
...
├─┬ [email protected]
│ └── [email protected]
...