JupyterLab中Plotly的show与display方法差异：on_change失效问题

核心原因 #

• FigureWidget的运行逻辑：你创建的go.FigureWidget是Jupyter专属的交互式小部件，它绑定的on_change Python回调函数运行在Python内核中，依赖IPython的Widget框架实现前后端通信。用display(fig)或直接输出fig时，Jupyter会将这个小部件嵌入页面，保持和Python内核的连接，所以缩放触发x轴范围变化时，能正常调用Python端的zoom函数更新Y轴。
• fig.show()的渲染机制：fig.show()会把FigureWidget序列化成纯JSON格式的图表数据，再调用独立的前端渲染器（基于Plotly.js）展示。这个过程中，Python端的回调函数不会被打包到JSON里，前端是完全独立的JavaScript环境，无法触发Python内核中的zoom函数，因此回调失效。

解决办法 #

如果想通过fig.show()实现缩放自动适配Y轴的效果，需要用前端JavaScript回调替代Python回调，示例代码如下：

import plotly.graph_objs as go
import pandas as pd
import numpy as np

x = np.linspace(0, 100, 1000)
y = 0.1* x * np.sin(2 * np.pi * 0.1 * x)
df = pd.DataFrame({'Time': x, 'Value': y}).set_index('Time')

# 使用普通Figure替代FigureWidget
fig = go.Figure()
fig.add_trace(go.Scatter(x=df.index, y=df['Value'], mode='lines'))
fig.update_layout(xaxis={'rangeslider_visible': True})

# 添加前端JS回调，监听缩放/平移触发的relayout事件
fig.add_js_event("relayout", """
    function(eventData) {
        if (eventData['xaxis.range']) {
            const xMin = eventData['xaxis.range'][0];
            const xMax = eventData['xaxis.range'][1];
            // 筛选当前x范围内的y值并计算极值
            const yVals = [];
            const xVals = this.data[0].x;
            const yData = this.data[0].y;
            for (let i = 0; i < xVals.length; i++) {
                if (xVals[i] >= xMin && xVals[i] <= xMax) {
                    yVals.push(yData[i]);
                }
            }
            const yMin = Math.min(...yVals);
            const yMax = Math.max(...yVals);
            // 更新Y轴范围
            this.layout.yaxis.range = [yMin, yMax];
        }
    }
""")

fig.show()  # 此时缩放会自动更新Y轴

关键说明 #

• 普通go.Figure配合前端JS回调，能在fig.show()的渲染模式下正常工作，因为逻辑完全在前端JavaScript中运行，不依赖Python内核。
• FigureWidget的Python回调仅在Jupyter Widget环境中生效，适合需要和Python代码联动的场景（比如缩放后触发数据计算、保存等操作）。

内容的提问来源于stack exchange，提问作者GDN