Как мне получить график altair из views для отображения на html-странице в Django?

Я пытаюсь получить график Altair для рендеринга из моих представлений на мою html-страницу. Я перепробовал все из stack overflow, чтобы заставить это работать, но каждый раз, когда я пытаюсь, я не получаю свой график. Вот мой код в различных разделах. 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 = 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@[VERSION]"></script>
 <script src="https://cdn.jsdelivr.net/npm/vega-lite@[VERSION]"></script>
 <script src="https://cdn.jsdelivr.net/npm/vega-embed@[VERSION]"></script>
</head>
<body>
  <script type="text/javascript">
    var chart = "{{chart}}";
    vegaEmbed('#vis1', chart).then(result => console.log(result))
  .catch(console.warn);
  </script>

    {% if Predictions %}
        <h2>You Searched for:</h2>
        <h3>{{site}}</h3>
        <h2>The activity was:</h2>
        <div id="vis1"></div>
    
    {% else %}
        <h1>That Venue does not exist or you put the wrong information</h1>
    {% endif %}
</body>

Переменная chart в javascript не должна быть строкой, это должен быть объект JSON. Также, стандартное поведение django по экранированию специальных символов приведет к некорректному JSON. Чтобы исправить это, вы можете использовать что-то вроде этого (обратите внимание, что здесь нет кавычек):

var chart = {{ chart|safe }};

Также, в ваших тегах <script>, [VERSION] не следует использовать буквально. Вы должны указать версии библиотек, совместимых с Altair, которые вы можете найти в alt.VEGA_VERSION, alt.VEGAEMBED_VERSION и alt.VEGALITE_VERSION:

 <script src="https://cdn.jsdelivr.net/npm/vega@{{ alt.VEGA_VERSION }}"></script>
 <script src="https://cdn.jsdelivr.net/npm/vega-lite@{{ alt.VEGALITE_VERSION }}"></script>
 <script src="https://cdn.jsdelivr.net/npm/vega-embed@{{ alt.VEGAEMBED_VERSION }}"></script>

(при условии, что вы передали alt своему шаблону).

Вернуться на верх