Flask+Pandas+CSV报表实现示例

boyanx1周前技术教程3

以下是一个基于 Flask + Pandas + CSV 的简单报表实现示例,包含数据加载、处理和可视化展示:

1. 项目结构

bash

flask-report/

├── app.py

├── data/

│ └── sales_data.csv

└── templates/

└── report.html

2. CSV 数据示例 (data/sales_data.csv)

csv

Date,Product,Amount,Region

2023-01-01,Product A,1500.00,North

2023-01-02,Product B,2000.00,South

2023-01-03,Product C,1800.00,East

...(更多测试数据)

3. Flask 应用 (app.py)

python

from flask import Flask, render_template

import pandas as pd


app = Flask(__name__)


def load_data():

"""加载并处理CSV数据"""

try:

df = pd.read_csv('data/sales_data.csv', parse_dates=['Date'])


# 数据清洗和处理示例

df['Month'] = df['Date'].dt.strftime('%Y-%m')

df['Amount'] = pd.to_numeric(df['Amount'], errors='coerce')


# 创建汇总数据

summary = df.groupby(['Month', 'Region'])['Amount'].sum().unstack().reset_index()


return {

'raw_data': df.to_dict('records'),

'summary': summary.to_dict('records'),

'columns': summary.columns.tolist()

}

except Exception as e:

print(f"Error loading data: {str(e)}")

return None


@app.route('/report')

def show_report():

"""报表展示路由"""

data = load_data()

if data is None:

return "数据加载失败,请检查数据文件"

return render_template('report.html', data=data)


if __name__ == '__main__':

app.run(debug=True)

4. 模板文件 (templates/report.html)

html

<!DOCTYPE html>

<html>

<head>

<title>销售报表</title>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

<link href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap5.min.css" rel="stylesheet">

</head>

<body>

<div class="container mt-4">

<h2>销售汇总报表</h2>


<!-- 汇总表格 -->

<table class="table table-striped table-bordered" id="summaryTable">

<thead class="table-dark">

<tr>

{% for column in data.columns %}

<th>{{ column }}</th>

{% endfor %}

</tr>

</thead>

<tbody>

{% for row in data.summary %}

<tr>

{% for column in data.columns %}

<td>{{ row[column] | default(0) | round(2) }}</td>

{% endfor %}

</tr>

{% endfor %}

</tbody>

</table>


<h3 class="mt-5">原始数据</h3>


<!-- 原始数据表格 -->

<table class="table table-hover" id="rawDataTable">

<thead>

<tr>

<th>Date</th>

<th>Product</th>

<th>Amount</th>

<th>Region</th>

</tr>

</thead>

<tbody>

{% for item in data.raw_data %}

<tr>

<td>{{ item.Date }}</td>

<td>{{ item.Product }}</td>

<td>{{ "yen%.2f" | format(item.Amount) }}</td>

<td>{{ item.Region }}</td>

</tr>

{% endfor %}

</tbody>

</table>

</div>


<!-- 添加交互功能 -->

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>

<script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap5.min.js"></script>


<script>

$(document).ready(function() {

$('#summaryTable, #rawDataTable').DataTable({

paging: true,

searching: true,

ordering: true,

info: true

});

});

</script>

</body>

</html>

5. 运行与使用

  1. 安装依赖:

bash

pip install flask pandas

  1. 运行应用:

bash

python app.py

  1. 访问报表:

http://localhost:5000/report

功能特点:

  1. 数据加载与处理

O 自动解析日期字段

O 金额数据校验

O 按月/地区汇总数据

  1. 可视化展示

O 响应式Bootstrap布局

O 交互式排序和搜索(DataTables插件)

O 双表格展示(汇总数据 + 原始数据)

  1. 数据格式化

O 金额显示为货币格式

O 数字保留两位小数

O 自动处理空值

扩展建议:

  1. 数据可视化增强

python

# 添加图表支持(在load_data函数中添加)

import matplotlib.pyplot as plt


def generate_chart():

df = pd.read_csv('data/sales_data.csv')

plt.figure()

df.groupby('Product')['Amount'].sum().plot.pie(autopct='%1.1f%%')

plt.savefig('static/sales_pie.png')

  1. 添加数据过滤

python

# 在路由中添加过滤参数

@app.route('/report')

def show_report():

region = request.args.get('region')

# 添加过滤逻辑

  1. 导出功能

html

<!-- 在HTML中添加导出按钮 -->

<button onclick="exportExcel()" class="btn btn-success">导出Excel</button>


<script>

function exportExcel() {

window.location = '/export'

}

</script>

这个实现方案结合了:

  • Flask 作为Web框架
  • Pandas 进行数据处理
  • CSV 作为数据存储
  • Bootstrap 用于界面美化
  • DataTables 实现交互式表格

可以根据实际需求调整数据处理逻辑和展示样式,建议在正式环境中添加以下改进:

  • 增加异常处理
  • 添加用户认证
  • 优化大数据量处理
  • 添加缓存机制
  • 使用生产级Web服务器(如Gunicorn)

相关文章

通过免费CDN让你的网站打开速度加快N倍

网站开发者或网站管理者时常会用到一些JavaScript Libraries,例如最常见的jQuery或字体和CSS框架,通常不建议自己托管这些档案,因为除了耗流量,也可能因此拖慢网站的加载速度。为了...

57.后端必备的前端技巧

文章目录前言1.jquery的两种按钮点击和发送请求:2.vue中的按钮定义和axios请求:总结前言现在都是前后端分离的开发,很多时候可能后端不会再写html,jquery了,但是一些场景之下后端还...

57challenges-56个挑战-客户端设计(part4)

上题目:接昨天:https://www.toutiao.com/article/7125986007236936226/昨天解决了前端界面格式化的问题,今天完成把json格式转化为excel表格,并供...

Web前端【超出隐藏与显示】多种解决方案集锦

超出隐藏是指当某个元素内的内容,超出该元素的边界时,如何隐藏这些内容。overflowoverflow属性用于设置元素内容溢出时的处理方式。它有以下几个可能的取值:visible:默认值,不进行任何处...

Spring Boot之集成WebSocket实现前后端通信,这你必须得会!

1. 前言这将又会是干货满满的一期,全程无尿点不废话只抓重点教,具有非常好的学习效果,拿好小板凳准备就坐!希望学习的过程中大家认真听好好学,学习的途中有任何不清楚或疑问的地方皆可评论区留言或私信,bu...

ThinkPHP 对接 DeepSeek 的教程(以 ThinkPHP 6.x 版本为例)

一、准备工作注册 DeepSeek 账号并获取 API Key查看 DeepSeek API 文档(假设接口地址为 https://api.deepseek.com/v1/chat/completio...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。