在 Flask 中嵌入散景图答案

【问题标题】：Embedding a bokeh plot in Flask在 Flask 中嵌入散景图
【发布时间】：2015-10-31 10:58:00
【问题描述】：

我希望得到 Flask 返回的简单线散景图，但是当我浏览到 localhost:5002/simpleline 时得到的是：

('', ' ')

我有两个文件。 Python 文件：

from bokeh.plotting import figure, show, output_file
from bokeh.embed import components
from flask import Flask, render_template
app=Flask(__name__)

@app.route('/simpleline/')
def simpleLine():
    fig=figure(title="Sensor data")
    fig.line([1,2,3,4],[2,4,6,8])
    div=components(fig)
    return render_template('simpleline.html',div=div)
    show(fig)

if __name__ == "__main__":
    app.run(debug=True,port=5002)

还有 HTML 模板：

<!doctype html>
<html>
<head>
 <title>Figure examples</title>
 <link rel="stylesheet" href="http://cdn.bokeh.org/bokeh-0.7.1.min.css" type="text/css" />
 <script type="text/javascript"src="http://cdn.bokeh.org/bokeh-0.7.1.min.js"></script>
</head>
<body>
<div class='bokeh'>
 {{ div|safe }}
</div>
</body>
</html>

我确定我在这里遗漏了一些重要的东西。

经过mn的回答，发现components()产生了两个元素，一个Javascript字符串，一个html div。所以，我更新了我的脚本如下，但这一次网页显示为空白。

from bokeh.plotting import figure, show, output_file
from bokeh.embed import components
from flask import Flask, render_template
app=Flask(__name__)

@app.route('/simpleline/')
def simpleLine():
    fig=figure(title="Sensor data")
    fig.line([1,2,3,4],[2,4,6,8])
    global script
    global div
    script,div=components(fig)
    return render_template('simpleline.html',div=div,script=script)
    output_file("simpleline.html")
    show(fig)

fig=figure(title="Sensor data")
fig.line([1,2,3,4],[2,4,6,8])
script,div=components(fig)
if __name__ == "__main__":
    app.run(debug=True,port=5002)

还有 HTML 模板：

<!doctype html>
<html>
 <head>
  <title>Figure examples</title>
  <link rel="stylesheet" href="http://cdn.bokeh.org/bokeh-0.9.0.min.css" type="text/css" />
  <script type="text/javascript" src="http://cdn.bokeh.org/bokeh-0.9.0.min.js"></script>
  {{ script|safe }}
 </head>
 <body>
  <div class='bokeh'>
   {{ div|safe }}
  </div>
 </body>
</html>

我尝试了所有 bokeh-0.7.1.min.js、0.9 和 0.10，但仍然得到相同的空白页。

【问题讨论】：

标签： javascript python flask bokeh

【解决方案1】：

components() 返回带有 <script> 的 (script, div) 元组，其中包含您的绘图数据以及绘图视图加载到的随附 <div> 标记：

http://docs.bokeh.org/en/latest/docs/user_guide/embed.html#components

script, div = components(fig)
return render_template('simpleline.html',div=div, script=script)

模板

<!doctype html>
<html>
 <head>
  <title>Figure examples</title>
  <link rel="stylesheet" href="http://cdn.bokeh.org/bokeh/release/bokeh-0.10.0.min.css" type="text/css" />
  <script type="text/javascript" src="http://cdn.bokeh.org/bokeh/release/bokeh-0.10.0.min.js"></script>
  {{ script|safe }}
 </head>
 <body>
  <div class='bokeh'>
   {{ div|safe }}
  </div>
 </body>
</html>

【讨论】：

现在事情变得更有意义了。谢谢！但是，现在我得到一个空白页，我不知道为什么。
尝试使用 bokeh-0.10.0.min.js 或 0.9.0
还是一样。如果有帮助，我会通过添加我目前拥有的脚本来更新问题。
@mn，我又想问你一个问题。您能否解释一下外部 Javascript 代码与 components() 生成的代码之间的区别。它们的用途是什么？
外部代码是一个 BokehJS 库。 components() 生成的代码包含您绘制的数据并使用 BokehJS 进行绘图。

【解决方案2】：

或者，如果您希望散景 js 和 css 自动加载，您也可以使用 autoload_static 而不是 components。您也可以将 js 保存到文件路径中，并仅使用 html 中的 div 来访问它。

这是我使用的示例代码：

from bokeh.embed import autoload_static
from bokeh.resources import CDN
.............
.............
js, div = autoload_static(bar, CDN, '/static/bokeh/plot.js')
with open('static/bokeh/plot.js', 'w') as f:
        f.write(js)

然后在html文件中只包含div标签（包含js脚本的路径）。

<!doctype html>
 <html>
   <head>
     <title>Figure examples</title>
   </head>
   <body>
    <div class='bokeh'>
    {{ div|safe }}
    </div>
   </body>
 </html>

【讨论】：

当然。由于每次都会生成一个新的 div id，因此缓存可能存在问题（除非刷新，否则不显示绘图）。可以通过设置适当的缓存控制标头来管理 - 到期等或其他解决方法。