如何将Flask后端返回的数据传递到前端JS用于渲染Google Charts

核心逻辑说明 #

你需要借助Jinja2模板的内置tojson过滤器，将Flask传入的Python变量直接转换为前端JS可直接使用的原生对象，不需要额外序列化解析。 #

步骤1：Flask端代码调整 #

你现有的路由代码无需大幅修改，后续从SQLite拉取数据后，只要将数据整理为对应结构的字典/列表即可，示例如下：

@app.route("/")
def home():
    # 后续此处替换为SQLite查询逻辑，返回符合结构的字典或列表即可
    data = {
        'PHP': 5000,
        'ASP': 600,
        'ASPX': 1231,
        'PERL': 500,
        'JSP': 1000
    }
    return render_template('index.html', data=data)

建议直接移除原字典中无意义的Language: 'DATABASE'键值对，减少前端过滤逻辑

步骤2：前端JS代码修改 #

删除原有硬编码数据，用Jinja过滤器转换后的动态数据生成Google Charts需要的数组结构：

function drawChart() {
    // 直接用tojson过滤器转换为JS原生对象，不要加外层引号，否则会变成普通字符串
    const stats = {{ data|tojson }};
    // 拼接表头+动态数据
    const chartData = google.visualization.arrayToDataTable([
        ['Language', 'IN DATABASE'],
        // 遍历转换后的数据批量插入
        ...Object.entries(stats)
    ]);
    // 后续保留你原有Google Charts的配置、绘制逻辑即可
}

可选优化（更适配数据库查询场景） #

如果从SQLite查询后直接返回列表格式数据，前端逻辑会更简洁：

后端调整： #

@app.route("/")
def home():
    # 模拟SQLite查询返回的列表结构
    data = [
        ['PHP', 5000],
        ['ASP', 600],
        ['ASPX', 1231],
        ['PERL', 500],
        ['JSP', 1000]
    ]
    return render_template('index.html', data=data)

前端调整： #

function drawChart() {
    const stats = {{ data|tojson }};
    const chartData = google.visualization.arrayToDataTable([
        ['Language', 'IN DATABASE'],
        ...stats
    ]);
    // 后续绘制逻辑
}

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