将多个散景HTML图嵌入到烧瓶中
Wbo*_*boy 4 html css flask python-3.x bokeh
我在散景网站上搜索了过去3个小时,堆栈溢出但是没有一个是我真正想要的.
我已经生成了我的情节,并将它们放在html文件中.我想要做的就是将图表嵌入我的仪表板中,如下图中白色区域中的多网格形状.但是,只添加2个图表会使它们重叠并且非常奇怪.
我使用{{include}}方法以这种方式包含图形:
任何人都可以给我指点如何很好地对齐它们？理想情况下,我希望在该空间中有6个小块地块.我不想每次加载仪表板时重新生成图表,所以我不想要嵌入方式.
请帮忙:(非常感谢你!
编辑:遵循大的建议,使用responsive = True工作,但我无法控制CSS样式和图表的大小.我怀疑它与使用include标签有关.有人可以帮忙吗？:)
小智 5
为什么你不尝试使用水平布局 水平布局
你的方式({%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)
希望我很有帮助,祝你好运!
- @Leo，不应该是 script2, div2 = components(p2) 还是我弄错了？ (3认同)