将多个bokeh HTML情节嵌入烧瓶中 [英] Embedding multiple bokeh HTML plots into flask
问题描述
我已经在bokeh网站上搜索了过去3个小时，并且堆栈溢出，但是这些都不是我真正想要的.
I've searched for the past 3 hours on the bokeh website and stack overflow but none of it is really what i was looking for.
我已经生成了我的图，并将它们保存在html文件中.我要做的就是将地块以多网格形式嵌入到我的仪表板中，如下面图片中白色区域所示.但是，仅添加2个地块会使它们重叠并变得很奇怪.
I've generated my plots already, and have them in html files. All i want to do is embed the plots into my dashboard in a multi grid like formation in the white area in the pic below. However, adding just 2 plots cause them to overlay and be really weird.
我使用{{include}}方法以这种方式包含图形:
I used the {{ include }} method to include the graphs this way:
任何人都可以为我提供如何正确对齐的指示?理想情况下，我要在该空间中放置6个小地块.我不想每次加载仪表板时都重新生成图，所以我不想使用嵌入方式.
Anyone can give me pointers on how to align them well? Ideally i want 6 small plots in that space. I didnt want to regenerate the plots everytime i loaded the dashboard so i didnt want the embed way.
请帮助:(非常感谢！
遵循big的建议，使用响应= True可行，但是我无法控制CSS样式和图表大小.我怀疑这与使用include标记有关.有人可以帮忙吗?:)
following big's suggestion, using responsive = True works, but i am unable to control the css styling and the sizes of the charts. I suspect its to do with using the include tag. can anyone help? :)
推荐答案
为什么不尝试使用水平布局制作它水平布局
Why you dont try to make it with the horizontal layout horizontal-layout
按您的方式({％include％})，我没有找到解决方案，因此可能必须使用标准烧瓶方式.Python档案:
Whith your way ( {% include %} ), i don't find a solution so probably sou must use the standart flask way. Python file:
#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％，但直到现在我还没有发现任何问题).例如.
And one other tip is to make a python file like my_plots.py and add your plots there, and then import to you main.py it will make your code cleaner. (i dont know 100% if this will impact your speed, but i don't seen any isues until now ) For example.
my_plots.py:
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)
希望我有帮助，祝你好运！
Hope i was helpful, Good Luck!
这篇关于将多个bokeh HTML情节嵌入烧瓶中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
