使用Python / bokeh在网站中嵌入绘图

时间:2014-03-12 07:57:51

标签: python bokeh

我试图在个人网站上静态嵌入散景图,并且遇到了一些我不理解的行为。基本上,我使用散景生成一个情节如下:

import bokeh.plotting as bplt
import numpy as np

x=np.random.random(100)
y=np.random.random(100)

bplt.output_file("t.html")
plot=bplt.line(x,y)

##the following line refers to the bokeh installed on my home computer
print plot.create_html_snippet(
           static_path='/usr/local/lib/python2.7/site-packages/bokeh/server/static/')

##the following line refers to the bokeh installed on my remote computer
#print plot.create_html_snippet(
#           static_path='/opt/anaconda/lib/python2.7/site-packages/bokeh/server/static/')

到目前为止一切顺利。这会产生一个看起来像(random garbage).embed.js的文件,并打印一个包含html语法的字符串,我手动将其复制到我正在调用的{h}文件中testembed.html,我在下面重现了这一点:

<html>
<body>

<h2>Simple Embed Example</h2>
<p>This is where my plot should be:</p>
<p>
<!--The next 4 lines are the output of the print statement from the python code-->
<script src="ccbd451a-6995-4dd2-b99c-e4140b362997.embed.js"
        bokeh_plottype="embeddata"
        bokeh_modelid="ccbd451a-6995-4dd2-b99c-e4140b362997"
        bokeh_modeltype="Plot" async="true"></script>
</p>

</body>
</html>

如果我有python代码引用我的本地 python安装并将生成的文件(.html和.embed.js)复制到我的本地计算机,我可以看到 html文件中的情节。

但是,我真正想做的是在远程计算机上运行,​​并在我的个人网站上通过网络访问html文件。

当我static_path参考我的远程计算机 python安装时(如上所示,已注释掉),我无法看到该情节在html页面中,当我通过网络访问它时(即转到http://mywebsite.com/testembed.html)。我不知道为什么会这样。

供参考,以下是定义html代码段功能的代码: https://github.com/ContinuumIO/bokeh/blob/master/bokeh/objects.py#L309 我注意到有一个选项我传递create_html_snippet,即embed_base_url,其中可以与此有关。< / p>

提前致谢! 麦克

修改 我接受了bigreddot的建议,解决了这个问题。我遇到的实际问题是,出于安全考虑,我使用的网络服务器只能访问我public_html目录中的内容。解决方法是rsyncbokeh/static目录放入我的public_html并指出:

rsync -ax /opt/anaconda/lib/python2.7/site-packages/bokeh/server/static/ /home/myusername/public_html/bokeh-static/

然后按如下方式修改我的代码:

import bokeh.plotting as bplt
import numpy as np

x=np.random.random(100)
y=np.random.random(100)

bplt.output_file("t.html")
plot=bplt.line(x,y)


#the following line refers to the bokeh rsynced to my directory
print plot.create_html_snippet(
           static_path='http://www.my_server_website/~myusername/bokeh-static/', 
           embed_base_url = 'http://www.my_server_website/~myusername/where_.js_file_is_located')

然后显然将生成的html复制到testembed.html

2 个答案:

答案 0 :(得分:12)

更新:原始问题中提到的create_html_snippet功能在几年前已被弃用并删除。现在有各种更新的方法可以在bokeh.embed模块中嵌入Bokeh内容。这个答案将总结其中一些。

独立内容

Standalone Bokeh内容是纯HTML / JS / CSS,不受正在运行的Bokeh服务器的支持。但是,独立的Bokeh内容仍然可以高度交互,使用绘图工具(例如平移,缩放,选择),链接刷子和触发CustomJS操作的小部件。有几种方法可以嵌入独立内容:

json_item

如果要创建可由JS函数加载的内容的纯JSON表示,可以使用json_item函数。例如,您可以从Flask端点服务JSON:

@app.route('/plot')
def plot():
    p = make_plot('petal_width', 'petal_length')
    return json.dumps(json_item(p, "myplot"))

然后页面可以使用以下JavaScript代码加载和呈现内容:

<div id="myplot"></div>

<script>
fetch('/plot')
    .then(function(response) { return response.json(); })
    .then(function(item) { Bokeh.embed.embed_item(item); })
</script>

这假设您已在页面上加载了BokehJS库,例如通过在页面的CDN.render()中模板化<head>。请参阅complete minimal example here

components

如果您希望生成一个简单的<script>代码和<div>,可将其模板化为一个页面,则可以使用components函数:

from bokeh.plotting import figure
from bokeh.embed import components

plot = figure()
plot.circle([1,2], [3,4])

script, div = components(plot)

返回的scriptdiv(或您传递多个项目的div)可以插入到页面中:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Bokeh Scatter Plots</title>

        <!-- COPY/PASTE BOKEHJS RESOURCES HERE -->

        <!-- COPY/PASTE SCRIPT HERE -->

    </head>
    <body>
        <!-- INSERT DIVS HERE -->
    </body>
</html>

如上所述,您需要对页眉中的BokehJS JS和CSS资源进行硬编码或模板化,例如:与CDN.render()

file_html

如果您想要生成完整的完整HTML页面(例如包括<head></head><body></body>),您可以使用file_html函数:

from bokeh.plotting import figure
from bokeh.resources import CDN
from bokeh.embed import file_html

plot = figure()
plot.circle([1,2], [3,4])

html = file_html(plot, CDN, "my plot")

这会生成一个可以保存或提供的基本页面等。如果需要,您还可以提供自己的Jinja模板(有关详细信息,请参阅文档)。

Bokeh服务器应用程序

Bokeh服务器应用程序可以将Bokeh图和小部件连接到实时运行的Python进程,因此UI交互,选择或小部件操作等事件可以触发真正的Python代码(例如Pandas或scikit-learn)。

要在页面模板中嵌入基本的Bokeh应用程序,最常用的方法是使用server_document

from bokeh.embed import server_document
script = server_document("https://demo.bokehplots.com/apps/slider")

返回的script可以在HTML页面的任何位置进行模板化,Bokeh应用程序将出现在那里。还有许多其他可能性,例如单独嵌入应用程序组件,为用户自定义会话或在代理/负载平衡器后面运行。 Bokeh服务器可能还需要配置为允许访问嵌入页面。有关完整详细信息,请参阅“用户指南”的Running a Bokeh Server章节。

另一种可能更简单的方式来嵌入&#34; Bokeh服务器应用程序,是使用指向正在运行的Bokeh应用程序的公共URL的IFrame。

答案 1 :(得分:2)

编辑:此回答中的信息与旧版Bokeh有关,不再与任何用法相关


embed_base_url控制javascript将搜索嵌入文件的网址路径(可以是绝对路径或相对路径)。

embed_save_loc控制python将写入嵌入文件的目录。当server = True时,不需要embed_save_loc

static_path控制javascript将用于为bokeh.js和bokeh.css构建URL的URL路径(它可以是绝对路径还是相对路径)。默认为http://localhost:5006/static/,但可以轻松指向CDN

运行散景服务器时,导航到http://localhost:5006/bokeh/generate_embed/static。我认为这需要你因为一个bug而在master上运行。

编辑:CDN是一个“内容交付网络”,它只是文件服务器的一个奇特术语。例如,我们在http://cdn.pydata.org/bokeh-0.4.2.js(或http://cdn.pydata.org/bokeh-0.4.2.min.js)托管bokeh.js供任何人使用。