Flask应用中WTForm筛选后Canvas图表无法更新的问题

我在用Flask开发带数据库的Web应用，页面默认显示首个设备的数据图表，用WTForm实现了筛选器（支持选择设备、数据类型、时间范围），但点击「Apply」按钮后图表始终保持默认状态，无法根据筛选条件更新。以下是问题排查和修复方案：

核心问题分析 #

1. 时间范围筛选逻辑未启用：代码中时间转换和筛选的代码被注释，导致时间条件完全未生效
2. 表单选项加载时机不合理：表单的设备/类型选项是类属性，服务器启动后不会动态更新，且存在潜在的类型匹配问题
3. 视图函数代码冗余：GET/POST分支的查询逻辑重复，容易引发不一致问题

修复步骤 #

1. 启用并完善时间范围筛选 #

取消注释时间处理代码，并将时间条件加入查询逻辑：

import datetime
import calendar
from time import strftime, localtime
from flask import render_template
from your_app.models import EvSource, EvType, Log
from your_app.forms import LogChartForm

def get_chart_data(source_id, type_id, time_start=None, time_end=None):
    source_get = EvSource.query.filter_by(description=source_id).first()
    if not source_get:
        return [], [], ""
    source = source_get.id_ev_source
    
    # 基础查询条件
    query = Log.query.filter(Log.id_ev_source == source)
    
    # 数据类型筛选
    if type_id != 'All':
        typ_get = EvType.query.filter_by(description=type_id).first()
        if typ_get:
            query = query.filter(Log.id_ev_type == typ_get.id_ev_type)
    
    # 时间范围筛选（仅当时间参数存在时生效）
    if time_start and time_end:
        start_time = datetime.datetime.combine(time_start, datetime.time.min)
        end_time = datetime.datetime.combine(time_end, datetime.time.max)
        start_timestamp = calendar.timegm(start_time.timetuple())
        end_timestamp = calendar.timegm(end_time.timetuple())
        query = query.filter(Log.timestamp.between(start_timestamp, end_timestamp))
    
    items = query.order_by(Log.timestamp).all()
    labels = [strftime('%Y-%m-%d %H:%M:%S', localtime(item.timestamp)) for item in items]
    datas = [item.value for item in items]
    return labels, datas, source_id

2. 优化视图函数，复用查询逻辑 #

将重复的查询逻辑提取为公共函数，简化视图代码：

@app.route('/chart', methods=['GET', 'POST'])
def chart_view():
    form = LogChartForm()
    if form.validate_on_submit():
        # 提交成功时使用用户选择的参数
        labels, datas, texts = get_chart_data(
            form.source_id.data,
            form.type_id.data,
            form.time_start.data,
            form.time_end.data
        )
    else:
        # 默认/GET请求时使用表单默认值
        labels, datas, texts = get_chart_data(
            form.source_id.data,
            form.type_id.data
        )
    return render_template('chart.html', form=form, labels=labels, datas=datas, texts=texts)

3. 修复表单字段配置 #

为SelectField显式指定类型转换，确保用户输入正确匹配；同时改为动态加载选项，避免服务器启动后数据无法更新：

from flask_wtf import FlaskForm
from wtforms import SelectField, DateField, SubmitField
from wtforms.validators import Optional
from your_app.models import EvSource, EvType

class LogChartForm(FlaskForm):
    """Graph Form: Filter"""
    source_id = SelectField(coerce=str)
    type_id = SelectField(coerce=str)
    time_start = DateField(default=None, format='%Y-%m-%d', validators=[Optional()])
    time_end = DateField(default=None, format='%Y-%m-%d', validators=[Optional()])
    submit = SubmitField('Apply')

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        # 动态加载设备选项
        self.source_id.choices = [source.description for source in EvSource.query.all()]
        self.source_id.default = self.source_id.choices[0] if self.source_id.choices else ""
        # 动态加载数据类型选项，追加"All"
        self.type_id.choices = [typ.description for typ in EvType.query.all()] + ['All']
        self.type_id.default = self.type_id.choices[-1] if self.type_id.choices else ""

4. 确保图表正确渲染（可选） #

当前HTML中的Chart初始化逻辑已正确，页面重新渲染时会使用新数据生成图表。若存在浏览器缓存问题，可在视图函数中添加缓存控制头：

from flask import make_response

# 在render_template后添加
response = make_response(render_template('chart.html', form=form, labels=labels, datas=datas, texts=texts))
response.headers['Cache-Control'] = 'no-cache, no-store, must-revalidate'
return response

验证修复效果 #

1. 重启Flask服务器
2. 访问/chart页面，选择不同的设备、数据类型和时间范围，点击「Apply」
3. 确认图表已更新为对应筛选条件的数据

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