vegaEmbed加载Altair生成的JSON图表被解析为URL的解决办法

核心问题是vegaEmbed会把传入的字符串当作URL请求，你直接传递后端返回的JSON字符串，导致它去请求一个不存在的地址。下面是无需本地保存JSON的解决方案：

后端（Flask）实现 #

直接返回Altair图表的字典结构，通过jsonify输出标准JSON响应：

from flask import Flask, request, jsonify
import altair as alt
from vega_datasets import data

app = Flask(__name__)

@app.route('/get-chart', methods=['POST'])
def get_chart():
    # 接收前端传来的用户参数
    user_params = request.get_json()
    
    # 根据参数生成Altair图表
    chart = alt.Chart(data.cars.url).mark_point().encode(
        x='Horsepower:Q',
        y='Miles_per_Gallon:Q',
        color=user_params.get('group_by', 'Origin:N')  # 使用用户参数
    )
    
    # 将图表转为Python字典，再通过jsonify返回JSON响应
    # jsonify会自动设置Content-Type为application/json
    return jsonify(chart.to_dict())

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

前端实现 #

通过AJAX请求后端接口，拿到JSON对象后直接传给vegaEmbed（注意不要传字符串）：

<!DOCTYPE html>
<html>
<head>
    <!-- 引入vega相关依赖 -->
    <script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-lite@5"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
</head>
<body>
    <div id="chart-container"></div>

    <script>
        // 模拟用户设置的参数（实际可从表单/输入框获取）
        const userSettings = { group_by: 'Cylinders:N' };

        // 请求后端获取图表配置
        fetch('/get-chart', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(userSettings)
        })
        .then(res => res.json())  // 直接解析为JS对象
        .then(chartSpec => {
            // 把配置对象传给vegaEmbed，而非字符串
            vegaEmbed('#chart-container', chartSpec)
                .catch(err => console.error('图表渲染失败:', err));
        })
        .catch(err => console.error('请求失败:', err));
    </script>
</body>
</html>

关键注意点 #

• 后端必须返回application/json类型的响应：jsonify会自动处理，若直接返回chart.to_json()，需手动设置响应头{'Content-Type': 'application/json'}。
• 前端必须将响应解析为JavaScript对象：用res.json()（fetch）或response.data（axios），不能直接把字符串传给vegaEmbed。
• 若后端返回的是JSON字符串（比如用return chart.to_json()），前端需要额外用JSON.parse()解析成对象后再传入vegaEmbed。

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