在Flask中嵌入散景图

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在Flask中嵌入散景图相关的知识,希望对你有一定的参考价值。

我期望得到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,但我仍然得到相同的空白页。

答案

[components()返回带有(script, div)<script>元组,其中包含绘图的数据以及绘图视图加载到其中的随附<div>标记:http://bokeh.pydata.org/en/0.10.0/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 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>

以上是关于在Flask中嵌入散景图的主要内容,如果未能解决你的问题,请参考以下文章

尝试在 Django 上传按钮旁边嵌入散景图时出现 ImportError

在 django 中使用交互式控件制作散景图

Zeppelin 的内联散景图

未使用下拉菜单选择更新散景图

散景内联嵌入,“加载资源失败”

Django中的散景图返回空白页