Jupyter使用ipywidgets实现滑块交互股票图表重复绘图问题求解

问题成因 #

• %matplotlib inline 模式下调用plt.subplots()创建画布后，Jupyter会默认自动输出一次静态画布，这是无法同步更新的第一张图的来源
• 交互函数内主动调用display(fig)和interactive_output的输出绑定逻辑重复，生成了第二张图

修复要点 #

1. 补全缺失的ipywidgets模块导入
2. 创建画布后调用plt.close(fig)关闭Jupyter默认自动渲染的静态画布
3. 移除交互函数内的display(fig)调用，由interactive_output统一管理画布输出

修复后完整代码 #

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

df = pd.read_csv('all_stocks_5yr.csv')
df_apple = df[df['Name'] == 'AAPL'].copy()
df_apple['date'] = pd.to_datetime(df_apple['date'])
df_apple.reset_index(inplace = True)

bars_to_display = 60
step = widgets.IntSlider(value=0, min=0, max=len(df_apple)-bars_to_display)

val_array = []
for idx, val in df_apple.iterrows():
    val_array.append(val)
    
x = np.arange(0, len(df_apple))

fig, (ax, ax2) = plt.subplots(2, figsize = (12, 8), gridspec_kw = {'height_ratios': [4, 1]}, sharex = True)
# 关闭默认自动渲染的画布，避免重复显示
plt.close(fig)

def f(step):
    ax.cla()
    ax2.cla()
    
    for i in range(step, bars_to_display + step):
        color = '#2CA453'
        if val_array[i]['open'] > val_array[i]['close']:
            color = '#F04730'
        ax.plot([x[i], x[i]], [val_array[i]['low'], val_array[i]['high']], color = color)
        ax.plot([x[i], x[i] - 0.1], [val_array[i]['open'], val_array[i]['open']], color = color)
        ax.plot([x[i], x[i] + 0.1], [val_array[i]['close'], val_array[i]['close']], color = color)
        ax2.bar(x[i], val_array[i]['volume'], color = 'lightgrey')

display(step)
out = widgets.interactive_output(f, {'step': step})
display(out)

实现效果 #

内容的提问来源于stack exchange，提问作者Hugo Araújo