如何解决VS Code中Jupyter+ipywidgets参数化绘图无显示问题？

问题详情 #

• 环境：Windows 10 64位、VS Code Jupyter扩展版本57,661,722、IPython 8.9.0、ipywidgets 8.0.4
• 现象：
  • 以下参数化绘图代码在浏览器版Jupyter中可正常显示绘图，但在VS Code中无输出：

    import ipywidgets as widgets
    import numpy as np
    import matplotlib.pyplot as plt
    
    @widgets.interact(freq=(1.0, 10.0))
    def plot(freq=1.0):
        t = np.linspace(-1., +1., 1000)
        fig, ax = plt.subplots(1, 1, figsize=(8, 6))
        ax.plot(t, np.sin(2 * np.pi * freq * t), lw=2, color='blue')
    

  • 但如下简单ipywidgets交互控件在VS Code中可正常工作：

    @widgets.interact
    def f(x=5):
        print(x)
    

• 疑问：这是VS Code Jupyter扩展的普遍缺陷还是自身操作有误？

解决方案 #

这不是操作错误，而是VS Code Jupyter扩展与浏览器版Jupyter在matplotlib绘图渲染机制上的差异导致的。浏览器版Jupyter会自动捕获并显示绘图对象，而VS Code需要显式触发绘图显示，可通过以下两种方法解决：

方法1：在绘图函数末尾添加plt.show() #

修改后的代码：

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

@widgets.interact(freq=(1.0, 10.0))
def plot(freq=1.0):
    t = np.linspace(-1., +1., 1000)
    fig, ax = plt.subplots(1, 1, figsize=(8, 6))
    ax.plot(t, np.sin(2 * np.pi * freq * t), lw=2, color='blue')
    plt.show()  # 显式触发绘图显示

方法2：指定matplotlib的inline后端 #

在代码开头添加%matplotlib inline指令：

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

@widgets.interact(freq=(1.0, 10.0))
def plot(freq=1.0):
    t = np.linspace(-1., +1., 1000)
    fig, ax = plt.subplots(1, 1, figsize=(8, 6))
    ax.plot(t, np.sin(2 * np.pi * freq * t), lw=2, color='blue')

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