将绘图嵌入到模板中并从散景中提供服务

时间:2015-09-16 01:08:50

标签: python bokeh

我正在尝试合并两个散景示例embed_multiple.pysimple_stream.py,以便在散景服务器的模板中提供动态图。

目标是在布局中嵌入动态图形,并附加文本和链接等附加信息。

以下代码将按照预期从embed_multiple.py生成HTML文件,但是bokeh_server窗口仅显示图表(不保留标题/正文信息)。

    import time
    import numpy as np

    from bokeh.plotting import cursession, figure, show, output_server
    from bokeh.models import GlyphRenderer, Range1d
    from bokeh.embed import components
    from jinja2 import Template

    # static pages requirements
    import webbrowser
    import os
    import six

    output_server("simple_stream")

    # live graph example data
    x = np.linspace(0, 4*np.pi, 200)
    y = np.sin(x)
    # create some data
    x1 = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    y1 = [0, 8, 2, 4, 6, 9, 5, 6, 25, 28, 4, 7]
    x2 = [2, 5, 7, 15, 18, 19, 25, 28, 9, 10, 4]
    y2 = [2, 4, 6, 9, 15, 18, 0, 8, 2, 25, 28]
    x3 = [0, 1, 0, 8, 2, 4, 6, 9, 7, 8, 9]
    y3 = [0, 8, 4, 6, 9, 15, 18, 19, 19, 25, 28]

    # select the tools we want
    TOOLS="pan,wheel_zoom,box_zoom,reset,save"

    # live graph example figure
    p = figure(title="Simple streaming example")
    p.line(x,y, color="Orange", line_width=2)

    # the red and blue graphs will share this data range
    xr1 = Range1d(start=0, end=30)
    yr1 = Range1d(start=0, end=30)

    # only the green will use this data range
    xr2 = Range1d(start=0, end=30)
    yr2 = Range1d(start=0, end=30)

    # build our figures
    p1 = figure(x_range=xr1, y_range=yr1, tools=TOOLS, plot_width=300, plot_height=300)
    p1.scatter(x1, y1, size=12, color="red", alpha=0.5)

    p2 = figure(x_range=xr1, y_range=yr1, tools=TOOLS, plot_width=300, plot_height=300)
    p2.scatter(x2, y2, size=12, color="blue", alpha=0.5)

    p3 = figure(x_range=xr2, y_range=yr2, tools=TOOLS, plot_width=300, plot_height=300)
    p3.scatter(x3, y3, size=12, color="green", alpha=0.5)

    # plots can be a single PlotObject, a list/tuple, or even a dictionary
    plots = {'Orange': p, 'Red': p1, 'Blue': p2, 'Green': p3}

    script, div = components(plots)

    template = Template('''<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <title>Bokeh Scatter Plots</title>
            <h1> embedding multiple graphs - can we do it live?</h1>
            <b> So, this text will show up on the static page, but not from Bokeh server! <br \> I must be missing something... </b>
            <style> div{float: left;} </style>
            <link rel="stylesheet" href="http://cdn.pydata.org/bokeh/release/bokeh-0.9.0.min.css" type="text/css" />
            <script type="text/javascript" src="http://cdn.pydata.org/bokeh/release/bokeh-0.9.0.min.js"></script>
            {{ script }}
        </head>
        <body>
        {% for key in div.keys() %}
            {{ div[key] }}
        {% endfor %}
        </body>
    </html>
    ''')

    show(template.render(script=script, div=div))

    html_file = 'embed_multiple.html'
    with open(html_file, 'w') as textfile:
        textfile.write(template.render(script=script, div=div))
    url = 'file:{}'.format(six.moves.urllib.request.pathname2url(os.path.abspath(html_file)))
    webbrowser.open(url)

    ds = p.select({"type": GlyphRenderer})[0].data_source
    while True:
        oldx = ds.data["x"]
        newx = np.hstack([oldx, [oldx[-1] + 4*np.pi/200]])
        ds.data["x"] = newx
        ds.data["y"] = np.sin(newx)
        cursession().store_objects(ds)
        time.sleep(0.5)

我怀疑我正在使用&#39; show&#39;错误:

    show(template.render(script=script, div=div))

谢谢你的时间!

编辑:

使用单独的http.server以及embed示例(修改后的animated.py)中概述的bokeh_server方法,似乎仍然会剥离HTML! (this example中的h1)

1 个答案:

答案 0 :(得分:0)

我对你正在尝试做的事情仍然有点不稳定,但我认为你做得不对的一个概念是以正确的方式展示多个情节(p-p3)

This似乎是一个很好的教程,介绍如何使用bokeh格式化多绘图布局。直到今晚我还没看过他们的API,但看起来非常直观。

如果您在代码中遇到其他问题,可能会编辑您的问题以更好地反映该问题,并且我会再次尝试。