无法将散景图嵌入 Flask 应用程序

Tom*_*mmy 3 python bokeh

我是 Bokeh 和 Flask 的新手。我浏览了相关的问题、教程,并查看了 Bokeh 文档,但无法弄清楚我做错了什么。

话虽如此,我想创建一个简单的网络应用程序,在其中我将各种数据报告和图表“组合在一起”。

根据我阅读的内容,我想出了以下内容:

应用程序.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
Run Code Online (Sandbox Code Playgroud)

散景测试.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>
Run Code Online (Sandbox Code Playgroud)

想象一下,在我的index.html文件中,我有一个带有bokeh_test.html链接的侧边栏。当我点击它时,我看到的只是标题“散景样本”,但没有情节。

如果我取消对show(plot) 的注释,则会打开一个新选项卡并正确显示绘图,因此问题似乎不在于绘图本身,而在于我尝试将其嵌入 bokeh_test 的方式。

我对这一切都很陌生,所以也许我正在做一些愚蠢的事情,但我一直无法弄清楚,我会很感激一些帮助。

附注。不确定是否相关,但为此我从 Anaconda 2 创建了一个 python 3.6 环境,我使用这个环境作为项目解释器。

big*_*dot 6

您正在模板中从 CDN 加载 BokehJS 版本 0.12.13。那里的版本需要与系统中安装的 Bokeh 版本完全匹配。