如何正确复现Dash示例库中的Plotly树形图？

一、先对齐依赖版本 #

版本不兼容是常见问题，先安装示例适配的稳定版依赖：

pip install dash==2.9.0 plotly==5.14.0 pandas==1.5.3

二、修复日期解析错误 #

控制台提示日期格式问题，处理方式如下：

• 读取数据时显式指定日期格式，避免自动推断失败：

  df = pd.read_csv('数据集路径', parse_dates=['日期列名'], date_format='%Y-%m-%d')
  

• 如果日期格式有变体（比如带时间戳），用强制转换并忽略无效值：

  df['日期列名'] = pd.to_datetime(df['日期列名'], errors='coerce')
  

三、修正交互与图表配置 #

访问后出现额外报错，重点检查以下几点：

• 核对回调函数的组件ID：确保回调中Input/Output/State的ID和布局中组件ID完全一致（大小写、拼写无误差）。
• 树形图参数校验：确保px.treemap的ids/labels/parents/values对应的数据列无空值，示例配置如下：

  fig = px.treemap(df, 
                   ids='分类ID列',
                   labels='分类名称列',
                   parents='父分类ID列',
                   values='数值列',
                   color='数值列')
  

• 模态框显示逻辑：回调返回的样式属性要准确，点击节点时返回{'display': 'block'}显示模态框，关闭时返回{'display': 'none'}。

四、本地调试技巧 #

• 开启调试模式运行，获取详细报错：

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

• 打开浏览器开发者工具（F12）查看控制台JS报错，定位前端交互或组件加载问题。

五、可运行简化示例 #

如果仍有问题，先测试以下独立运行的代码，确认模态框与树形图交互正常后，再替换目标数据：

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

# 模拟测试数据
df = pd.DataFrame({
    'id': ['A', 'A1', 'A2', 'B', 'B1'],
    'labels': ['分类A', '子分类A1', '子分类A2', '分类B', '子分类B1'],
    'parents': ['', 'A', 'A', '', 'B'],
    'values': [100, 60, 40, 80, 80],
    'date': pd.date_range(start='2023-01-01', periods=5)
})

app = dash.Dash(__name__)

app.layout = html.Div([
    dcc.Graph(id='treemap'),
    # 模态框容器
    html.Div(id='modal', style={
        'display': 'none',
        'position': 'fixed',
        'z-index': 1000,
        'left': 0,
        'top': 0,
        'width': '100%',
        'height': '100%',
        'overflow': 'auto',
        'backgroundColor': 'rgba(0,0,0,0.4)'
    }, children=[
        html.Div(style={
            'backgroundColor': '#fefefe',
            'margin': '15% auto',
            'padding': '20px',
            'border': '1px solid #888',
            'width': '80%'
        }, children=[
            html.Span('×', id='close-modal', style={
                'color': '#aaa',
                'float': 'right',
                'fontSize': '28px',
                'fontWeight': 'bold',
                'cursor': 'pointer'
            }),
            html.Div(id='modal-content')
        ])
    ])
])

@app.callback(
    Output('modal', 'style'),
    Output('modal-content', 'children'),
    Input('treemap', 'clickData'),
    Input('close-modal', 'n_clicks'),
    State('modal', 'style'),
    prevent_initial_call=True
)
def display_modal(click_data, n_clicks, current_style):
    triggered_id = dash.callback_context.triggered[0]['prop_id'].split('.')[0]
    
    if triggered_id == 'treemap' and click_data:
        node_info = click_data['points'][0]
        return {'display': 'block'}, html.Div([
            html.H3(f'{node_info["label"]} 详情'),
            html.P(f'数值: {node_info["value"]}')
        ])
    else:
        return {'display': 'none'}, ''

@app.callback(
    Output('treemap', 'figure'),
    Input('treemap', 'id')
)
def update_treemap(_):
    fig = px.treemap(df,
                     ids='id',
                     labels='labels',
                     parents='parents',
                     values='values',
                     color='values')
    fig.update_layout(margin=dict(t=50, l=25, r=25, b=25))
    return fig

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

内容的提问来源于stack exchange，提问作者Stücke