Dash仪表盘问题：统计下拉框仅显示一项且图表无法渲染

核心问题修复说明 #

1. 统计类型下拉框选项缺失 #

原代码中下拉框的options参数错误地将两个选项合并到同一个字典内，导致第一个选项被覆盖。修复后拆分为两个独立的字典元素：

options=[
    {'label':'年度统计报告','value':'Yearly Statistics Report'},
    {'label':'衰退期统计报告', 'value':'Recession Period Statistics'}
]

2. 图表渲染错误修复 #

• 年度统计模块：
  • 补全Y_chart3中px.bar调用的闭合括号；
  • 给Y_chart4的px.pie传入数据源exp_data；
  • 修正代码缩进，确保逻辑块层级正确。
• 衰退期统计模块：
  • 修正R_chart4的标题，使其匹配图表内容（失业率对不同车型销量的影响）。

修正后的完整代码 #

import dash
from dash import dcc
from dash import html
from dash.dependencies import Input, Output
import pandas as pd
import plotly.express as px

# 加载数据
data = pd.read_csv('https://cf-courses-data.s3.us.cloud-object-storage.appdomain.cloud/IBMDeveloperSkillsNetwork-DV0101EN-SkillsNetwork/Data%20Files/historical_automobile_sales.csv')

# 初始化Dash应用
app = dash.Dash(__name__)
app.title = "汽车销售统计仪表盘"

# 年份列表
year_list = [i for i in range(1980, 2024, 1)]

# 应用布局
app.layout = html.Div([
    # 仪表盘标题
    html.H1("汽车销售统计仪表盘",
            style={'textAlign':'center','color':'#503D36','font-size':24}),
    # 统计类型下拉框
    html.Div([
        html.Label("选择统计类型:"),
        dcc.Dropdown(
            id='dropdown-statistics',
            options=[
                {'label':'年度统计报告','value':'Yearly Statistics Report'},
                {'label':'衰退期统计报告', 'value':'Recession Period Statistics'}
            ],
            value='Yearly Statistics Report',
            placeholder='选择报告类型'
        )
    ]),
    # 年份选择下拉框
    html.Div(dcc.Dropdown(
            id='select-year',
            options=[{'label': i, 'value': i} for i in year_list],
            value=2000
        )),
    # 图表输出容器
    html.Div([
        html.Div(id='output-container', className='chart-grid', style={'display':'flex'})
    ])
])

# 回调：控制年份下拉框显示/隐藏
@app.callback(
    Output(component_id='select-year', component_property='style'),
    Input(component_id='dropdown-statistics',component_property='value'))
def update_input_container(dropdown_statistics):
    if dropdown_statistics =='Yearly Statistics Report': 
        return {'display':'block'}
    else: 
        return {'display':'none'}

# 回调：更新图表内容
@app.callback(
    Output(component_id='output-container', component_property='children'),
    [Input(component_id='select-year', component_property='value'), 
     Input(component_id='dropdown-statistics', component_property='value')])
def update_output_container(select_year,dropdown_statistics):
    if dropdown_statistics == 'Recession Period Statistics':
        # 筛选衰退期数据
        recession_data = data[data['Recession'] == 1]
        
        # 图表1：衰退期年度平均销量波动
        yearly_rec = recession_data.groupby('Year')['Automobile_Sales'].mean().reset_index()
        R_chart1 = dcc.Graph(figure=px.line(yearly_rec,
                                            x='Year',
                                            y='Automobile_Sales',
                                            title='衰退期汽车平均销量年度波动'))

        # 图表2：衰退期各车型平均销量
        average_sales = recession_data.groupby('Vehicle_Type')['Automobile_Sales'].mean().reset_index()                           
        R_chart2 = dcc.Graph(figure=px.line(average_sales,
                                            x='Vehicle_Type',
                                            y='Automobile_Sales',
                                            title='衰退期各车型平均汽车销量'))
        
        # 图表3：衰退期各车型广告总支出占比
        exp_rec = recession_data.groupby('Vehicle_Type')['Advertising_Expenditure'].sum().reset_index()
        R_chart3 = dcc.Graph(figure=px.pie(exp_rec, 
                                           values='Advertising_Expenditure',
                                           names='Vehicle_Type',
                                           title='衰退期各车型广告总支出占比'))

        # 图表4：失业率对各车型销量的影响
        unemp_rec = recession_data.groupby(['Unemployment_Rate','Vehicle_Type'], as_index=False)['Automobile_Sales'].mean()
        R_chart4 = dcc.Graph(figure=px.bar(unemp_rec, 
                                           x='Unemployment_Rate', 
                                           y='Automobile_Sales', 
                                           hue='Vehicle_Type',
                                           title='失业率对不同车型销量的影响'))

        return [
            html.Div(className='chart-item', children=[R_chart1, R_chart2], style={'display':'flex'}),
            html.Div(className='chart-item', children=[R_chart3, R_chart4], style={'display':'flex'})
        ]

    elif dropdown_statistics == 'Yearly Statistics Report' and select_year: 
        # 筛选指定年份数据
        yearly_data = data[data['Year'] == int(select_year)]
        
        # 图表1：全年度汽车平均销量趋势
        yas = data.groupby('Year')['Automobile_Sales'].mean().reset_index()
        Y_chart1 = dcc.Graph(figure=px.line(yas, 
                                            x='Year',
                                            y='Automobile_Sales',
                                            title='年度汽车平均销量趋势'))
            
        # 图表2：月度汽车总销量趋势
        mon = data.groupby('Month')['Automobile_Sales'].sum().reset_index()
        Y_chart2 = dcc.Graph(figure=px.line(mon, 
                                            x='Month',
                                            y='Automobile_Sales',
                                            title='月度汽车总销量趋势'))

        # 图表3：指定年份各车型平均销量
        avr_vdata = yearly_data.groupby('Vehicle_Type')['Automobile_Sales'].mean().reset_index()
        Y_chart3 = dcc.Graph(figure=px.bar(avr_vdata,
                                           x='Vehicle_Type', 
                                           y='Automobile_Sales',
                                           title=f'{select_year}年各车型平均销量'))

        # 图表4：指定年份各车型广告总支出占比
        exp_data = yearly_data.groupby('Vehicle_Type')['Advertising_Expenditure'].sum().reset_index()
        Y_chart4 = dcc.Graph(figure=px.pie(exp_data,
                                           values='Advertising_Expenditure', 
                                           names='Vehicle_Type',
                                           title=f'{select_year}年各车型广告总支出占比'))

        return [
            html.Div(className='chart-item', children=[Y_chart1, Y_chart2], style={'display':'flex'}),
            html.Div(className='chart-item', children=[Y_chart3, Y_chart4], style={'display':'flex'})
        ]
        
    else:
        return None

# 运行应用
if __name__ == '__main__':
    app.run_server(debug=True)

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