Question

我正在使用Flask来显示Bokeh的一些情节。

为了使事情更简单，以下是我如何生成情节：
myplots.py

from bokeh.embed import components
x = [1, 2, 3, 4, 5]
y = [6, 7, 8, 9, 10]

p1 = figure()
p1.line(x, y)

p2 = figure()
p2.circle(x, y)

plots =(p1, p2)

js, div = components(plots)

app.py

@app.route("/")
def index():
    return render_template("index.html", js=js, div=div, cdn_js=cdn_js, cdn_css=cdn_css)

的index.html

  <body>
    {{js|safe}}
    {{div|safe}}
  </body>

因此，来自 myplots.py 的js和div将通过 app.py 传递给 index.html EM>

来自 myplots.py 的
js和div是：

('\n<div class="bk-root">\n <div class="bk-plotdiv" id="55b2192b-8c09-4c3c-95a0-6526e02edeea"></div>\n\</div>', '\n<div class="bk-root">\n <div class="bk-plotdiv" id="26241e60-808a-4df9-826b-376752f9e0aa"></div>\n</\div>')

我遇到的问题是('\n \n \n ...\n)在浏览器中打印，在实际图表旁边，并且不知道如何消除它们。这是一个例子：

Answer 1

plots = (p1, p2)，在这里你传递2个数字，所以总共有两个图。

所以js, div = components(plots)会将javascript作为转义字符串返回，并将这两个图表作为长度为2的元组返回，因为你有两个图。

当您将{{ div | safe }}放入jinja2模板时，由于div是一个元组，因此无法正确显示。

所以为了显示元组，只需循环它，

{% for item in div %}
    {{ item | safe }}
{% endfor %}

以下是包含修复程序的示例脚本

app.py

from bokeh.embed import components
from bokeh.plotting import figure
from flask import Flask, render_template

app = Flask(__name__)

@app.route("/")
def index():
    x = [1, 2, 3, 4, 5]
    y = [6, 7, 8, 9, 10]

    p1 = figure()
    p1.line(x, y)

    p2 = figure()
    p2.circle(x, y)

    plots = (p1, p2) # you are passing 2 plots

    js, divs = components(plots) # divs will contain a tuple of length 2

    return render_template("index.html", js=js, divs=divs)

的index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sample</title>

    <link
            href="https://cdn.pydata.org/bokeh/release/bokeh-0.12.13.min.css"
            rel="stylesheet" type="text/css">
    <link
            href="https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.13.min.css"
            rel="stylesheet" type="text/css">
    <link
            href="https://cdn.pydata.org/bokeh/release/bokeh-tables-0.12.13.min.css"
            rel="stylesheet" type="text/css">

    <script src="https://cdn.pydata.org/bokeh/release/bokeh-0.12.13.min.js"></script>
    <script src="https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.13.min.js"></script>
    <script src="https://cdn.pydata.org/bokeh/release/bokeh-tables-0.12.13.min.js"></script>


</head>
<body>

{{js | safe}}
{% for div in divs %}
    {{ div | safe }}
{% endfor %}

</body>
</html>

我希望这会有所帮助。

如何在Flask应用中剥离并包含Bokeh对象

1 个答案: