将多个散景 HTML 图嵌入烧瓶答案

【问题标题】：Embedding multiple bokeh HTML plots into flask将多个散景 HTML 图嵌入烧瓶
【发布时间】：2016-05-11 09:44:33
【问题描述】：

我在散景网站上搜索了过去 3 个小时，发现堆栈溢出，但没有一个是我真正想要的。

我已经生成了我的图，并将它们保存在 html 文件中。我想要做的就是将绘图嵌入到我的仪表板中，就像下图中白色区域中的多网格一样。但是，仅添加 2 个图会导致它们重叠并且非常奇怪。

我使用 {{ include }} 方法以这种方式包含图表：

任何人都可以给我指点如何很好地对齐它们？理想情况下，我想要在那个空间里有 6 个小地块。我不想每次加载仪表板时都重新生成绘图，所以我不想要嵌入方式。

请帮忙:(非常感谢！

编辑：按照 big 的建议，使用 responsive = True 有效，但我无法控制 css 样式和图表的大小。我怀疑它与使用包含标签有关。谁能帮忙？ :)

【问题讨论】：

本月晚些时候，我们正在努力显着改进 Bokeh 0.12 的内置布局功能，使其默认响应。从 Bokeh 0.11.1 开始，您可以在 Plot 对象上设置一个 responsive 标志，可能对您的情况有所帮助，您可以查看示例 here 和 here跨度>
非常感谢您的回复！响应有效，但我无法控制它的 CSS 样式。我认为我在包含标签的烧瓶中做错了：S
我建议你通过公共邮件列表来一些示例代码，这更有利于来回讨论。如果您发布“Not An Answer”，SO 上的某些人会生您的气
我想我会补充一下，究竟是什么 CSS 样式？大多数 Bokeh Plot 都在 HTML 5 画布上，并且必须通过 Bokeh API 而不是 CSS 设置样式。参见例如bokeh.pydata.org/en/0.11.1/docs/user_guide/styling.html

标签： html css python-3.x flask bokeh

【解决方案1】：

为什么不尝试使用水平布局 horizontal-layout

按照您的方式（ {% include %} ），我找不到解决方案，因此可能必须使用标准烧瓶方式。 Python 文件：

#Your imports
from flask import Flask, render_template
from bokeh.embed import components
from bokeh.plotting import figure



@app.route('/')
def homepage():
    title = 'home'
    from bokeh.plotting import figure

    #First Plot
    p = figure(plot_width=400, plot_height=400, responsive = True)
    p.circle([1, 2, 3, 4, 5], [6, 7, 2, 4, 5], size=20, color="navy", alpha=0.5)

    #Second Plot
    p2 = figure(plot_width=400, plot_height=400,responsive = True)        
    p2.square([1, 2, 3, 4, 5], [6, 7, 2, 4, 5], size=20, color="olive", alpha=0.5)


    script, div = components(p)
    script2, div2 = components(p)

    return render_template('index.html', title = title, script = script,
    div = div, script2 = script2, div2 = div2)

您的 HTML 文件：

    <!DOCTYPE html>
<html lang="en">
<head>
    <link
    href="http://cdn.bokeh.org/bokeh/release/bokeh-0.11.1.min.css"
    rel="stylesheet" type="text/css">
<script src="http://cdn.bokeh.org/bokeh/release/bokeh-0.11.1.min.js"></script>

    <meta charset="UTF-8">
    <title>{{title}}</title>


</head>


<body>


    <div style="width: 20%; display: inline-block;">

        {{ div | safe }}
        {{ script | safe }}

    </div>

    <div style="width: 20%; display: inline-block;">

        {{ div2 | safe }}
        {{ script2 | safe }}


    </div>



</body>
</html>

另外一个技巧是制作一个像 my_plots.py 这样的 python 文件并在那里添加你的地块，然后导入到你的 main.py 中，它会让你的代码更干净。（我不知道 100% 这是否会影响您的速度，但直到现在我还没有看到任何问题）例如。

my_plots.py：

from bokeh.plotting import figure

def first_plot():

    p = figure(plot_width=400, plot_height=400, responsive = True)
    p.circle([1, 2, 3, 4, 5], [6, 7, 2, 4, 5], size=20, color="navy", alpha=0.5)
    return p

def second_plot():

    p2 = figure(plot_width=400, plot_height=400, responsive = True)
    p2.square([1, 2, 3, 4, 5], [6, 7, 2, 4, 5], size=20, color="olive", alpha=0.5)
    return p2

main.py:

@app.route('/')
def homepage():
    title = 'home'

    #First Plot
    from my_plots import first_plot
    p = first_plot()

    #Second Plot
    from my_plots import second_plot
    p2 = second_plot()

    script, div = components(p)
    script2, div2 = components(p)

    return render_template('index.html', title = title, script = script,
    div = div, script2 = script2, div2 = div2)

希望我对您有所帮助，祝您好运！

【讨论】：

当你有超过 10 个图表时，这有点难，但它有效 :) 谢谢！
@Leo，不应该是 script2, div2 = components(p2) 还是我弄错了？