变焦和潘的反应-图表-2

Question

最近，我使用react chartjs-2 (https://github.com/jerairrest/react-chartjs-2)实现了图表显示。

我希望启用缩放和摇摄功能，这样它将在基于触摸屏的屏幕上更加友好。为了实现这些特性，我安装了Reactive-锤和chartjs-plugin-缩放。

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和缩放选项：

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组件选项中启用缩放和pan

        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. 作为一个例子，你可以将鼠标指针移动到图表区域，然后向下滚动或向上滚动鼠标。一旦放大，你可以保持你的鼠标点击，同时拖动左或右。

Answer 2

pan对象下有一个语法错误，用于启用的属性。

你错误地把=而不是:

代之以：

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

通过以下方式：

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

正如君斌所言：

将锤头as安装为：

npm install hammerjs --save

在组件中，将其导入如下：

import Hammer from "hammerjs";

Answer 3

你输入了错误的锤子，它应该是从“锤子”；