如何在 Flask 应用程序中剥离和包含 Bokeh 对象

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 被传递给 index.html 通过 app.py.

来自 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个数字，所以一共有2个plot。

所以 js, div = components(plots) 将 return javascript 作为 转义字符串 和 div 作为两个图长度为 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.bokeh.org/bokeh/release/bokeh-0.12.13.min.css"
            rel="stylesheet" type="text/css">
    <link
            href="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-0.12.13.min.css"
            rel="stylesheet" type="text/css">
    <link
            href="https://cdn.bokeh.org/bokeh/release/bokeh-tables-0.12.13.min.css"
            rel="stylesheet" type="text/css">

    <script src="https://cdn.bokeh.org/bokeh/release/bokeh-0.12.13.min.js"></script>
    <script src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-0.12.13.min.js"></script>
    <script src="https://cdn.bokeh.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 对象

How to strip and include Bokeh object in a Flask app

html

javascript

flask

bokeh