Flask-Google_Charts多动态图表创建问题及优化方案咨询

先梳理下你遇到的核心问题：图表与问题无法对应、后端图表未注册警告、Google Charts初始化错误、同步XHR弃用警告。下面逐个解决并给出更优的实现方式：

1. 解决「问题+图表」匹配错乱问题 #

你之前用两个独立列表question和chart_data循环，嵌套循环会导致每个图表都重复所有问题。最优方式是在后端把问题和对应图表信息配对成一个结构化列表，前端直接循环这个列表即可保证一一对应。

2. 解决后端「图表未在模板中包含」警告 #

之前模板里的{{ charts.teacher_chart+key }}是错误的Jinja2语法，无法动态拼接图表名称。正确做法是用字典索引{{ charts[chart_name] }}，配合后端传递的配对数据即可解决。

3. 解决google is not defined错误 #

原因是Google Charts的loader.js还未加载完成，就执行了图表初始化代码。需要把图表初始化逻辑放到Google Charts的加载回调中。

4. 解决同步XMLHttpRequest弃用警告 #

你的load()方法使用有误（还存在选择器错误：$("stream_select")应该是$("#stream_select"，id选择器需要加#），改用$.get()异步请求并手动插入HTML，既避免警告又能正确传递参数。

完整优化代码实现 #

后端views.py（优化查询+配对数据）

@expose('/_charts', methods=["GET", "POST"])
def load_chart(self):
    stream_id = request.args.get('stream', 0, type=int)
    subject_id = request.args.get('subject', 0, type=int)
    teacher_id = request.args.get('teacher', 0, type=int)
    
    # 获取所有问题
    questions = [(ques.id, ques.question) for ques in Questions.query.all()]
    
    # 优化数据库查询：一次分组统计所有问题的Yes/No数量
    from sqlalchemy import func
    submission_counts = db.session.query(
        Submissions.question_id,
        Submissions.submission,
        func.count(Submissions.id)
    ).filter(
        Submissions.subject_id == subject_id,
        Submissions.user_id == teacher_id,
        Submissions.submission.in_([1, 2])  # 只统计Yes(1)和No(2)
    ).group_by(Submissions.question_id, Submissions.submission).all()
    
    # 把统计结果转成字典，方便快速查找
    count_dict = {}
    for qid, submission, cnt in submission_counts:
        if qid not in count_dict:
            count_dict[qid] = {1: 0, 2: 0}
        count_dict[qid][submission] = cnt
    
    # 生成问题+图表配对数据
    question_chart_pairs = []
    for qid, q_text in questions:
        ans_yes = count_dict.get(qid, {}).get(1, 0)
        ans_no = count_dict.get(qid, {}).get(2, 0)
        
        # 创建饼图
        chart_name = f"teacher_chart{qid}"
        my_chart = PieChart(
            chart_name,
            options={
                'title': f'回答统计: {q_text[:30]}...',  # 用问题文本作为标题更直观
                "width": 500,
                "height": 300,
                "is3D": True
            }
        )
        my_chart.add_column("string", "Answer")
        my_chart.add_column("number", "Count")
        my_chart.add_rows([["Yes", ans_yes], ["No", ans_no]])
        
        charts.register(my_chart)
        # 添加配对数据
        question_chart_pairs.append({
            'question_id': qid,
            'question_text': q_text,
            'chart_name': chart_name
        })
    
    return self.render(
        'admin/result_chart.html',
        stream_id=stream_id,
        question_chart_pairs=question_chart_pairs
    )

前端result_chart.html（修正图表初始化+循环配对数据）

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// 确保Google Charts加载完成后再初始化图表
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(function() {
    {{ charts_init|safe }}
});
</script>

<div class="container">
  <div class="row">
    {% for item in question_chart_pairs %}
      <div class="col-12 col-md-6 mb-5">
        <h5 class="mb-3">{{ item.question_text }}</h5>
        {{ charts[item.chart_name] }}
      </div>
    {% endfor %}
  </div>
</div>

前端results.html（修正请求逻辑+选择器）

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
  $("#teacher_select").on('click',function(){
    // 修正选择器：id选择器需要加#
    const stream_id = $("#stream_select").val();
    const subject_id = $("#subject_select").val();
    const teacher_id = $("#teacher_select").val();
    
    // 改用$.get异步请求，避免同步XHR警告
    $.get("{{ url_for('results.load_chart') }}", {
      stream: stream_id,
      subject: subject_id,
      teacher: teacher_id
    }, function(response) {
      $('#showdata').html(response);
    });
  });
});
</script>

额外优化建议 #

1. 分页处理：如果问题数量较多，建议添加分页，避免一次性加载过多图表导致页面卡顿。
2. 错误处理：在前端请求时添加错误回调，比如请求失败时提示用户；后端也可以判断subject_id和teacher_id是否有效，返回友好提示。
3. 图表样式适配：用Bootstrap的栅格系统（比如col-md-6）让图表在不同屏幕尺寸下自动布局，提升移动端体验。

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