我最近使用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 插件实现了缩放和平移,我将非常感激,请分享您是如何实现这些功能的。或者你可以指出我上面代码中的问题。
最佳答案
为了给基于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),您可以将鼠标指针移动到图表区域,然后向下或向上滚动鼠标。放大后,您可以在向左或向右拖动的同时按住鼠标。
关于reactjs - 在react-chartjs-2中缩放和平移,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46346078/