添加update_graph()函数后Dash图表空白问题求助（Jupyter环境）

问题描述 #

在Jupyter Notebook中使用Dash开发应用，期望通过RangeSlider组件更新柱状图的X轴范围。滑块可正常交互，但图表始终显示空白（截图：）。相关代码如下：

import os
from dash import Dash, dcc, html, Input, Output 
import pandas as pd
import psycopg2
import psycopg2.extras
import keyring
import plotly 
import plotly.express as px

#------------------------------------------------------------------------------
# 连接到公司数据库，构建DataFrame并保存到变量'df'
#'df'包含两列：df.start_year和df.members_joined 
#------------------------------------------------------------------------------
# 启动应用 
app_name = 'dash-postgresqldataplot'
  
app = Dash(__name__)
app.title = 'Membership Trends'

#------------------------------------------------------------------------------
# 创建Dash布局 
app.layout = html.Div([
    # 标题和说明文本
    html.Div([
        html.H1("这是我的第一个交互式仪表盘！"),
        html.P("使用范围滑块和回调函数更新Plotly柱状图的日期范围")
    ],
        style = {'padding' : '50px' ,
                              'backgroundColor' : '#3aaab2'}),
   # 添加图表
    dcc.Graph(
    id='the_graph'
    ),
    
   # 范围滑块 
    dcc.RangeSlider(
                    min= df['start_year'].min(),
                    max= df['start_year'].max(),
                    step=None,
                    value=[2014,2021], #初始默认值
                    marks= {2014:'2014',2015:'2015',2016:'2016',2017:'2017',2018:'2018',
                            2019:'2019',2020:'2020',2021:'2021'},
                    allowCross=False,
                    id='the_slider'
                   )
        
])
#------------------------------------------------------------------------------   
# 添加回调函数，关联范围滑块与图表输出 
@app.callback(
    Output('the_graph', 'figure'),
    Input('the_slider', 'value'))
    
def update_graph(years_chosen):
    # 过滤数据
    dff = df[(df.start_year >= years_chosen[0]) & (df.start_year <= years_chosen[1])]   
    # 更新图表
    barchart = px.bar(
        dff,
        x="year",
        y="mems"
    )

    return (barchart)

# 启动服务
if __name__ == '__main__':
    app.run_server(debug=False)

问题原因与解决方案 #

核心错误：列名不匹配 #

代码注释明确说明df包含的列是start_year和members_joined，但在回调函数的px.bar()中，使用了x="year"和y="mems"——这两个列名在DataFrame中不存在，导致Plotly无法找到数据渲染图表。

修改回调函数中的柱状图代码，将列名替换为实际存在的字段：

def update_graph(years_chosen):
    # 过滤数据
    dff = df[(df.start_year >= years_chosen[0]) & (df.start_year <= years_chosen[1])]   
    # 更新图表：使用正确的列名
    barchart = px.bar(
        dff,
        x="start_year",
        y="members_joined"
    )

    return barchart

额外检查建议 #

• 验证数据过滤逻辑：在回调中添加print(dff)，查看过滤后的DataFrame是否包含数据，确认滑块选择的年份范围在df.start_year的取值范围内。
• 检查初始滑块值：确保value=[2014,2021]与df['start_year'].min()和df['start_year'].max()的实际值匹配，避免初始状态下过滤后无数据。
• 启用调试模式：将app.run_server(debug=False)改为debug=True，Dash会在浏览器控制台输出错误信息，帮助快速定位问题。

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