Dash多输入双饼图子图无显示问题求助及代码修复

1. 数据处理逻辑验证 #

• 确认筛选后数据非空：每次选择国家、行业、年份后，检查df_filtered的行数，可在回调中添加print(len(df_filtered))调试，或新增组件显示数据量，避免因筛选条件无匹配数据导致饼图无内容。
• 男女数据分组准确：确保按gender字段拆分数据时取值正确（比如df_male = df_filtered[df_filtered['gender'] == 'Male']，注意大小写匹配），且position字段无空值/NaN。
• 占比计算正确：使用value_counts(normalize=True)*100生成各职位占比，确保返回的Series索引为职位名称、值为百分比，且长度大于0。

2. 回调与组件匹配检查 #

• 回调输出绑定正确：确认Output指向两个dcc.Graph的figure属性，比如Output('male-pie-chart', 'figure')和Output('female-pie-chart', 'figure')，顺序与返回值一致。
• 输入控件全覆盖：回调Input需包含所有筛选控件（国家下拉、行业下拉、年份下拉），保证筛选变化触发图表更新。
• 返回值格式正确：必须返回两个完整的Plotly Figure对象，不能为None或不完整结构。

3. 饼图Figure结构修正 #

饼图的data和layout需符合Plotly规范，空数据场景处理示例如下：

# 男性饼图空数据处理
if male_position_counts.empty:
    male_fig = go.Figure(data=[go.Pie(labels=['无数据'], values=[100])])
    male_fig.update_layout(title='男性各职位占比：无匹配数据')
else:
    male_fig = go.Figure(data=[go.Pie(
        labels=male_position_counts.index,
        values=male_position_counts.values,
        textinfo='percent+label'  # 显示百分比和标签
    )])
    male_fig.update_layout(title='男性各职位占比')

确保labels与values长度一致，无空值。

4. 修正后的核心回调代码 #

假设你的CSV包含country、sector、year、gender、position字段，修正后的完整代码示例：

import dash
from dash import dcc, html, Input, Output
import plotly.graph_objects as go
import pandas as pd

app = dash.Dash(__name__)

# 页面布局
app.layout = html.Div([
    html.Div([
        dcc.Dropdown(
            id='country-dropdown',
            options=[{'label': c, 'value': c} for c in pd.read_csv('data.csv')['country'].unique()],
            value='China'  # 默认值需存在数据中
        ),
        dcc.Dropdown(
            id='sector-dropdown',
            options=[{'label': s, 'value': s} for s in pd.read_csv('data.csv')['sector'].unique()],
            value='Tech'
        ),
        dcc.Dropdown(
            id='year-dropdown',
            options=[{'label': y, 'value': y} for y in pd.read_csv('data.csv')['year'].unique()],
            value=2023
        )
    ], style={'margin': '20px'}),
    html.Div([
        dcc.Graph(id='male-pie-chart'),
        dcc.Graph(id='female-pie-chart')
    ], style={'display': 'flex', 'gap': '20px', 'padding': '0 20px'})
])

@app.callback(
    [Output('male-pie-chart', 'figure'), Output('female-pie-chart', 'figure')],
    [Input('country-dropdown', 'value'), Input('sector-dropdown', 'value'), Input('year-dropdown', 'value')]
)
def update_charts(selected_country, selected_sector, selected_year):
    # 建议将数据读取放在回调外，提升性能
    df = pd.read_csv('data.csv')
    df_filtered = df[(df['country'] == selected_country) & 
                     (df['sector'] == selected_sector) & 
                     (df['year'] == selected_year)]
    
    # 处理男性职位占比
    df_male = df_filtered[df_filtered['gender'] == 'Male']
    male_pos = df_male['position'].value_counts(normalize=True)*100
    if male_pos.empty:
        male_fig = go.Figure(data=[go.Pie(labels=['无数据'], values=[100])])
        male_fig.update_layout(title='男性各职位占比：无数据')
    else:
        male_fig = go.Figure(data=[go.Pie(labels=male_pos.index, values=male_pos.values, textinfo='percent+label')])
        male_fig.update_layout(title='男性各职位占比')
    
    # 处理女性职位占比
    df_female = df_filtered[df_filtered['gender'] == 'Female']
    female_pos = df_female['position'].value_counts(normalize=True)*100
    if female_pos.empty:
        female_fig = go.Figure(data=[go.Pie(labels=['无数据'], values=[100])])
        female_fig.update_layout(title='女性各职位占比：无数据')
    else:
        female_fig = go.Figure(data=[go.Pie(labels=female_pos.index, values=female_pos.values, textinfo='percent+label')])
        female_fig.update_layout(title='女性各职位占比')
    
    return male_fig, female_fig

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

5. 额外排查点 #

• 下拉框默认值需存在于数据中：避免初始筛选无匹配数据，导致饼图显示为空。
• 浏览器控制台检查：按F12打开控制台，查看是否有Plotly渲染相关的JS报错。
• 版本兼容性：确保Pandas、Plotly、Dash版本兼容，避免因版本问题导致渲染失败。

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