如何从视图中获取我的 altair 图以在 Django 中的 html 页面上呈现？

Question

我正在尝试让我的 Altair 绘图从我的视图呈现到我的 html 页面。我已经尝试了从堆栈溢出到让它工作的所有方法，但每次我尝试我都没有得到我的情节。这是我在不同部分的代码。

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>

Answer 1

javascript中的chart变量不应该是字符串，应该是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 传递给您的模板）。

如何从视图中获取我的 altair 图以在 Django 中的 html 页面上呈现？

how do I get my altair plot from views to render on my html page in Django?

python

django

altair

vega