将散景图嵌入Flask应用程序时遇到问题
问题内容:
我是Bokeh和Flask的新手。我浏览了相关的问题,教程,并查看了Bokeh文档,但无法弄清楚我在做什么错。
话虽这么说,我想创建一个简单的Web应用程序,在其中我可以将各种数据报告和图表“组合在一起”。
根据我的阅读,我想到了以下内容:
app.py:
... # imports
app = Flask(__name__, static_url_path='/static')
@app.route("/")
def index():
return render_template("index.html")
@app.route("/bokeh_test")
def bokeh_test():
script, div = components(sample_plot())
return render_template("bokeh_test.html", script=script, div=div)
def sample_plot():
"""
A random plot just for testing purposes.
:return: plot
"""
PLOT_OPTIONS = dict(plot_width=600, plot_height=400)
SCATTER_OPTIONS = dict(size=12, alpha=0.5)
data = lambda: [random.choice([i for i in range(100)]) for r in range(10)]
plot = figure(sizing_mode='scale_both', tools='pan', **PLOT_OPTIONS)
plot.scatter(data(), data(), color="red", **SCATTER_OPTIONS)
# show(plot)
return plot
bokeh_test.html:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Bokeh includes-->
<script type="text/javascript" src="http://cdn.bokeh.org/bokeh/release/bokeh-0.12.13.min.js"></script>
<link rel="stylesheet" href="http://cdn.bokeh.org/bokeh/release/bokeh-0.12.13.min.css" type="text/css" />
{{ script|safe }}
</head>
<body>
<div>
<h1>Bokeh sample</h1>
<div class='bokeh'>
{{ div|safe }}
</div>
</div>
</body>
</html>
想象一下,在我的 index.html 文件中,有一个带有 bokeh_test.html
链接的侧边栏。当我单击它时,我看到的只是标题“散景样本”,但没有情节。
如果我取消对 show(plot)的
注释,则会打开一个新选项卡,并且可以正确显示该图,因此问题似乎不在于图本身,而在于我尝试将其嵌入bokeh_test中。
我不熟悉这一切,所以也许我正在做一些愚蠢的事情,但是我一直无法弄清楚,我将感谢您的帮助。
PS。不知道是否可能相关,但是为此,我从Anaconda 2创建了一个python 3.6环境,并将此环境用作项目解释器。
问题答案:
您将从模板中的CDN加载BokehJS版本0.12.13。那里的版本需要与您系统中安装的Bokeh的版本完全匹配。