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(){
    return <Line data={data} options={options} />
}

平移和缩放选项:

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

我想这是正确的实现方法。不幸的是，上述实现并没有奏效。如果你们中的一些人已经使用 react-chartjs-2 插件实现了缩放和平移，我将非常感激，请分享您是如何实现这些功能的。或者你可以指出我上面代码中的问题。

Answer 1

为了给基于react-chartjs-2的图表组件添加缩放和平移功能，您可以按照如下步骤操作:

第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({ dailyDataSets }) {
  const lineChart = dailyDataSets[0] ? (
    <Line
      data={{
        labels: dailyDataSets.map(({ date }) => date),
        datasets: [
          {
            data: dailyDataSets.map((data) => data.attr1),
            label: 'First data set',
            borderColor: 'red',
            fill: true,
          },
          {
            data: dailyDataSets.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>;
}

<小时/>备注:

1. 您不必显式安装 hammerjs，因为它会通过安装 chartjs-plugin-zoom 作为其依赖项而自动包含在内，如下所示:

$ npm ls
...
├─┬ chartjs-plugin-zoom@0.7.7
│ └── hammerjs@2.0.8
...

例如，缩放的一种方法(至少对于 Mac)，您可以将鼠标指针移动到图表区域，然后向下或向上滚动鼠标。放大后，您可以在向左或向右拖动的同时按住鼠标。