Question

我已经在散景网站上搜索过去3个小时并且堆栈溢出，但这些都不是我想要的。

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

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

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

请帮忙:(非常感谢你！

编辑：根据大的建议，使用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.pydata.org/bokeh/release/bokeh-0.11.1.min.css"
    rel="stylesheet" type="text/css">
<script src="http://cdn.pydata.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)

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

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

1 个答案: