Plotly-Dash CSV对比仪表盘绘图故障排查及扩展咨询

一、绘图失效问题修复 #

你的代码里绘图功能失效的核心原因是绘图回调中读取CSV数据的代码被注释掉了，导致df_A和df_B始终是空的DataFrame，Plotly没有数据可以绘制。

修复步骤 #

1. 取消update_graphs函数中读取文件内容的代码注释，确保能从上传的内容中解析出DataFrame。
2. 增加异常处理（可选但推荐），避免CSV格式错误导致程序崩溃。
3. 优化空值判断逻辑，允许单个文件单独绘图（原逻辑要求两个文件都选变量才绘图，可根据需求调整）。

修复后的完整回调代码 #

# Define the callback for updating the graphs
@app.callback([Output('graph-A', 'figure'), Output('graph-B', 'figure')],
              [Input('variable-dropdown-A', 'value'), Input('variable-dropdown-B', 'value')],
              [State('upload-data-A', 'contents'), State('upload-data-B', 'contents')],
              prevent_initial_call=True)
def update_graphs(variables_A, variables_B, contents_A, contents_B):
    # Initialize empty dataframes for each file
    df_A = pd.DataFrame()
    df_B = pd.DataFrame()

    # 读取文件A的数据
    if contents_A is not None:
        try:
            content_type, content_string = contents_A.split(',')
            decoded = base64.b64decode(content_string)
            df_A = pd.read_csv(io.StringIO(decoded.decode('utf-8')))
        except Exception as e:
            print(f"读取文件A出错: {e}")

    # 读取文件B的数据
    if contents_B is not None:
        try:
            content_type, content_string = contents_B.split(',')
            decoded = base64.b64decode(content_string)
            df_B = pd.read_csv(io.StringIO(decoded.decode('utf-8')))
        except Exception as e:
            print(f"读取文件B出错: {e}")
    
    # Initialize empty figures for each graph
    fig_A = go.Figure()
    fig_B = go.Figure()

    # 绘制文件A的时序图
    if variables_A and not df_A.empty:
        for var in variables_A:
            if 'time' in df_A.columns and var in df_A.columns:
                fig_A.add_trace(go.Scatter(
                    x=df_A['time'],
                    y=df_A[var],
                    mode='lines',
                    name=var
                ))
        fig_A.update_layout(title='File A Time Series',
                          xaxis_title='Time',
                          yaxis_title='Value')

    # 绘制文件B的时序图
    if variables_B and not df_B.empty:
        for var in variables_B:
            if 'time' in df_B.columns and var in df_B.columns:
                fig_B.add_trace(go.Scatter(
                    x=df_B['time'],
                    y=df_B[var],
                    mode='lines',
                    name=var
                ))
        fig_B.update_layout(title='File B Time Series',
                          xaxis_title='Time',
                          yaxis_title='Value')

    # Return the figures for both graphs
    return fig_A, fig_B

关键修改点说明 #

• 取消了读取文件代码的注释，确保数据能正确加载到DataFrame中。
• 增加了try-except异常捕获，避免文件格式错误导致程序崩溃。
• 增加了对time列和选中变量列存在性的判断，防止KeyError。
• 调整了绘图触发逻辑，只要选中变量且对应文件数据存在就绘图，不再强制要求两个文件都有选中变量。

二、使用subplot扩展绘图数量 #

如果需要在单个Graph组件中绘制多个子图（比如把多个变量的时序图分开展示），可以使用plotly.subplots.make_subplots函数。下面是针对File A的示例：

修改后的绘图逻辑（以File A为例） #

首先需要导入subplots模块：

from plotly.subplots import make_subplots

然后替换原File A绘图部分的代码：

# 替换原File A绘图部分的代码
if variables_A and not df_A.empty and 'time' in df_A.columns:
    # 创建子图，行数等于选中变量的数量，共享x轴
    fig_A = make_subplots(rows=len(variables_A), cols=1, shared_xaxes=True,
                          subplot_titles=[f'Time Series of {var}' for var in variables_A])
    
    for idx, var in enumerate(variables_A, start=1):
        if var in df_A.columns:
            fig_A.add_trace(go.Scatter(
                x=df_A['time'],
                y=df_A[var],
                mode='lines',
                name=var
            ), row=idx, col=1)
    
    fig_A.update_layout(title='File A Multi-Variable Time Series', height=300*len(variables_A))
    fig_A.update_xaxes(title_text='Time')
    fig_A.update_yaxes(title_text='Value')

注意事项 #

1. 通过rows和cols参数指定子图的行列数，shared_xaxes=True可以让子图共享x轴，提升可读性。
2. 使用row和col参数指定每个trace对应的子图位置。
3. 根据子图数量动态调整图表高度，避免子图重叠。

你可以把这个逻辑扩展到File B，或者实现两个文件的子图对比展示。

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