将多个散景 HTML 图嵌入到烧瓶中

Question

我在 bokeh 网站上搜索了 3 个小时，但堆栈溢出，但 none 确实是我要找的东西。

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

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

任何人都可以指点我如何对齐它们？理想情况下，我想要 space 中的 6 个小地块。我不想每次加载仪表板时都重新生成图表，所以我不想要嵌入方式。

请帮忙:(非常感谢！

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

Answer 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>

另一个技巧是制作一个 python 文件，例如 my_plots.py 并在那里添加您的绘图，然后导入给您 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)

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

将多个散景 HTML 图嵌入到烧瓶中

Embedding multiple bokeh HTML plots into flask

html

css

flask

python-3.x

bokeh