Как загрузить график в шаблоне Django

У меня есть график 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>

Это работает, но, как видно из исходного кода, я получаю год, отправляя форму и передавая ее в функцию для создания графика. Поэтому мне нужно, чтобы график создавался в домашнем представлении

Вы можете попробовать этот способ.

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', {})

Не передаются данные в представлении home, это можно сделать с помощью представления 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)
Вернуться на верх