javascript – 在Flask中嵌入散景图

2023年1月18日 161次阅读

我期待得到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.pydata.org/bokeh-0.7.1.min.css" type="text/css" />
 <script type="text/javascript"src="http://cdn.pydata.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.pydata.org/bokeh-0.9.0.min.css" type="text/css" />
  <script type="text/javascript" src="http://cdn.pydata.org/bokeh-0.9.0.min.js"></script>
  {{ script|safe }}
 </head>
 <body>
  <div class='bokeh'>
   {{ div|safe }}
  </div>
 </body>
</html>

我尝试了所有的散景-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.pydata.org/bokeh/release/bokeh-0.10.0.min.css" type="text/css" />
  <script type="text/javascript" src="http://cdn.pydata.org/bokeh/release/bokeh-0.10.0.min.js"></script>
  {{ script|safe }}
 </head>
 <body>
  <div class='bokeh'>
   {{ div|safe }}
  </div>
 </body>
</html>
点赞