缩放时不触发 onZoom

Question

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

在线示例

https://codesandbox.io/s/ecstatic-bas-j485o?file=/src/App.js:3548-3560

Answer 1

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

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

Answer 2

您将 onZoom 放置在错误的嵌套对象中。 如果您将 onZoom 函数放在 plugins-zoom-zoom 对象中，它将起作用。

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!!!`);
                  }
                },
}