如何在 Django 模板中加载图表答案

【问题标题】：How to load chart in Django Template如何在 Django 模板中加载图表
【发布时间】：2021-10-27 03:03:08
【问题描述】：

我有一个 Altair 图表，我想在 Django 模板中呈现它。图表在视图中转换为 json 对象。这是代码

views.py

def home(request):
    
    if request.method=='POST':
        year = request.POST['year']
        
        df, cus_dict = generate_df(year)

        bar_obj = barGraphAltair(year, df)
        bar_obj = json.loads(bar_obj.to_json())
        print(bar_obj)

        context = {'bar': bar_obj}
        return render(request, 'index.html', context=context)

    return render(request, 'index.html')

模板

<div id='altair-viz'>
    {% if bar %}
    {{ bar|safe }}
    {% endif %}
</div>

这只是打印模板中的 json。我知道我必须使用 Vega 来渲染图形，但我不确定如何在 jinja 语法中做到这一点

临时解决方案

我让它工作的一种方法是创建一个不同的视图并在模板中调用该视图，如下所示

views.py

def renderAltair(request):

    df, cus_dict = generate_df('2017')
    bar_obj = barGraphAltair('2017', df)

    bar_obj = json.loads(bar_obj.to_json())

    return JsonResponse(bar_obj)

模板

<script>
vegaEmbed('#altair-viz', "{% url 'altair' %}")
</script>

这可行，但正如您从原始代码中看到的那样，我通过提交表单并将其传递给生成图表的函数来获得年份。所以我需要在主视图中创建图表

【问题讨论】：

你用过什么图表js吗？如果没有，请尝试使用其中之一

标签： python json django jinja2 altair

【解决方案1】：

你可以试试这个方法。

def home(request):
    
    if request.method=='POST':
        year = request.POST['year']
        context = {'year': year}
        return render(request, 'index.html', context=context)
    return render(request, 'index.html', {})

不在主视图中传递数据，将使用 json 视图获取。

模板

<div id='altair-viz' data-url="{% url 'altair' %}?year={{year}}"></div>

<script>
    var data_url = $('#altair-viz').attr('data-url');
    vegaEmbed('#altair-viz', data_url)
</script>

获取数据功能

def renderAltair(request):
    year = request.GET.get('year')
    df, cus_dict = generate_df(year)
    bar_obj = barGraphAltair(year, df)

    bar_obj = json.loads(bar_obj.to_json())

    return JsonResponse(bar_obj)

【讨论】：