在Django中如何将views生成的Altair图表渲染到HTML页面

存在的问题 #

• Vega系列依赖库使用了版本占位符，资源无法正常加载
• 模板默认开启特殊字符转义，Altair输出的JSON格式被破坏
• 图表渲染JS执行时，挂载的DOM节点还未渲染，找不到目标元素
• 用双引号包裹JSON格式的chart变量，导致变量被识别为普通字符串，无法被vegaEmbed解析

修正后的代码 #

views.py 优化（新增空数据判断） #

def search_site(request):
    if request.method == "POST":
        inputSite = request.POST.get('Site')
        SITES = Ericsson_LTE_1D_Version_Sectir_ID_HOUR.objects.filter(SITE__contains = inputSite).values()
        data = pd.DataFrame(SITES)
        chart = None
        if not data.empty:
            chart = alt.Chart(data).mark_line().encode(
                y ='Avg_Nr_Of_RRC_Connected_Users:Q',
                x ='PERIOD_START_TIME:T',
            ).to_json(indent=None)
        return render(request,'VenueReporting/searchSite.html', {'site':inputSite,'Predictions':SITES,'chart':chart})
    else:
        return render(request, 'VenueReporting/searchSite.html',{})

HTML页面修正 #

<head>
 <!-- 替换占位符为稳定可用版本 -->
 <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>
    {% if Predictions %}
        <h2>你搜索的站点为：</h2>
        <h3>{{site}}</h3>
        <h2>站点运行指标如下：</h2>
        <div id="vis1"></div>
        <!-- JS逻辑移到DOM节点之后，添加safe过滤器关闭转义 -->
        <script type="text/javascript">
          {% if chart %}
            var chart = {{chart|safe}};
            vegaEmbed('#vis1', chart).then(result => console.log(result))
            .catch(console.warn);
          {% endif %}
        </script>
    
    {% else %}
        <h1>该站点不存在，或输入信息有误</h1>
    {% endif %}
</body>

核心修改说明 #

1. 依赖库版本替换：将原代码中的[VERSION]占位符替换为经过验证的稳定版本，保证资源加载正常
2. 模板转义关闭：通过safe过滤器关闭Django对chart变量的自动转义，避免JSON内部的特殊字符被转义后格式错误
3. 变量格式修正：去掉包裹chart变量的双引号，Altair的to_json()输出本身就是合法JSON对象，不需要额外转换为字符串
4. 执行顺序调整：将图表渲染逻辑放在挂载节点#vis1之后，确保JS执行时目标节点已经完成渲染
5. 非空判断补充：无数据时不执行渲染逻辑，避免控制台报错

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