如何通过Flask过滤Pandas DataFrame并展示带箭头的最新行

1. 后端数据处理逻辑修正 #

先明确核心逻辑：先过滤出含箭头的行，再按时间戳排序取最新X条，最后转成模板可识别的格式传递。

假设你的原始DataFrame包含时间戳、指标名称、带箭头的状态列，以下是修正后的Flask后端代码：

from flask import Flask, render_template
import pandas as pd

app = Flask(__name__)

# 替换为你的实际数据加载逻辑（比如读CSV、数据库查询）
def load_source_data():
    # 模拟原始DataFrame
    df = pd.DataFrame({
        'timestamp': ['2024-05-20 09:50', '2024-05-20 09:55', '2024-05-20 10:00', '2024-05-20 10:05'],
        'metric_name': ['CPU负载', '内存占用', '磁盘使用率', '网络带宽'],
        'status': ['正常', '🡹 持续上升', '正常', '🡻 快速下降']
    })
    # 转时间戳为datetime类型，保证排序准确性
    df['timestamp'] = pd.to_datetime(df['timestamp'])
    return df

@app.route('/')
def display_arrow_records():
    target_rows = 2  # 需展示的最新行数，可按需调整或设为URL参数
    raw_df = load_source_data()
    
    # 过滤含🡹或🡻的行，na=False避免空值触发错误
    filtered_df = raw_df[raw_df['status'].str.contains(r'🡹|🡻', na=False)]
    
    # 按时间戳降序排序，取最新target_rows行
    latest_records = filtered_df.sort_values(by='timestamp', ascending=False).head(target_rows)
    
    # 转为字典列表，方便HTML模板遍历
    data_for_template = latest_records.to_dict('records')
    
    return render_template('records.html', records=data_for_template, row_count=target_rows)

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

2. HTML模板修正 #

确保模板能正确遍历数据，同时区分箭头样式提升可读性：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>最新指标变化</title>
    <style>
        .up { color: #2ecc71; font-weight: bold; }
        .down { color: #e74c3c; font-weight: bold; }
        table { border-collapse: collapse; margin: 20px; }
        th, td { border: 1px solid #ddd; padding: 10px; text-align: left; }
        th { background-color: #f5f5f5; }
    </style>
</head>
<body>
    <h2>最新{{ row_count }}条指标变化记录</h2>
    {% if records %}
        <table>
            <tr>
                <th>时间</th>
                <th>指标</th>
                <th>变化状态</th>
            </tr>
            {% for item in records %}
            <tr>
                <td>{{ item.timestamp.strftime('%Y-%m-%d %H:%M') }}</td>
                <td>{{ item.metric_name }}</td>
                <td>
                    {% if '🡹' in item.status %}
                        <span class="up">🡹</span> {{ item.status.replace('🡹 ', '') }}
                    {% elif '🡻' in item.status %}
                        <span class="down">🡻</span> {{ item.status.replace('🡻 ', '') }}
                    {% endif %}
                </td>
            </tr>
            {% endfor %}
        </table>
    {% else %}
        <p style="margin-left:20px;">暂无带箭头的指标变化记录</p>
    {% endif %}
</body>
</html>

3. 核心逻辑说明 #

• 过滤逻辑：用正则r'🡹|🡻'精准匹配含箭头的行，na=False避免空值干扰
• 排序取新：先转换时间戳格式保证排序正确性，降序后取前X行确保拿到最新数据
• 数据传递：to_dict('records')将DataFrame转为模板可直接遍历的字典列表
• 前端展示：通过模板判断箭头类型，添加颜色样式区分，提升视觉辨识度

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