缩放时未触发onZoom

Question

我使用react-chartjs-2和一个名为chartjs-plugin-zoom的插件制作了一个折线图。缩放图表时，我想在控制台中显示缩放级别。然而，在缩放时，onZoom似乎没有被触发或调用，因为我在控制台面板中看不到任何更新。我想问一下onZoom的语法是否错误，我该如何修复？

在线示例

https://codesandbox.io/s/musing-frost-m6fuz?file=/src/App.js

Answer 1

这是因为您在options对象中将onZoom回调放错了位置。你把它放在缩放插件配置的根目录下，而它必须在缩放部分进行配置，所以在这个命名空间中：options.plugins.zoom.zoom.onZoom

https://codesandbox.io/s/happy-forest-9mtii?file=/src/App.js

Answer 2

您已将onZoom放置在错误的嵌套对象中。如果你把onZoom函数放在插件缩放缩放对象内，它就会工作。

https://codesandbox.io/s/lively-river-zry93?file=/src/App.js:3038-3538

plugins: {
zoom: {
zoom: {
wheel: {
enabled: true
},
mode: "x",
onZoom: function ({ chart }) {
console.log(`I'm zooming!!!`);
},
// Function called once zooming is completed
onZoomComplete: function ({ chart }) {
console.log(`I was zoomed!!!`);
}
},
}