如何在Dash的Plotly柱状图中添加对应指标的20日滚动平均折线

问题分析 #

你的代码需要调整两个核心点：

• Dropdown初始值设置错误：multi=False时，value必须是单个选项值，不能传入数组df1.columns[:2]
• 未正确绑定滚动平均折线的数据源：add_line()需要明确传入对应指标的滚动平均列数据

修正后的完整代码 #

import dash
from dash import Dash, html, dcc, Output, Input, callback
import plotly.graph_objects as go
import plotly.express as px
import pandas as pd  # 补充缺失的pandas导入

# 假设filepath和filename已提前定义
df1 = pd.read_csv(filepath+filename, index_col="Date")
df1.index = pd.to_datetime(df1.index)

# 计算20日滚动平均
df1["Measure1_SMA"] = df1["Measure1"].rolling(20).mean()
df1["Measure2_SMA"] = df1["Measure2"].rolling(20).mean()

app = Dash(__name__)

# 修正Dropdown的初始值，multi=False时使用单个字符串
my_dropdown = dcc.Dropdown(
    options=['Measure1', 'Measure2'], 
    value='Measure1',  # 初始选中单个指标
    multi=False, 
    style={'width':'50%'}
)

my_graph = dcc.Graph(figure={})

app.layout = html.Div([
    html.H1('Metrics (Values)', style={'textAlign':'center'}),
    html.Label("Metrics: "),
    my_dropdown,
    my_graph
])

@callback(
    Output(component_id=my_graph, component_property='figure'),
    Input(component_id=my_dropdown, component_property='value')
)
def update_graph(dropdown_value):
    # 生成选中指标的柱状图
    plot_figure = px.bar(data_frame=df1, y=dropdown_value, x=df1.index, name=dropdown_value)
    # 动态匹配对应指标的滚动平均列
    sma_column = f"{dropdown_value}_SMA"
    # 添加滚动平均折线图
    plot_figure.add_line(
        x=df1.index, 
        y=df1[sma_column], 
        name=f"{dropdown_value} 20日滚动平均",
        line=dict(color='#ff4500', width=2)  # 自定义折线样式，增强视觉区分度
    )
    # 可选：调整图例布局，避免遮挡图表
    plot_figure.update_layout(legend=dict(orientation="h", yanchor="bottom", y=1.02, xanchor="right", x=1))
    return plot_figure

if __name__ == "__main__":
    app.run_server(debug=True)

关键调整说明 #

• Dropdown初始值修正：multi=False模式下，value必须设置为单个选项字符串，否则会导致页面初始加载异常。
• 动态数据绑定：通过字符串拼接f"{dropdown_value}_SMA"自动匹配选中指标的滚动平均列，确保下拉框切换时折线数据同步更新。
• 可视化优化：自定义折线的颜色和宽度，让柱状图与折线图的视觉层次更清晰，提升图表可读性。

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