javascript - 缩放时未触发 onZoom

Question

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

在线示例

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

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