在 HTML 中嵌入 Plotly 生成的 div

Question

我正在使用 Flask 和 Plotly 创建一些交互式图形，并希望将其嵌入 HTML 文件中。这篇文章提供了一个很好的方法（我正在关注第二个答案）。将生成的 div 嵌入 HTML 时遇到问题。

div 生成成功。如果我打印它，它将以 HTML 结构显示，如下所示：

<div>

        <div id="e185b843-63b6-422c-984c-e6743efc08a4" class="plotly-graph-div" style="height:100%; width:100%;"></div>

        <script type="text/javascript">

                window.PLOTLYENV=window.PLOTLYENV || {};

            if (document.getElementById("e185b843-63b6-422c-984c-e6743efc08a4")) {

                Plotly.newPlot(

                    'e185b843-63b6-422c-984c-e6743efc08a4',

                    [{"type": "scatter", "x": [1, 2, 3, 4, 5], "y": [1, 2, 6, 4, 1]}, {"type": "scatter", "x": [1, 2, 3, 4, 5], "y": [3, 4, 1, 2, 3]}],

                    {"responsive": true}

                )

            };

        </script>

    </div>

如果我将此 div 粘贴到我的 HTML 中，它就可以工作。该网站将显示图表。我希望能够自动更新 HTML 文件中的这个 div，所以我使用 Jinja 来设置它。在我的主要 Python 应用程序中，我有以下代码：

@app.route("/index")

def home():

    my code

    return render_template("home.html", graph=graph)

变量“graph”将包含我的 div。在我的 HTML 中，我有以下内容可以从我的应用程序中获取 div：

{{graph}}

HTML 结构已消失，因此我无法再生成该图表。

有没有办法让生成的 div 保持正确的 HTML 结构？或者我使用 Jinja 的方式是错误的？谢谢您的帮助！

Answer 1

更改神社代码{{graph|safe}}为什么它有效？当您将 html 传递给 jinja 代码时，它会转义 html 代码并将其显示为文本。因此，您需要将其标记为安全，以便 jinja 实际显示 html 或呈现 html 代码。因此，每当您想在 jinja 中渲染 html 代码时，请使用|safe