Bokeh:：插在烧瓶中的格子/标签图
Bokeh:：插在烧瓶中的格子/标签图
提问于 2018-12-08 02:56:37
亲爱的，
我有一个有三个或更多标签的情节。我真的很抱歉这么长的代码，但我无法让它工作。
下面是bokeh脚本文件。
导入bokeh嵌入库
from bokeh. embed import components
from bokeh.resources import CDN合并选项卡的代码的最后一行。
############### TABS 1 ############
grid = gridplot([[V_Traffic, D_Traffic]])
tab1 = Panel(child=grid, title="LTE")
############### TABS 2 ############
p2 = figure(plot_width=300, plot_height=300)
p2.line([1, 2, 3, 4, 5], [6, 7, 2, 4, 5], line_width=3, color="navy", alpha=0.5)
tab2 = Panel(child=p2, title="line")
############### TABS 3 ############
p3 = figure(plot_width=300, plot_height=300)
p2.triangle([1, 2, 3, 4, 5], [6, 7, 2, 4, 5], line_width=3, color="pink", alpha=0.5)
tab3 = Panel(child=p3, title="triangle")
tabs = Tabs(tabs=[tab1, tab2, tab3])
## even with three tabs when I checked the length of len(components(tabs)) the answer was 2
## base on that I follow the lecture as is.
js, div = components(tabs)
cdn_js = CDN.js_files[0]
cdn_css = CDN.css_files[0]
below is my flask app code
from flask import Flask, render_template, cli
from stack_plot_grid_TAB_1 import js, div, cdn_js, cdn_css
app = Flask(__name__)
@app.route("/")
def home():
return render_template("index.html")
@app.route('/execute')
def execute_grid_tab():
return render_template("stack_plot_grid_TAB_1.html", js=js, div=div, cdn_js=cdn_js, cdn_css=cdn_css)
if __name__ == "__main__":
app.run(debug=True)在索引文件中，一旦用户选择相应的仪表板，我就给出了另一个文件的链接。 下面是index.html的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="#" onclick="window.open('/execute');
window.open('C:\py\programs\bokeh\flask\templates\stack_plot_grid_TAB_1.html');">
<button>execute python script for tabs</button></a>
</body>
</html>下面是我的最后一个情节应该显示的代码。 stack_plot_grid_TAB_1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel='stylesheet' href={{cdn_css|safe}} type="text/css"/>
<script type="text/javascript" src={{cdn_js|safe}}></script>
</head>
<body>
<button>this is the new page.</button>
{{js|safe}}
{{div|safe}}
</body>
</html>所有"html“文件都保存在”模板“文件夹中。
最后，它只是说“这是新的页面”，图形是不可见的。我还有什么额外的事要做吗？
诚挚的问候。
回答 2
Stack Overflow用户
发布于 2020-02-11 06:10:10
@Riz.Khan你的解决方案给了我一个北方。如果您创建一个def，其中包含所有的绘图单元，并返回选项卡，则它将工作得很好。
plot.py文件
def nonOccupiers():
dfn = pd.read_csv('BokehApp/Data/TT_nonOccupier.csv', delimiter='\t', index_col='Years')
dfnt = dfn[['Total Transactions', 'Total Non-Occupiers']]
rowX = '2010', '2011','2012','2013','2014','2015','2016', '2017', '2018'
....................
t1 = Panel(child=pn, title='Overview')
t2 = Panel(child=pne, title='Type of sale')
t3 = Panel(child=pn3, title='Type of buyer')
tabs = Tabs(tabs=[t1,t2,t3])
return tabs.app.py文件
from flask import Flask, render_template, request
from bokeh.embed import components
from plots import houseStockPlot, vacantPlot, Transactions, NewRegistered, nonOccupiers
from flask_bootstrap import Bootstrap
app = Flask(__name__)
Bootstrap(app)
@app.route('/')
def bokeh():
script, div = components(houseStockPlot())
script1, div1 = components(vacantPlot())
script2, div2 = components(Transactions())
script3, div3 = components(NewRegistered())
script4, div4 = components(nonOccupiers())
return render_template('bokeh.html', script=script, div=div, script1=script1,
div1=div1, script2=script2, div2=div2, script3= script3, div3=div3, script4=script4, div4=div4)我还在做the应用程序，我在这里工作，就像一个连环杀手哈哈。
.html文件
<!DOCTYPE html>
<html lang="en" dir="ltr">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap includes-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
<!-- Bokeh includes-->
<script type="text/javascript" src="https://cdn.pydata.org/bokeh/release/bokeh-1.3.4.min.js"></script>
<link rel="stylesheet" href="https://cdn.pydata.org/bokeh/release/bokeh-1.3.4.min.js" type="text/css" />
<link rel="stylesheet" href="{{ url_for('static', filename='css/article.css') }}" type="text/css" >
{{ script|safe }}
{{ script1|safe }}
{{ script2|safe }}
{{ script3|safe}}
{{ script4|safe}}
..............................
<center>
<div class='bokeh'>
{{ div4|safe }}
</div>
</center>只是这里添加的代码的相关部分。webapp链接下的webapp项目，以防有人想看一看
Stack Overflow用户
发布于 2018-12-22 06:11:08
对于那些仍然感兴趣的人，我找到了一个解决办法。
因为我的bokeh应用程序有选项卡，所以我想我可以直接导入它们，但是找不到如何导入的解决方案。
正如我前面提到的，代码对于单个图形来说是完美的，例如，TAB1有网格图，我能够将它与烧瓶完美地嵌入在一起。所以我所做的
我为每个TAB创建了单独的组件
js_TAB1, div_TAB1 = components(TAB1)
js_TAB2, div_TAB2 = components(TAB2)
js_TAB3, div_TAB3 = components(TAB3)
cdn_js = CDN.js_files[0]
cdn_css = CDN.css_files[0]然后我用HTML创建选项卡。
在每个TAB中，我分别调用我的组件
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'TAB1')">TAB1</button>
<button class="tablinks" onclick="openCity(event, 'TAB2')">TAB2</button>
<button class="tablinks" onclick="openCity(event, 'TAB3')">TAB3</button>
</div>
<div id="TAB1" class="tabcontent">
{{div_TAB1|safe}}
{{js_TAB1|safe}}
</div>
<div id="TAB2" class="tabcontent">
{{div_TAB2|safe}}
{{js_TAB2|safe}}
</div>
<div id="TAB3" class="tabcontent">
{{div_TAB3|safe}}
{{js_TAB3|safe}}
</div>注意:代码不完整，只是为了说明。如果有人需要完整的代码，他可以给我发短信。
诚挚的问候
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53679098
复制相关文章
相似问题
腾讯云开发者
