如何通过上传CSV文件更新Gradio表格并生成图表？

代码问题梳理 #

• 缺失必要依赖导入：未导入pandas和io.StringIO，运行时会触发NameError
• UploadButton输入处理错误：上传按钮返回的是文件对象，而非纯文本，原函数无法直接解析
• 缺少图表生成逻辑：未实现将表格数据转化为可视化图表的功能
• 组件联动不完整：仅完成上传更新表格的逻辑，未关联表格到图表的自动更新

修复后的完整代码 #

import gradio as gr
import pandas as pd
from io import StringIO
import matplotlib.pyplot as plt

default_csv = "Phase,Activity,Start date,End date\n\"Mapping the Field\",\"Literature review\",2024-01-01,2024-01-31"

def process_uploaded_file(file):
    # 读取上传的CSV文件内容
    with open(file.name, 'r', encoding='utf-8') as f:
        text = f.read()
    df = pd.read_csv(StringIO(text), parse_dates=["Start date", "End date"])
    return df

def process_csv_text(text):
    # 处理默认CSV文本数据
    df = pd.read_csv(StringIO(text), parse_dates=["Start date", "End date"])
    return df

def generate_chart(df):
    # 生成甘特图示例（可根据需求调整图表类型）
    plt.figure(figsize=(10, 6))
    # 计算任务持续天数
    df['Duration'] = (df['End date'] - df['Start date']).dt.days
    # 用横向条形图模拟甘特图
    y_pos = range(len(df))
    plt.barh(y_pos, df['Duration'], left=df['Start date'].astype('int64')//10**9, color='#1f77b4')
    # 设置图表标签与标题
    plt.yticks(y_pos, df['Activity'])
    plt.xlabel('日期')
    plt.title('项目时间表甘特图')
    plt.grid(axis='x', linestyle='--', alpha=0.7)
    plt.tight_layout()
    return plt.gcf()

with gr.Blocks() as demo:
    gr.Markdown("# 项目时间表上传与可视化")
    upload_button = gr.UploadButton(label="上传CSV时间表", file_types=['.csv'], live=True, file_count="single")    
    table = gr.Dataframe(headers=["Phase", "Activity", "Start date", "End date"], col_count=4, default=process_csv_text(default_csv))
    image = gr.Plot()
    
    # 上传文件后更新表格
    upload_button.click(fn=process_uploaded_file, inputs=upload_button, outputs=table)
    # 表格数据变化时自动生成图表
    table.change(fn=generate_chart, inputs=table, outputs=image)

demo.launch()

关键修复说明 #

• 补充依赖导入：添加pandas、io.StringIO和matplotlib的导入，确保代码运行环境完整
• 区分文件与文本处理：新增process_uploaded_file函数专门处理上传的文件对象，读取文件内容后解析为DataFrame
• 新增图表生成逻辑：实现generate_chart函数，将表格数据转换为甘特图，可根据需求替换为折线图、柱状图等其他类型
• 完善组件联动：添加table.change事件监听，当表格数据更新时自动触发图表生成，完成从上传→表格→图表的完整流程

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