如何使用Dash、Plotly基于CSV文件数据绘制可视化图表（空图问题求助）

常见触发原因排查 #

• CSV读取异常类问题
  • 路径不匹配：代码中使用相对路径pd.read_csv('d6.csv')读取文件时，若文件与运行脚本不在同一工作目录，会读取到空DataFrame，直接导致画图无内容。
  • 列名不匹配：需核对CSV实际列名与代码中引用的Time、R1Temp是否完全一致，常见偏差包括列名前后带空格、大小写不匹配、不可见特殊字符，Plotly检索不到对应列时会渲染空白画布。
  • 读取校验：读取完成后可通过print(df.shape, df.head())打印数据结构与前几行内容，确认数据非空、目标列存在。
• 依赖版本兼容问题
  • 旧版dash_core_components、dash_html_components独立安装包与新版Dash、Plotly存在适配冲突，会导致回调无法正常返回figure。
  • 旧导入写法：

    import dash_core_components as dcc
    import dash_html_components as html
    from dash.dependencies import Input, Output
    

  • 替换为Dash 2.x版本后的标准导入写法：

    import dash
    from dash import dcc, html, Input, Output
    

• 回调静默失败问题
  • 原代码设置debug=False，回调内部抛出的列不存在、数据类型不匹配等异常不会在控制台明确暴露，只会静默终止渲染，导致图表空白。
  • 临时将运行参数调整为app.run_server(debug=True)，即可在控制台、浏览器端看到具体报错栈，快速定位问题。
• 画图逻辑异常
  • 当绘图用到的x、y列存在大量空值、数据类型无法被Plotly识别时，也会渲染空白。可通过df.dropna(subset=[x, y])先清洗空值再传入绘图接口。

可直接参考的修正后代码 #

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

# 读取CSV后增加前置校验
df = pd.read_csv('d6.csv')
if df.empty:
    raise ValueError("CSV文件读取为空，请检查文件路径")
missing_cols = [col for col in ['Time', 'R1Temp'] if col not in df.columns]
if missing_cols:
    raise ValueError(f"CSV缺失列：{missing_cols}，请核对实际列名")

app = dash.Dash(__name__)

app.layout = html.Div([
    dcc.Graph(id="graph"),
    html.Button("Switch Axis", id='btn', n_clicks=0)
])

@app.callback(
    Output("graph", "figure"), 
    Input("btn", "n_clicks"))
def display_graph(n_clicks):
    x, y = ('Time', 'R1Temp') if n_clicks % 2 == 0 else ('R1Temp', 'Time')
    clean_df = df.dropna(subset=[x, y])
    fig = px.line(clean_df, x=x, y=y)    
    return fig

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

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