Flask传参至JavaScript结合Google Charts绘制柱状图异常排查

我帮你排查了代码里的几个关键问题，下面是问题分析和修复方案：

问题根源 #

1. 前端未正确使用后端传递的数据：你在JS代码里重新定义了active变量，完全覆盖了Flask传过来的模板变量，等于没用到数据库的数据。
2. Python列表到JS数组的格式转换错误：直接在JS里写{{ active }}会把Python列表渲染成带单引号的字符串，JS无法识别为数组，需要用Flask的tojson过滤器转成合法的JS数组格式。
3. 后端数据构造错误：你原来的循环只取了数据库每行的前两个字段（NAME和ACTIVE），但表头定义了三个列（还需要DISCHARGED），数据列数不匹配会导致Google Charts无法渲染；同时循环逻辑冗余且容易出错。
4. 数据库连接的潜在问题：没有指定数据库名称，虽然你执行了use one_stop_healthcare;，但直接在连接时指定会更规范。

修复后的代码 #

1. 修改application.py #

import flask
import mysql.connector

app = flask.Flask(__name__)

# 连接时直接指定数据库，避免后续执行use语句
db = mysql.connector.connect(
    host="localhost",
    user="root",
    passwd="",
    database="one_stop_healthcare"
)
mycur = db.cursor()

@app.route("/")
def get_vals():
    mycur.execute("SELECT NAME, ACTIVE, DISCHARGED FROM ccinfo;")
    dat = mycur.fetchall()
    
    # 重构数据：先加表头，再遍历数据库结果添加行
    active = [['All the wards', 'Active cases', 'Recovered']]
    # 取前5条数据，和你原来的循环逻辑一致
    for row in dat[:5]:
        # 数据库返回的是元组，直接转成列表，三个字段全部加入
        active.append([row[0], row[1], row[2]])
    
    print(active)
    return flask.render_template("index.html", active=active)

if __name__ == "__main__":
    app.run(debug=True)  # 开启debug模式方便调试

2. 修改index.html #

<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawMultSeries);

function drawMultSeries() {
    // 使用Flask传递的变量，通过tojson过滤器转成JS数组
    var active = {{ active|tojson }};
    
    // 验证数据是否正确加载（调试用，可删除）
    console.log("Loaded data:", active);
    
    var data = google.visualization.arrayToDataTable(active);
    var options = {
        title: 'Covid care centers',
        chartArea: {width: '50%'},
        hAxis: {
            title: 'Active cases',
            minValue: 0
        },
        vAxis: {
            title: 'Wards'
        }
    };
    var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}
</script>
</head>
<body>
<!-- 给图表容器设置宽高，避免默认尺寸太小看不见 -->
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>

额外优化建议 #

• 开启Flask的debug=True模式，方便查看报错信息；
• 在JS里添加console.log(active)可以在浏览器控制台查看数据是否正确加载，快速排查问题；
• 给图表容器设置明确的宽高，避免默认尺寸太小导致看起来像没显示；
• 数据库操作最好用try-except捕获异常，避免连接或查询出错导致程序崩溃。

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