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

【问题标题】：how do I get my altair plot from views to render on my html page in Django?如何从视图中获取我的 altair 图以在 Django 的 html 页面上呈现？
【发布时间】：2021-09-02 00:09:47
【问题描述】：

我正在尝试让我的 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>

【问题讨论】：

标签： python django altair vega

【解决方案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 传递给您的模板）。

【讨论】：

还是不行。如何将 alt 传递给我的模板？同样对于 JavaScript，它以红色突出显示“预期的属性分配”。
好的，我修复了“属性分配错误”，但我仍然没有得到一个情节。我仍然不知道如何将 alt 传递给我的模板
好的，我发现问题是我的javascript需要在我的div调用之后