JupyterLab中ipywidgets Output组件无法正确渲染Matplotlib图表

在JupyterLab的两个单元格中运行以下代码时出现显示异常：

单元格1代码： #

%matplotlib widget
import ipywidgets as widgets
import matplotlib.pyplot as plt
import numpy as np

output = widgets.Output()
x = np.linspace(0, 2 * np.pi, 100)

with output:
    print('Print works as expected.')
    fig, ax = plt.subplots()
    
line, = ax.plot(x, np.sin(x))

单元格2代码： #

int_slider = widgets.IntSlider(value=1, min=0, max=10, step=1)

def update(change):
    line.set_ydata(np.sin(change.new * x))
    # fig.canvas.draw() # This is not needed for update for some reason

int_slider.observe(update, 'value')
widgets.HBox([int_slider, output])

实际现象： #

• 图表显示在单元格1下方，滑块与文本显示在单元格2下方
• 尝试%matplotlib notebook时：图表从单元格1消失，滑块和文本正常显示，但出现“Javascript Error: IPython is not defined”错误
• 尝试%matplotlib inline时：图表固定显示在单元格1，且无法跟随滑块更新

需求： #

让Matplotlib图表像print语句一样，遵循Output组件的上下文，所有内容都显示在单元格2下方。

核心问题是plt.plot()操作没有放在output的上下文管理器中执行，导致图表脱离了Output组件的管控。修改方式如下：

修改后的单元格1代码： #

%matplotlib widget
import ipywidgets as widgets
import matplotlib.pyplot as plt
import numpy as np

output = widgets.Output()
x = np.linspace(0, 2 * np.pi, 100)

with output:
    print('Print works as expected.')
    fig, ax = plt.subplots()
    # 将plot操作移到output上下文内，让图表被Output组件捕获
    line, = ax.plot(x, np.sin(x))

单元格2代码保持不变： #

int_slider = widgets.IntSlider(value=1, min=0, max=10, step=1)

def update(change):
    line.set_ydata(np.sin(change.new * x))

int_slider.observe(update, 'value')
widgets.HBox([int_slider, output])

补充说明： #

• %matplotlib widget是适配Jupyter交互式组件的后端，无需手动调用fig.canvas.draw()，组件会自动响应更新
• 所有与图表创建、绘制相关的操作必须放在with output:块内，才能让图表被Output组件统一管理，和print内容一起显示在指定位置
• 全程保持使用%matplotlib widget后端，避免混合不同后端引发JS错误

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