在 Flask 中嵌入散景图
[英]Embedding a bokeh plot in Flask
问题描述
I am expecting to get a simple line bokeh plot returned by Flask, but what I get when I browse to localhost:5002/simpleline is this:
我期待得到 Flask 返回的简单线条散景图，但是当我浏览到 localhost:5002/simpleline 时我得到的是：
('', ' ') ('', ' ')
I have two files.我有两个文件。 The Python file: 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)
And the HTML template:和 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>
I am sure I am missing something essential here.我确定我在这里遗漏了一些必不可少的东西。
After mn's answer, it was found out that components() produces two elements, a Javascript string, and an html div.经过mn的回答，发现components()产生了两个元素，一个Javascript字符串，一个html div。 So, I updated my scripts as follows, but this time the web page shows as blank.所以，我按如下方式更新了我的脚本，但这次网页显示为空白。
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)
And the HTML template:和 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>
I tried all bokeh-0.7.1.min.js, 0.9, and 0.10, but I still got the same blank page.我尝试了所有的 bokeh-0.7.1.min.js、0.9 和 0.10，但我仍然得到相同的空白页。
2 个解决方案
解决方案1
7 已采纳 2015-10-31 11:57:29
components() returns (script, div) tuple with <script> that contains the data for your plot and an accompanying <div> tag that the plot view is loaded into: components()返回带有<script> (script, div)元组，其中包含绘图的数据和一个随附的<div>标签，绘图视图被加载到该标签中：
http://docs.bokeh.org/en/latest/docs/user_guide/embed.html#components 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)
template模板
<!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>
解决方案2
2 2015-11-05 05:30:40
Alternatively, you can also use autoload_static instead of components if you want the bokeh js and css to load automatically.或者，如果您希望散景 js 和 css autoload_static ，您也可以使用autoload_static而不是components 。 Also you can save the js into a filepath and use only the div in the html to access it.您也可以将 js 保存到文件路径中，并仅使用 html 中的 div 来访问它。
Here is a sample code that I worked with:这是我使用的示例代码：
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)
And then in the html file include only the div tag (includes the path of the js script).然后在 html 文件中只包含 div 标签（包括 js 脚本的路径）。
<!doctype html>
<html>
<head>
<title>Figure examples</title>
</head>
<body>
<div class='bokeh'>
{{ div|safe }}
</div>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.