React-chartjs-2：缩放时保持 y 轴缩放静态

Question

当我缩放时间序列图表时，有没有办法禁用 y 轴的自动缩放？

您可以在此处观察行为：https://codesandbox.io/s/react-chartjs-2-line-zoom-pan-9cz0eh 当您缩放时，y 轴将缩放，以便数据占据所有 y 轴空间。

我的缩放插件如下所示：

plugins = Object.assign({
        "title": {
            display: true,
            text: title,
            align: "start"
        },
        "legend": {
            position: "bottom",
        },
        "zoom": {
            zoom: {
                wheel: {
                    enabled: true,
                },
                pinch: {
                    enabled: true
                },
                mode: 'x',
            },
            pan: {
                enabled: true,
                mode: 'x',

            }
        }, ect ...
          )}

然后我的插件变量存储在 options 中，我像这样返回我的图表：

return (
        <div>
            <Chart ref={canvas} id={id ?? null} type={type} data={data} options={options} />
        </div>
    )

我在文档中发现，您可以为 y 轴设置最小/最大值，并且您可以使用它来获得固定轴，但这对我来说不适用，因为我事先不知道我显示的数据是什么，组件是用来显示多个图表的

Answer 1

您可以设置 y 轴的 min 和 max 而无需先验知道实际值：

function freezeAxis(scale) {
  scale.options.min = scale.min;
  scale.options.max = scale.max;
}

这会将用户最小值和最大值设置为当前值，并且应该在图表渲染后（或至少计算其布局）后调用。

如果要接收新数据或进行其他类型的更新，您还可以“解冻”轴：

function unfreezeAxis(scale) {
  scale.options.min = null;
  scale.options.max = null;
}

在此你的codesandbox的fork我在每次缩放和平移发生之前和之后使用了这些函数 - 使用 onZoomStart、onZoomComplete、onPanStart 和 onPanComplete 用于用户事件（捏或滚轮）以及任何编程缩放/平移调用之前和之后，它不会调用事件处理程序。

这相当麻烦，并且应该考虑在应用程序的逻辑上“冻结”和可能的“解冻”。例如， 这个分支实现了与之前相同的效果，只是在代码中“冻结”y 轴一次，即在广播到插件的 afterLayout 事件中。