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 插件实现了Zooming和Panning，我将非常感激，请分享一下你是如何实现这些功能的。或者您可以在上面的代码中指出问题。

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>;
}

注意：

您无需显式安装hammerjs，因为通过安装chartjs-plugin-zoom作为其依赖项将自动包含它，请参见下文：

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

以一种缩放方式为例（至少对于Mac而言），可以将鼠标指针移到图表区域，然后上下滚动鼠标。放大后，您可以在向左或向右拖动时按住鼠标。

Answer 2

你从＃34; hammerjs＆＃34;;

输入了错误的锤子

Answer 3

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

您误输入了=而不是:

替换此：

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

使用：

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

还有@Jun Bin建议：

将 hammerjs 安装为：

npm install hammerjs --save

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

import Hammer from "hammerjs";

Answer 4

您需要添加jo.get("nodes").getAsJsonObject().entrySet() .forEach(node -> node.getValue().getAsJsonObject().get("tasks").getAsJsonObject().entrySet() .forEach(task -> { int i = task.getValue().getAsJsonObject().get("status").getAsJsonObject().get("total").getAsInt(); System.out.println(i); }))，然后在import 'chartjs-plugin-zoom';中添加缩放选项，例如：

options.plugins.zoom

在react-chartjs-2中缩放和平移

4 个答案: