4

我最近使用 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插件实现了缩放和平移，我将非常感激，如果你是如何实现这些功能的，请分享。或者您可以在我上面的代码中指出问题所在。

4

4 回答 4

3

为了向基于 的图表组件添加缩放和平移功能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
...
  1. 以一种缩放方式为例（至少对于 Mac），您可以将鼠标指针移动到图表区域，然后向下或向上滚动鼠标。放大后，您可以在向左或向右拖动时保持鼠标单击。
于 2020-05-23T21:55:47.633 回答
2

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

你错误地把=而不是:

替换这个：

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

和：

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

也正如@Jun Bin 建议的那样：

将hammerjs安装为：

npm install hammerjs --save

在您的组件中，将其导入为：

import Hammer from "hammerjs";
于 2019-02-26T11:54:36.887 回答
0

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

于 2017-10-09T08:00:42.270 回答
0

您需要添加import 'chartjs-plugin-zoom';然后将缩放选项添加到options.plugins.zoom中，例如：

const options = {
  plugins: {
    zoom: {
      pan: {
        enabled: true,
        mode: 'x',
      },
      zoom: {
        enabled: true,
        drag: true,
        mode: 'xy'
      }
    }
  }
};
于 2020-08-04T07:43:10.613 回答