React-chartjs-2：缩放时保持 y 轴缩放静态-PHP中文网问答

微信公众号讲师中心

首页

文章

web3.0 后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端 JavaScript 后端开发数据库移动端运维开发 UI设计计算机基础 XML Web Services

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

最近更新

搜索

web3.0 后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程

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

P粉621033928 2024-01-28 23:46:48

[React讨论组]

1064

当我缩放时间序列图表时，有没有办法禁用 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 轴设置最小/最大值，并且您可以使用它来获得固定轴，但这对我来说不适用，因为我事先不知道我显示的数据是什么，组件是用来显示多个图表的

P粉621033928

全部回复(1)

P粉3688781762024-01-29 16:55:06 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 事件中。