Plotly下拉菜单无法按预期更新折线图问题求助

你遇到的问题是下拉菜单切换Grade时，Plotly图表无法动态更新。核心原因有两点：一是直接修改已显示的figure对象不会触发Jupyter的自动重新渲染；二是初始的轨迹更新方式不匹配单个Grade的数据结构（单个Grade仅对应一组min/max值）。

修改后的完整代码 #

import plotly.express as px
import pandas as pd
import ipywidgets as widgets
from IPython.display import display, clear_output

# Sample data
data = {
    'index': [1, 2, 3, 4, 5],
    'Grade': ['STEEL', 'IRON', 'CU', 'ALU', 'BRO'],
    'SIZE': [1, 2, 3, 4, 5],
    'min': [10, 20, 15, 25, 30],
    'max': [30, 40, 35, 45, 50]
}

df = pd.DataFrame(data)

# 创建Output组件管理图表输出
output = widgets.Output()

# 下拉选择组件
grade_dropdown = widgets.Dropdown(
    options=df['Grade'].unique().tolist(),
    value=df['Grade'].unique()[0],
    description='Select Grade:',
)

# 更新图表函数
def update_plot(selected_grade):
    filtered_df = df[df['Grade'] == selected_grade]
    # 重构数据为长格式，适配Plotly折线图的轨迹生成逻辑
    plot_data = pd.DataFrame({
        'index': [filtered_df['index'].values[0], filtered_df['index'].values[0]],
        'value': [filtered_df['min'].values[0], filtered_df['max'].values[0]],
        'type': ['min', 'max']
    })
    # 重新生成图表
    fig = px.line(plot_data, x='index', y='value', color='type',
                  labels={'value': 'Values'}, title=f'min and max Plot for Grade {selected_grade}', 
                  template='plotly_white')
    fig.update_layout(
        xaxis_title='Index',
        yaxis_title='Values',
        legend_title='Type'
    )
    # 清空旧输出并显示新图表
    with output:
        clear_output(wait=True)
        fig.show()

# 下拉菜单变更事件处理
def on_dropdown_change(change):
    update_plot(change['new'])

grade_dropdown.observe(on_dropdown_change, names='value')

# 初始化显示默认Grade的图表
update_plot(grade_dropdown.value)

# 显示组件
display(grade_dropdown, output)

关键改动说明 #

• 使用Output组件：通过widgets.Output()包裹图表输出，确保每次更新都能替换旧图表，触发Jupyter重新渲染。
• 数据结构重构：将单个Grade的min和max值转换为长格式数据，让Plotly能正确生成两条独立的轨迹（min线和max线）。
• 重新生成图表：每次选择新Grade时创建新的figure对象，避免修改已渲染的旧对象导致的更新失效问题。
• 清空输出：用clear_output(wait=True)在显示新图表前清空旧内容，避免图表叠加显示。

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