如何在Django Template中加载并渲染Altair生成的图表

1. 修改视图层代码 #

不需要额外新增独立视图，直接在原有home视图中将Altair图表的JSON序列化结果传入上下文即可，调整后的代码如下：

import json
def home(request):
    context = {}
    if request.method == 'POST':
        year = request.POST['year']
        df, cus_dict = generate_df(year)
        bar_obj = barGraphAltair(year, df)
        # 直接获取Altair生成的JSON字符串，无需转成Python字典
        context['bar_json'] = bar_obj.to_json()
    return render(request, 'index.html', context=context)

2. 修改模板代码 #

不要直接把JSON内容渲染到DOM节点里，而是将其作为参数传给vegaEmbed方法处理：

<div id='altair-viz'></div>

<script>
{% if bar_json %}
// 直接将后台传入的JSON字符串转成JS对象，传入vegaEmbed渲染
vegaEmbed('#altair-viz', {{ bar_json|safe }});
{% endif %}
</script>

注意：请确保已在页面中引入vega、vega-lite、vega-embed的前端依赖 #

可选更安全的实现方式 #

如果担心XSS风险，可以使用Django内置的json_script模板标签自动处理转义，无需手动加safe过滤器：

视图层调整 #

import json
def home(request):
    context = {}
    if request.method == 'POST':
        year = request.POST['year']
        df, cus_dict = generate_df(year)
        bar_obj = barGraphAltair(year, df)
        # 转成Python字典传入上下文
        context['bar_dict'] = json.loads(bar_obj.to_json())
    return render(request, 'index.html', context=context)

模板层调整 #

<div id='altair-viz'></div>

{% if bar_dict %}
{{ bar_dict|json_script:"altair-chart-data" }}
<script>
const chartData = JSON.parse(document.getElementById('altair-chart-data').textContent);
vegaEmbed('#altair-viz', chartData);
</script>
{% endif %}

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